:root {
    --color-background: #ff6100;
    --logo-width: clamp(180px, 38vw, 300px);
    --logo-gap: clamp(18px, 3vh, 34px);
    --logo-offset: 18vh;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-width: 320px;
    min-height: 100svh;
    margin: 0;
    overflow: hidden;
    background: var(--color-background);
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
}

img {
    display: block;
    max-width: 100%;
}

.page {
    position: relative;
}

.hero {
    position: relative;
    display: grid;
    min-height: 100svh;
    place-items: center;
    isolation: isolate;
}

.hero__logo {
    z-index: 1;
    display: flex;
    width: var(--logo-width);
    margin-block-end: var(--logo-offset);
    flex-direction: column;
    gap: var(--logo-gap);
}

.hero__brand,
.hero__status {
    width: 100%;
}

.hero__status {
    padding-inline: clamp(18px, 4vw, 42px);
}

.character {
    --character-image: none;
    --character-width: 65vw;
    --character-max-width: none;
    --character-ratio: 1;
    --character-top: auto;
    --character-right: auto;
    --character-bottom: auto;
    --character-left: auto;
    --character-position: center bottom;

    position: absolute;
    z-index: 0;
    top: var(--character-top);
    right: var(--character-right);
    bottom: var(--character-bottom);
    left: var(--character-left);
    width: var(--character-width);
    max-width: var(--character-max-width);
    aspect-ratio: var(--character-ratio);
    background-image: var(--character-image);
    background-position: var(--character-position);
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

.character--masha {
    --character-image: url("img/masha.webp");
    --character-ratio: 5 / 3;
    --character-width: 57vw;
    --character-max-width: 360px;
    --character-top: 0;
    --character-right: -12vw;
}

.character--junior-bear {
    --character-image: url("img/bear-j.webp");
    --character-ratio: 2 / 1;
    --character-width: 84vw;
    --character-max-width: 440px;
    --character-top: 0;
    --character-left: -20vw;
}

.character--middle-bear {
    --character-image: url("img/bear-m.webp");
    --character-ratio: 9 / 10;
    --character-width: 64vw;
    --character-max-width: 330px;
    --character-bottom: -4vh;
    --character-left: -16vw;
}

.character--senior-bear {
    --character-image: url("img/bear-s.webp");
    --character-ratio: 5 / 9;
    --character-width: 56vw;
    --character-max-width: 260px;
    --character-right: -13vw;
    --character-bottom: -5vh;
}

@media (min-aspect-ratio: 1 / 1) {
    :root {
        --logo-width: min(41vh, 300px);
    }

    .character--masha {
        --character-right: 0;
    }

    .character--junior-bear {
        --character-left: -6vw;
    }

    .character--middle-bear {
        --character-bottom: 0;
        --character-left: -2vw;
    }

    .character--senior-bear {
        --character-width: 68vw;
        --character-max-width: 320px;
        --character-right: -4vw;
    }
}

@media (min-aspect-ratio: 5 / 3) {
    .character--masha {
        --character-width: 65vh;
        --character-right: 8vw;
    }

    .character--junior-bear {
        --character-width: 64vh;
        --character-left: 8vw;
    }

    .character--middle-bear {
        --character-width: 46vh;
    }

    .character--senior-bear {
        --character-width: 47vh;
        --character-right: 0;
        --character-bottom: -9vh;
    }
}

@media (min-width: 70rem) {
    .character {
        transform: scale(1.25);
        transform-origin: top center;
    }

    .character--junior-bear,
    .character--middle-bear {
        --character-left: 4vw;
    }
}