@font-face {
    font-family: 'ExoSoft';
    src: url('../fonts/ExoSoft-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ExoSoft';
    src: url('../fonts/ExoSoft-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

html {
    box-sizing: border-box;
    /* Масштабирование как Canvas Scaler: 1920px → 10px base, динамически */
    font-size: calc(100vh / 192); /* 192 = 1920/10, clamp от 8px (целые пиксели) */
    font-family: 'ExoSoft', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    image-rendering: -webkit-optimize-contrast;
    background-color: #AECB3A;
}

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

html, body {
    height: 100%;
}

canvas {
    display: block;
}

body {
    margin: 0;
    background-color: #AECB3A;
}

img.js-lazy-blur,
.lazy-blur {
    filter: blur(14px);
    transform-origin: center;
    transition: filter 280ms ease;
}

.lazy-blur-loaded {
    filter: blur(0);
}

img.js-lazy-blur.lazy-blur-loaded {
    filter: blur(0);
}

#unity-container {
    width: 100%;
    height: 100%;
    position: relative;
}

#unity-canvas {
    width: 100%;
    height: 100%;
    background: white;
    display: block;
    image-rendering: auto;  /* Лучше на мобилках для 3D графики */
}

#loading-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    pointer-events: all;
    overflow: hidden;
    transition: opacity 0.2s ease;
    background-color: #AECB3A;
}

#unity-loading-bar {
    position: absolute;

    bottom: 13rem;
    width: 73rem;
    height: 4.8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border-radius: 1000px;
    overflow: hidden;
}

#unity-progress-bar-empty {
    width: 100%;
    height: 100%;
    background-color: white;
    border: 0.6rem solid #DE8632;

    border-radius: 1000px;
}

#unity-progress-bar-full {
    position: absolute;
    top: 0;
    left: 0;

    transition: all 0.1s ease;

    width: 0%;
    height: 100%;
    background-color: #991EDE;
    border: 0.6rem solid #DE8632;

    border-radius: 1000px;
}

@keyframes heart-pulse {
    0% {
        opacity: 0.5;
        scale: 1;
    }
    50% {
        opacity: 0.25;
        scale: 0.85;
    }
    100% {
        opacity: 0.5;
        scale: 1;
    }
}

@keyframes heart-pulse-2 {
    0% {
        opacity: 0.5;
        scale: 1;
    }
    50% {
        opacity: 0.25;
        scale: 0.82;
    }
    100% {
        opacity: 0.5;
        scale: 1;
    }
}

@keyframes heart-pulse-3 {
    0% {
        opacity: 0.5;
        scale: 1;
    }
    50% {
        opacity: 0.25;
        scale: 0.88;
    }
    100% {
        opacity: 0.5;
        scale: 1;
    }
}

.background-image {
    position: absolute;
    
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: #AECB3A;

    object-fit: cover;
}

.logo-brainrot {
    position: absolute;
    top: 5rem; /* 50px / 10 */
    left: 50%;
    transform: translateX(-50%);
    width: 27.2rem; /* 272px / 10 */
    height: 14.1rem; /* 141px / 10 */
}

.logo-klippini {
    position: absolute;
    top: 21.1rem; /* 211px / 10 */
    left: 50%;
    transform: translateX(-50%);
    width: 70rem; /* 700px / 10 */
    height: 15.2rem; /* 152px / 10 */
}

.heart {
    position: absolute;
    transition: opacity 0.8s ease;
    opacity: 0;
}

.hearts.show .heart {
    opacity: 0.5;
}

.heart {
    &:nth-child(1) {
        top: calc(50% - 14.8rem);
        left: calc(50% + 20.9rem);
        width: 38.4rem;
        translate: -50% -50%;
        rotate: -29.07815deg;
        animation: heart-pulse 1.5s cubic-bezier(0.39, 0.575, 0.565, 1) 0.3s infinite;
    }

    &:nth-child(2) {
        top: calc(50% + 22.8rem);
        left: calc(50% - 5.1rem);
        width: 38.4rem;
        translate: -50% -50%;
        rotate: -335.1019deg;
        animation: heart-pulse-2 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.8s infinite;
    }

    &:nth-child(3) {
        top: calc(50% - 13.7rem);
        left: calc(50% - 29.8rem);
        width: 19.621rem;
        translate: -50% -50%;
        rotate: -334.6829deg;
        animation: heart-pulse 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) 1.2s infinite;
    }

    &:nth-child(4) {
        top: calc(50% - 40.9rem);
        left: calc(50% - 3.4rem);
        width: 22.08rem;
        translate: -50% -50%;
        rotate: -0.1268657deg;
        animation: heart-pulse-3 1.6s cubic-bezier(0.39, 0.575, 0.565, 1) 0.5s infinite;
    }

    &:nth-child(5) {
        top: calc(50% + 18.2rem);
        left: calc(50% - 48.3rem);
        width: 30rem;
        translate: -50% -50%;
        rotate: -18.74837deg;
        animation: heart-pulse 1.4s cubic-bezier(0.39, 0.575, 0.565, 1) 1.5s infinite;
    }

    &:nth-child(6) {
        top: calc(50% + 58.2rem);
        left: calc(50% - 23.4rem);
        width: 30rem;
        translate: -50% -50%;
        rotate: -9.524082deg;
        animation: heart-pulse-2 1.7s cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s infinite;
    }

    &:nth-child(7) {
        top: calc(50% + 57.3rem);
        left: calc(50% + 28.6rem);
        width: 30rem;
        translate: -50% -50%;
        rotate: -321.521deg;
        animation: heart-pulse-3 1.3s cubic-bezier(0.39, 0.575, 0.565, 1) 1.8s infinite;
    }

    &:nth-child(8) {
        top: calc(50% + 92.9rem);
        left: calc(50% + 29.1rem);
        width: 30rem;
        translate: -50% -50%;
        rotate: -24.85222deg;
        animation: heart-pulse 1.9s cubic-bezier(0.39, 0.575, 0.565, 1) 0.7s infinite;
    }

    &:nth-child(9) {
        top: calc(50% + 93rem);
        left: calc(50% - 33.9rem);
        width: 30rem;
        translate: -50% -50%;
        rotate: -348.5533deg;
        animation: heart-pulse-2 1.1s cubic-bezier(0.39, 0.575, 0.565, 1) 1.0s infinite;
    }

    &:nth-child(10) {
        top: calc(50% + 67.1rem);
        left: calc(50% + 2.3rem);
        width: 13.983rem;
        translate: -50% -50%;
        rotate: -354.3017deg;
        animation: heart-pulse-3 1.5s cubic-bezier(0.39, 0.575, 0.565, 1) 0.4s infinite;
    }

    &:nth-child(11) {
        top: calc(50% + 21.1rem);
        left: calc(50% + 46.3rem);
        width: 30rem;
        translate: -50% -50%;
        rotate: -333.7484deg;
        animation: heart-pulse 1.6s cubic-bezier(0.39, 0.575, 0.565, 1) 1.6s infinite;
    }
}

.button-exit {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;

    background-color: #991EDE;
    border: 0.6rem solid white;

    border-radius: 50%;

    width: 10.6rem;
    height: 10.6rem;

    top: calc(4rem);
    left: calc(4rem);
}

.button-exit:hover, .button-exit:active {
    background-color: #7A0FA0;
}

.button-exit__icon {
    width: 5rem;
    height: 5rem;
}

@keyframes partner-block-enter {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 8rem)) scale(0.85);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.partner-block {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: white;
    border: 0.6rem solid #DE8632;

    width: 55rem;
    height: 55rem;

    top: calc(50% - 10rem);
    left: calc(50%);

    border-radius: 6rem;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

    transform: translate(-50%, -50%);

    opacity: 0;
    pointer-events: none;
}

.partner-block--visible {
    animation: partner-block-enter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    pointer-events: auto;
}

.partner-icon {
    width: 45rem;
    height: 45rem;

    object-fit: contain;
    object-position: center;
}

.loading-text-block {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    background-color: white;
    border: 0.6rem solid #DE8632;

    padding: 3rem 5rem;

    bottom: calc(20rem);
    left: calc(50%);

    border-radius: 1000rem;
    gap: 0.1rem;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

    transform: translateX(-50%);
}

.loading-title {
    margin: 0;
    font-size: 4.4rem;
    font-weight: 900;
    color: #3F3F3F;
    white-space: nowrap;
}

.loading-description {
    margin: 0;
    font-size: 3.6rem;
    font-weight: 600;
    color: #3F3F3F;
    white-space: nowrap;
}

#unity-progress-text {
    color: white;
    font-size: 3.6rem;
    font-weight: 600;
    margin: 0;

    position: absolute;
    bottom: calc(7.5rem);
    left: 50%;

    transform: translateX(-50%);
}

.brainrot-caption {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    margin: 0;
    min-width: 80rem;
    text-align: center;
    font-size: 2.4rem;
    line-height: 1.2;
    font-weight: 600;
    color: #ffffff;
    pointer-events: none;
    z-index: 10;
    opacity: 0.7;
}