body {
    margin: 0;
    -webkit-transform: none;
}

body .page-header__scrolled {
    position: static;
}

.desktop {
    display: flex;
    flex-direction: column;
    max-width: 2000px;
    width: auto;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    background-color: #111213;
    margin-bottom: -48px;
}

.desktop img {
    height: auto;
    object-fit: cover;
    max-width: 1000%;
}

.desktop .site-section {

}

.desktop .frame {
    height: 202px;
    padding: 0px 287px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
    align-self: stretch;
    width: 100%;
    background-color: #000000;
}

.desktop .screenshot {
    position: relative;
    width: 1426px;
    height: 198px;
    aspect-ratio: 7.2;
}

section.header {
    position: relative;
    min-height: 100vh; /* Или любая нужная высота */
    background: #1a1a2e;
    color: white;

    /* Для плавных переходов */
    transition: background-color 0.3s ease,
    transform 0.3s ease;

    /* Предотвращаем мерцание на iOS */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    /* Оптимизация производительности */
    will-change: transform;
}

/* ============================================
   Wrapper для скролл-эффекта
   ============================================ */

.header-scroll-wrapper {
    position: relative;
    width: 100%;
}

/* ============================================
   Placeholder (компенсация высоты при fixed)
   ============================================ */

.header-placeholder {
    display: none;
    visibility: hidden;
    pointer-events: none;
}

/* ============================================
   Состояние фиксации
   ============================================ */

section.header.is-fixed {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1000;

    /* Тень для отделения от контента */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

section.header.is-absolute {
    position: absolute;
    left: 0;
    right: 0;
}

/* ============================================
   Стадии анимации
   ============================================ */

/* Стадия 2 */
section.header.stage-2 {
    background: #16213e;
}

section.header.stage-2::before {
    content: 'Stage 2';
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    font-size: 14px;
}

/* Стадия 3 */
section.header.stage-3 {
    background: #0f3460;
}

section.header.stage-3::before {
    content: 'Stage 3';
}

/* Стадия 4 */
section.header.stage-4 {
    background: #e94560;
}

section.header.stage-4::before {
    content: 'Stage 4';
}
/* Состояние fixed */
.header.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

/* Состояние absolute (когда уходит вверх) */
.header.is-absolute {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
}


.desktop .header {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 1099px;
    background-color: #111212;
    overflow: hidden;
}

.desktop .lights {
    position: absolute;
    top: calc(50% - 39px);
    left: calc(50% - 594px);
    width: 1190px;
    height: 179px;
    object-fit: cover;
    transition: all 2s ease;
    z-index: -21;
}

.desktop .animated-window {
    z-index: -20;
    position: absolute;
    top: 14px;
    left: calc(50% - 312px);
    width: 624px;
    height: 918px;
    aspect-ratio: 0.68;
    object-fit: cover;
}

.desktop .img-1,
.desktop .img-2 {
    z-index: -2;
    position: absolute;
    top: 7324px;
    left: calc(50% - 304px);
    width: 608px;
    height: 884px;
    aspect-ratio: 0.69;
    object-fit: cover;
    opacity: 0;
    transition: all 1s ease;
}

.desktop .tree-dark {
    left: calc(50% - 304px);
    position: absolute;
    top: 7264px;
    width: 607px;
    height: 914px;
    aspect-ratio: 0.66;
    object-fit: cover;
    opacity: 0;
    transition: all 2s ease;
}

.desktop .tree-light {
    left: calc(50% - 304px);
    position: absolute;
    top: 7264px;
    width: 607px;
    height: 914px;
    aspect-ratio: 0.66;
    object-fit: cover;
    transition: all 2s ease;
}

.desktop .floor {
    position: absolute;
    top: 785px;
    left: calc(50% - 629px);
    width: 1258px;
    height: 246px;
    object-fit: cover;
}

.desktop .rectangle {
    position: absolute;
    top: 0;
    left: calc(50% - 629px);
    width: 629px;
    height: 246px;
    transition: all 1s ease;
    border-radius: 0px 0px 0px 800px;
    background: linear-gradient(320deg, #1D3A55 37.9%, #4080BB 49.27%, #1D3A55 53.5%, #4080BB 58.75%, #1D3A55 61.05%);
    object-fit: cover;
}

.desktop .div {
    position: absolute;
    top: 0;
    left: 50%;
    width: 629px;
    height: 246px;
    border-radius: 800px 0px 0px 0px;
    transition: all 1s ease;
    transform: rotate(180deg);
    background: linear-gradient(220deg, #1D3A55 31.81%, #4080BB 49.26%, #1D3A55 64.16%);
    object-fit: cover;
}

.desktop .toys {
    position: absolute;
    top: calc(50% - 66px);
    left: calc(50% - 411px);
    width: 837px;
    height: 405px;
    aspect-ratio: 2.07;
    object-fit: cover;
    transition: all 1s ease;
}

.desktop .animated-horse {
    position: absolute;
    top: 671px;
    left: calc(50% - 467px);
    width: 307px;
    height: 258px;
    aspect-ratio: 1.21;
    object-fit: cover;
    transition: all 1s ease;
}

.desktop .curtains-cut {
    position: absolute;
    width: 1942px;
    top: -8px;
    left: calc(50% - 971px);
    height: 1074px;
    object-fit: cover;
}

.desktop .alice-book {
    position: absolute;
    top: calc(50% + 64px);
    left: calc(50% - 241px);
    width: 482px;
    height: 401px;
    aspect-ratio: 1.25;
    transition: all 1s ease;
    object-fit: cover;
}

.desktop .animated-stars {
    position: absolute;
    top: 117px;
    left: calc(50% - 1208px);
    width: 696px;
    height: 864px;
    transform: rotate(90deg);
    aspect-ratio: 0.806;
}

.desktop .animated-stars-2 {
    position: absolute;
    top: 117px;
    left: calc(50% + 478px);
    width: 696px;
    height: 864px;
    transform: rotate(-90deg);
    aspect-ratio: 0.806;
}

.desktop .animated-stars-3 {
    position: absolute;
    top: 339px;
    left: calc(50% - 373px);
    width: 770px;
    height: 662px;
    aspect-ratio: 1.17;
    object-fit: cover;
}

.desktop .arrow {
    position: absolute;
    top: 507px;
    left: calc(50% - 74px);
    width: 147px;
    height: 55px;
    aspect-ratio: 2.98;
    transition: all 1s ease;
}

.desktop .title {
    position: absolute;
    top: -189px;
    left: calc(50% - 504px);
    width: 1009px;
    height: 683px;
    transition: all 1s ease;
}

.desktop .ellipse {
    position: absolute;
    top: 0;
    left: calc(50% - 504px);
    width: 1009px;
    height: 653px;
    background-color: #000000;
    border-radius: 504.5px / 326.5px;
    filter: blur(100px);
    opacity: 0.5;
    transition: all 1s ease;
}

.desktop .title-2 {
    position: absolute;
    top: 249px;
    left: calc(50% - 420px);
    width: 837px;
    height: 434px;
    aspect-ratio: 1.93;
    object-fit: cover;
}

.desktop .rectangle-2 {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -5px;
    height: 56px;
    background-color: #111213;
    filter: blur(50px);
}

.desktop .header.step-2 .img-1 {
    top: 107px;
    opacity: 1;
}
.desktop .header.step-2 .img-2 {
    z-index: -1;
    top: 107px;
}

.desktop .header.step-3 .img-2 {
    opacity: 1;
}

.desktop .header.step-4 .floor .rectangle {
    left: -707px;
}

.desktop .header.step-4 .floor .div {
    left: 2078px;
}

.desktop .header.step-4 .toys {
    top: 564px;
}

.desktop .header.step-4 .animated-horse {
    top: 755px;
}

.desktop .header.step-4 .alice-book {
    top: 713px;
}

.desktop .header.step-5 .lights {
    top: 550px;
}


.desktop .header.step-5 .toys {
    top: 1224px;
}

.desktop .header.step-5 .animated-horse {
    top: 1095px;
}

.desktop .header.step-5 .alice-book {
    top: 1048px;
}

.desktop .header.step-5 .arrow {
    top: 559px;
}

.desktop .header.step-5 .ellipse {
    background-color: #ffffff;
}

.desktop .header.step-5 .title {
    top: -110px;
}

@media (max-width: 1439px) {

    .desktop .header {
        width: 1440px;
        height: 988px;
    }

    .desktop .curtains-cut {
        position: absolute;
        width: 1438px;
        top: -16px;
        left: calc(50% - 719px);
        height: 1004px;
    }


}


.desktop .intro {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 1320px;
    background-color: #111212;
    overflow: hidden;
}

.desktop .animated-stars-4 {
    position: absolute;
    top: 156px;
    left: calc(50% - 593px);
    width: 1186px;
    height: 1010px;
    aspect-ratio: 1.17;
    object-fit: cover;
}

.desktop .toys-falling {
    position: absolute;
    top: -5098px;
    left: calc(50% - 446px);
    width: 850px;
    height: 731px;
    aspect-ratio: 1.16;
    object-fit: cover;
    transition: all 1s ease;
}

.desktop .book-falling {
    position: absolute;
    top: -4741px;
    left: calc(50% + 56px);
    width: 159px;
    height: 160px;
    aspect-ratio: 1;
    transition: all 1s ease;
}

.desktop .cloud {
    position: absolute;
    top: 685px;
    left: calc(50% + 251px);
    width: 478px;
    height: 215px;
}

.desktop .cloud-2 {
    position: absolute;
    top: 465px;
    left: calc(50% - 702px);
    width: 467px;
    height: 212px;
}

.desktop .alice-falling {
    position: absolute;
    top: -5239px;
    left: calc(50% - 410px);
    width: 825px;
    height: 830px;
    aspect-ratio: 0.99;
    object-fit: cover;
    transition: all 1s ease;
}
.desktop .rabbit-falling {
    position: absolute;
    top: -5239px;
    left: calc(50% + 10px);
    width: 220px;
    height: 206px;
    aspect-ratio: 1.07;
    object-fit: cover;
    transition: all 1s ease;
}

.desktop .flexcontainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    position: absolute;
    width: 914px;
    height: 335px;
    top: 99px;
    left: 543px;
}

.desktop .text-i {
    position: relative;
    align-self: stretch;
    font-family: "Tenor Sans", Helvetica;
    font-weight: 400;
    color: #f8f8f8;
    font-size: 26px;
    text-align: center;
    letter-spacing: 0;
    line-height: 28.6px;
}

.desktop .text-wrapper {
    font-family: "Tenor Sans", Helvetica;
    font-weight: 400;
    color: #f8f8f8;
    font-size: 26px;
    letter-spacing: 0;
    line-height: 28.6px;
}

.desktop .intro.step-2 .alice-falling {
    top: 389px;
}

.desktop .intro.step-3 .rabbit-falling {
    top: 1020px;
    transform: rotate(-21deg);
}

.desktop .intro.step-3 .book-falling {
    top: 513px;
}

.desktop .intro.step-4 .toys-falling {
    top: 553px;
}

.desktop .intro.step-5 .alice-falling {
    top: 1446px;
}

.desktop .intro.step-6 .rabbit-falling {
    top: 1925px;
}

.desktop .intro.step-6 .book-falling {
    top: 1418px;
}

.desktop .intro.step-6 .toys-falling {
    top: 1370px;
}


.desktop .skirts {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 1187px;
    background-image: url("../img/newyear-2026/clothing room background 1.png");
    background-size: cover;
    background-position: 50% 50%;
    overflow: hidden;
}

.desktop .costumes-top {
    position: absolute;
    top: -763px;
    left: calc(50% - 629px);
    width: 1236px;
    height: 780px;
    aspect-ratio: 1.58;
    object-fit: cover;
    transition: all 1s ease;
}

.desktop .costumes-bottom {
    position: absolute;
    top: 1205px;
    left: calc(50% - 629px);
    width: 1236px;
    height: 710px;
    aspect-ratio: 1.74;
    object-fit: cover;
    transition: all 1s ease;
}

.desktop .pointes {
    position: absolute;
    top: 856px;
    left: calc(50% - 501px);
    width: 1000px;
    height: 615px;
    aspect-ratio: 1.62;
    object-fit: cover;
    transition: all 1s ease;
}

.desktop .alice-skirts {
    position: absolute;
    top: -806px;
    left: calc(50% - 313px);
    width: 626px;
    height: 926px;
    aspect-ratio: 0.68;
    opacity: 0;
    z-index: -1;
    transition: all 1s ease;
}

.desktop .skirts-2 {
    top: 715px;
    left: calc(50% - 690px);
    height: 582px;
    position: absolute;
    width: 1379px;
    object-fit: cover;
    z-index: 50;
}

.desktop .skirts-3 {
    top: 867px;
    left: calc(50% - 754px);
    height: 582px;
    position: absolute;
    width: 1379px;
    object-fit: cover;
    transform: scale(1, -1) rotate(180deg);
    z-index: 50;
}

.desktop .shadow-top {
    top: 0;
    height: 576px;
    position: absolute;
    left: calc(50% - 1000px);
    width: 2000px;
    z-index: 100;
}

.desktop .shadow-bottom {
    bottom: 0;
    height: 678px;
    position: absolute;
    left: calc(50% - 1000px);
    width: 2000px;
    z-index: 100;
}

.desktop .skirts.step-2 .pointes {
    top: 46px;
}

.desktop .skirts.step-2 .alice-skirts {
    top: 252px;
    opacity: 1;
    z-index: 1;
}

.desktop .skirts.step-3 .costumes-top {
    top: -163px;
}

.desktop .skirts.step-3 .costumes-bottom {
    top: 379px;
}

.desktop .skirts.step-4 .alice-skirts {
    top: 867px;
}

.desktop .keyhole {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 1404px;
    background-color: #111212;
    overflow: hidden;
}

.desktop .web {
    position: absolute;
    top: 42px;
    left: calc(50% - 870px);
    width: 632px;
    height: 899px;
}

.desktop .web-2 {
    position: absolute;
    top: 736px;
    left: calc(50% + 26px);
    width: 880px;
    height: 693px;
}

.desktop .animatred-eyes {
    position: absolute;
    top: 124px;
    left: calc(50% - 625px);
    width: 1250px;
    height: 976px;
    aspect-ratio: 1.28;
    object-fit: cover;
}

.desktop .keyhole-2 {
    top: 209px;
    left: calc(50% - 239px);
    position: absolute;
    width: 478px;
    height: 734px;
    aspect-ratio: 0.65;
    transition: all 1s ease;
}

.desktop .keyhole-alice {
    top: 209px;
    left: calc(50% - 239px);
    position: absolute;
    width: 478px;
    height: 734px;
    aspect-ratio: 0.65;
    opacity: 0;
    transition: all 1s ease;
}

.desktop .alice-falling-dark {
    top: 165px;
    left: calc(50% - 173px);
    position: absolute;
    width: 289px;
    height: 303px;
    opacity: 0;
    transform: rotate(12deg);
    transition: all 1s ease;
}

.desktop .rat-king {
    position: absolute;
    top: 3987px;
    left: calc(50% - 624px);
    width: 724px;
    height: 786px;
    aspect-ratio: 0.91;
    transform: rotate(9.16deg);
    transition: all 1s ease;
    opacity: 0;
}

.desktop .bottle {
    position: absolute;
    top: calc(50% + 2820px);
    left: 13153px;
    width: 177px;
    height: 165px;
    aspect-ratio: 1.07;
    transition: all 1s ease;
    opacity: 0;
}

.desktop .rectangle-3 {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -100px;
    height: 200px;
    background-color: #111213;
    filter: blur(50px);
}


.desktop .keyhole.step-2 .keyhole-2 {
    opacity: 0;
}

.desktop .keyhole.step-2 .keyhole-alice {
    opacity: 1;
}

.desktop .keyhole.step-2 .rat-king {
    top: 620px;
    opacity: 1;
}

.desktop .keyhole.step-3 .bottle {
    width: 504px;
    height: 471px;
    top: 545px;
    transform: rotate(0);
    left: calc(50% + 32px);
    opacity: 1;
}

.desktop .keyhole.step-3 .rat-king {
    transform: rotate(11.24deg);
}


.desktop .keyhole.step-4 .bottle {
    width: 200px;
    height: 183px;
    top: 480px;
    transform: rotate(0);
    left: calc(50% - 98px);
    transform: rotate(50deg);
}

.desktop .keyhole.step-4 .keyhole-2 {
    opacity: 1;
}

.desktop .keyhole.step-4 .keyhole-alice {
    opacity: 0;
}

.desktop .keyhole.step-4 .rat-king {
    transform: rotate(0);
}

.desktop .keyhole.step-5 .bottle {
    opacity: 0;
}


.desktop .keyhole.step-5 .rat-king {
    transform: rotate(11.24deg);
}


.desktop .keyhole.step-6 .rat-king {
    transform: rotate(0);
    width: 930px;
    height: 1035px;
    top: 384px;
    left: calc(50% - 758px);
}

.desktop .keyhole.step-6 .alice-falling-dark {
    top: 855px;
    left: calc(50% - 145px);
    opacity: 1;
    transform: rotate(0);
}



.desktop .black-snow {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 1080px;
    background-color: #111212;
}

.desktop .cut {
    position: absolute;
    width: 90%;
    top: -29px;
    left: 2.8%;
    height: 1139px;
}

.desktop .black-snow .stage-2 {
    position: absolute;
    width: 1888px;
    top: 209px;
    left: calc(50% - 944px);
    height: 1097px;
    transition: all 1s ease;
}


.desktop .ellipse-blur {
    position: absolute;
    width: 1024px;
    top: -58px;
    left: calc(50% - 570px);
    height: 1024px;
    border-radius: 1024px;
    background: #CEECFF;
    filter: blur(200px);
}

.desktop .alice-falling-black {
    position: absolute;
    top: -1987px;
    left: calc(50% - 232px);
    width: 302px;
    height: 303px;
    transform: rotate(0);
    transition: all 1s ease;
    opacity: 0;
}

.desktop .rabbit-falling-2 {
    position: absolute;
    top: -1987px;
    left: calc(50% + 10px);
    width: 160px;
    height: 178px;
    transform: rotate(-22.54deg);
    transition: all 1s ease;
    opacity: 0;
}

.desktop .pie {
    position: absolute;
    top: -1987px;
    left: calc(50% + 20px);
    width: 177px;
    height: 180px;
    transform: rotate(0);
    transition: all 1s ease;
    opacity: 0;
}

.desktop .snowflakes {
    position: absolute;
    top: -197px;
    left: calc(50% - 646px);
    width: 1266px;
    height: 973px;
    aspect-ratio: 1.3;
    object-fit: cover;
    transition: all 1s ease;
}

.desktop .snowflakes-2 {
    position: absolute;
    top: -179px;
    left: calc(50% - 528px);
    width: 1182px;
    height: 942px;
    object-fit: cover;
    transition: all 1s ease;
    opacity: 0;
}

.desktop .snow-animated {
    position: absolute;
    top: calc(50% - 507px);
    left: calc(50% - 958px);
    width: 1917px;
    height: 1015px;
    aspect-ratio: 1.89;
    object-fit: cover;
}

.desktop .black-snow.step-2 .alice-falling-black {
    top: 110px;
    opacity: 1;
}

.desktop .black-snow.step-2 .rabbit-falling-2 {
    top: 270px;
    opacity: 1;
}

.desktop .black-snow.step-2 .pie {
    top: 90px;
    opacity: 1;
}


.desktop .black-snow.step-3 .alice-falling-black {
    top: 110px;
    width: 450px;
    height: 450px;
    left: calc(50% - 290px);
}

.desktop .black-snow.step-3 .rabbit-falling-2 {
    top: 340px;
}

.desktop .black-snow.step-3 .pie {
    width: 45px;
    height: 45px;
    top: 307px;
    left: calc(50% - 40px);
    opacity: 0;
}

.desktop .black-snow.step-3 .snowflakes {
    filter: brightness(0) invert(1);
}

.desktop .black-snow.step-4 .alice-falling-black {
    top: 3px;
    width: 650px;
    height: 650px;
    left: calc(50% - 340px);
}

.desktop .black-snow.step-4 .rabbit-falling-2 {
    top: 510px;
}

.desktop .black-snow.step-4 .snowflakes {
    top: -70px;
    width: 1055px;
    height: 811px;
    left: calc(50% - 538px);
    opacity: 0;
}

.desktop .black-snow.step-4 .snowflakes-2 {
    top: 27px;
    width: 985px;
    height: 736px;
    left: calc(50% - 430px);
    opacity: 1;
}

.desktop .black-snow.step-4 .stage-2 {
    top: 178px;
}

.desktop .black-snow.step-5 .alice-falling-black {
    top: 1735px;
}

.desktop .black-snow.step-5 .rabbit-falling-2 {
    top: 1294px;
}

.desktop .black-snow.step-5 .stage-2 {
    top: 168px;
}

.desktop .black-snow.step-6 .snowflakes-2 {
    top: 864px;
    opacity: 0;
}

.desktop .black-snow.step-6 .stage-2 {
    top: 148px;
}


.desktop .candies {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 1492px;
    background-color: #111212;
    overflow: hidden;
}

.desktop .city-pattern {
    position: absolute;
    width: 1945px;
    top: 225px;
    left: calc(50% - 972px);
    height: 1645px;
}

.desktop .city-siluete {
    position: absolute;
    width: 1957px;
    top: 209px;
    left: calc(50% - 978px);
    height: 1264px;
}

.desktop .cake {
    position: absolute;
    top: 598px;
    left: calc(50% - 373px);
    width: 746px;
    height: 696px;
}

.desktop .alice-cake-1 {
    position: absolute;
    width: 913px;
    height: 1194px;
    top: -1260px;
    left: calc(50% - 456px);
    transition: all 1s ease;
}

.desktop .alice-cake-2 {
    position: absolute;
    width: 1060px;
    height: 991px;
    top: 308px;
    left: calc(50% - 535px);
    opacity: 0;
    transition: all 1s ease;
}

.desktop .candy-1 {
    position: absolute;
    width: 160px;
    height: 218px;
    top: 710px;
    left: calc(50% - 80px);
    opacity: 0;
    transition: all 1s ease;
}

.desktop .candy-2 {
    position: absolute;
    width: 160px;
    height: 215px;
    top: 711px;
    left: calc(50% - 80px);
    opacity: 0;
    transition: all 1s ease;
}

.desktop .candy-3 {
    position: absolute;
    width: 200px;
    height: 102px;
    top: 743px;
    left: calc(50% - 110px);
    transform: rotate(-15deg);
    opacity: 0;
    transition: all 1s ease;
}

.desktop .candy-4 {
    position: absolute;
    width: 198px;
    height: 187px;
    top: 725px;
    left: calc(50% - 99px);
    opacity: 0;
    transition: all 1s ease;
}

.desktop .candy-5 {
    position: absolute;
    width: 92px;
    height: 92px;
    top: 773px;
    left: calc(50% - 26px);
    opacity: 0;
    transition: all 1s ease;
}

.desktop .candy-6 {
    position: absolute;
    width: 152px;
    height: 180px;
    top: 737px;
    left: calc(50% - 82px);
    opacity: 0;
    transition: all 1s ease;
}

.desktop .woman {
    position: absolute;
    top: 802px;
    left: calc(50% - 1557px);
    width: 648px;
    height: 524px;
    height: 524px;
    transition: all 1s ease;
    opacity: 0;
}

.desktop .rabbit-cake {
    position: absolute;
    top: 1088px;
    left: calc(50% + 445px);
    width: 170px;
    height: 231px;
    transition: all 1s ease;
    opacity: 0;
    transform: rotate(6.64deg);
}

.desktop .decor {
    position: absolute;
    top: 513px;
    left: calc(50% + 400px);
    width: 321px;
    height: 735px;
    transition: all 1s ease;
}

.desktop .pattern {
    position: absolute;
    top: 38px;
    left: calc(50% - 737px);
    width: 1472px;
    height: 443px;
}

.desktop .floor-2 {
    position: absolute;
    top: 1219px;
    left: calc(50% - 954px);
    width: 1908px;
    height: 380px;
}

.desktop .candies.step-2 .alice-cake-1 {
    top: 426px;
}

.desktop .candies.step-3 .alice-cake-1 {
    opacity: 0;
}

.desktop .candies.step-3 .alice-cake-2 {
    opacity: 1;
}

.desktop .candies.step-3 .woman {
    left: calc(50% - 640px);
    opacity: 1;
}

.desktop .candies.step-3 .rabbit-cake {
    width: 352px;
    height: 451px;
    top: 959px;
    left: calc(50% + 139px);
    opacity: 1;
    transform: rotate(-15.28deg);
}

.desktop .candies.step-4 .woman {
    transform: rotate(-5deg);
}

.desktop .candies.step-4 .rabbit-cake {
    transform: rotate(-2deg);
}

.desktop .candies.step-4 .decor {
    transform: rotate(5deg);
}

.desktop .candies.step-4 .candy-1 {
    top: 425px;
    left: calc(50% - 727px);
    opacity: 1;
}

.desktop .candies.step-4 .candy-2 {
    top: 60px;
    left: calc(50% + 570px);
    opacity: 1;
}

.desktop .candies.step-4 .candy-3 {
    top: 235px;
    left: calc(50% - 316px);
    opacity: 1;
}

.desktop .candies.step-4 .candy-4 {
    top: 731px;
    left: calc(50% + 170px);
    opacity: 1;
}

.desktop .candies.step-4 .candy-5 {
    top: 1223px;
    left: calc(50% + 67px);
    opacity: 1;
}

.desktop .candies.step-4 .candy-6 {
    top: 1043px;
    left: calc(50% - 512px);
    opacity: 1;
}

.desktop .candies.step-5 .alice-cake-2 {
    top: 1218px;
    opacity: 0;
}

.desktop .candies.step-5 .rabbit-cake {
    top: 1327px;
    transform: rotate(-60deg);
    opacity: 0;
}



.desktop .ball {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 1526px;
    background-color: #111212;
}

.desktop .ellipse-2 {
    position: absolute;
    top: calc(50% - 434px);
    left: calc(50% - 957px);
    width: 1914px;
    height: 768px;
    background-color: #ceecff;
    border-radius: 957px / 384px;
    filter: blur(200px);
    opacity: 1;
    transition: all 1s ease;
}

.desktop .alice-hair-section {
    top: -180px;
    height: 1698px;
    aspect-ratio: 1.31;
    position: absolute;
    left: calc(50% - 1000px);
    width: 2000px;
    opacity: 0;
    transition: all 1s ease;
}

.desktop .alice-hair-section-2 {
    top: -168px;
    height: 1698px;
    aspect-ratio: 1.18;
    object-fit: cover;
    position: absolute;
    left: calc(50% - 1000px);
    width: 2000px;
    transition: all 1s ease;
}

.desktop .animated-stars-5 {
    position: absolute;
    top: 97px;
    left: calc(50% - 538px);
    width: 1076px;
    height: 1332px;
    aspect-ratio: 0.81;
    object-fit: cover;
}

.desktop .rectangle-4 {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -10px;
    height: 220px;
    background-color: #000000;
    filter: blur(50px);
}

.desktop .ball-pale {
    position: absolute;
    top: 806px;
    left: calc(50% - 232px);
    width: 464px;
    height: 540px;
    aspect-ratio: 0.86;
    object-fit: cover;
    transition: all 1s ease;
}

.desktop .ellipse-3 {
    position: absolute;
    top: 871px;
    left: calc(50% - 261px);
    width: 195px;
    height: 89px;
    background-color: #ffffff;
    border-radius: 97.72px / 44.74px;
    transform: rotate(-46.61deg);
    filter: blur(37.5px);
    transition: all 1s ease;
}

.desktop .ellipse-4 {
    position: absolute;
    top: 1077px;
    left: calc(50% + 121px);
    width: 107px;
    height: 89px;
    background-color: #ffffff;
    border-radius: 53.32px / 44.74px;
    transform: rotate(-54.22deg);
    filter: blur(37.5px);
    transition: all 1s ease;
}

.desktop .ball.step-2 .alice-hair-section {
    top: -40px;
    opacity: 1;
}

.desktop .ball.step-2 .alice-hair-section-2 {
    top: -28px;
    opacity: 0;
}

.desktop .ball.step-2 .ball-pale {
    top: 921px;
}

.desktop .ball.step-2 .ellipse-3{
    top: 1036px;
}

.desktop .ball.step-2 .ellipse-4 {
    top: 1132px;
}

.desktop .ball.step-3 .alice-hair-section {
    top: 0;
    opacity: 0;
}

.desktop .ball.step-3 .alice-hair-section-2 {
    top: 12px;
    opacity: 1;
}

desktop .ball.step-4 .alice-hair-section {
    top: 1523px;
    opacity: 0;
}

.desktop .ball.step-4 .alice-hair-section-2 {
    top: 1535px;
    opacity: 1;
}

.desktop .ball.step-4 .ball-pale {
    top: 461px;
    transform: rotate(8.78deg);
}

.desktop .ball.step-4 .ellipse-2 {
    opacity: 0.2;
}

.desktop .ball.step-4 .ellipse-3{
    top: 576px;
    opacity: 0;
}

.desktop .ball.step-4 .ellipse-4 {
    top: 772px;
    opacity: 0;
}


.desktop .magician {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 1875px;
    background-color: #111212;
    overflow: hidden;
}

.desktop .rectangle-5 {
    position: absolute;
    top: -200px;
    left: calc(50% - 1300px);
    width: 2600px;
    height: 1623px;
}

.desktop .alice-big-moon {
    position: absolute;
    top: -534px;
    left: calc(50% - 1000px);
    width: 2000px;
    height: 2324px;
    aspect-ratio: 0.86;
    transition: all 1s ease;
}

.desktop .stars {
    position: absolute;
    top: -61px;
    left: calc(50% - 544px);
    width: 1199px;
    height: 765px;
    display: flex;
    justify-content: center;
}

.desktop .vector {
    margin-top: 114.5px;
    width: 63.83px;
    height: 77.89px;
    margin-right: 202.4px;
    aspect-ratio: 0.83;
    transition: all 1s ease;
}

.desktop .vector-2 {
    margin-top: 425.2px;
    width: 53.87px;
    height: 49.93px;
    margin-right: 287px;
    aspect-ratio: 0.94;
    transition: all 1s ease;
}

.desktop .vector-3 {
    margin-top: 646.3px;
    width: 49.61px;
    height: 52.24px;
    margin-right: 17.7px;
    aspect-ratio: 0.75;
    transition: all 1s ease;
}

.desktop .vector-4 {
    margin-top: 106.6px;
    width: 114.2px;
    height: 84.2px;
    margin-right: 53px;
    aspect-ratio: 0.95;
    transition: all 1s ease;
}

.desktop .vector-5 {
    margin-top: 391.5px;
    width: 54.22px;
    height: 43.39px;
    margin-right: 178.1px;
    aspect-ratio: 0.92;
    transition: all 1s ease;
}

.desktop .vector-6 {
    margin-top: 163.1px;
    width: 55.83px;
    height: 59.8px;
    margin-right: 71.1px;
    aspect-ratio: 0.93;
    transition: all 1s ease;
}

.desktop .magician-2 {
    position: absolute;
    top: 142px;
    left: calc(50% - 275px);
    width: 550px;
    height: 471px;
    aspect-ratio: 1.17;
    object-fit: cover;
    opacity: 0;
    transition: all 1s ease;
}

.desktop .clouds {
    position: absolute;
    top: 1159px;
    left: calc(50% - 727px);
    width: 1454px;
    height: 584px;
    aspect-ratio: 2.49;
    object-fit: cover;
    transition: all 1s ease;
}

.desktop .rectangle-6 {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 112px;
    background-color: #111213;
    filter: blur(50px);
}

.desktop .magician.step-2 .magician-2 {
    opacity: 1;
}


.desktop .magician.step-2 .alice-big-moon {
    top: -434px;
}

.desktop .magician.step-2 .clouds {
    top: 1099px;
}

.desktop .magician.step-2 .vector {
    margin-top: 296px;
    margin-right: 0;
    opacity: 0;
}

.desktop .magician.step-2 .vector-2 {
    margin-top: 311px;
    margin-right: 0;
    opacity: 0;
}

.desktop .magician.step-2 .vector-3 {
    margin-top: 302px;
    margin-right: 0;
    opacity: 0;
}

.desktop .magician.step-2 .vector-4 {
    margin-top: 256.6px;
    margin-right: 0;
    opacity: 0;
}

.desktop .magician.step-2 .vector-5 {
    margin-top: 305px;
    margin-right: 0;
    opacity: 0;
}

.desktop .magician.step-2 .vector-6 {
    margin-top: 307px;
    margin-right: 0;
    opacity: 0;
}

.desktop .magician.step-3 .clouds {
    top: 1199px;
}


.desktop .magician.step-4 .magician-2 {
    opacity: 0;
}


.desktop .magician.step-4 .clouds {
    top: 1159px;
}

.desktop .magician.step-4 .alice-big-moon {
    top: 1959px;
    transition-delay: 2s;
}

.desktop .end {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 1459px;
    background-color: #111212;
    overflow: hidden;
}

.desktop .ellipse-5 {
    position: absolute;
    top: calc(50% - 174px);
    left: calc(50% - 271px);
    width: 541px;
    height: 541px;
    background-color: #ceecff;
    border-radius: 270.5px;
    filter: blur(200px);
}

.desktop .ellipse-6 {
    position: absolute;
    top: 195px;
    left: calc(50% - 210px);
    width: 420px;
    height: 222px;
    background-color: #ffdfab;
    border-radius: 208.5px/111px;
    filter: blur(60px);
    opacity: 0;
    transition: all 1s ease;
}

.desktop .moon {
    position: absolute;
    top: 440px;
    left: calc(50% - 272px);
    width: 580px;
    height: 580px;
    transform: rotate(10.27deg);
    aspect-ratio: 1;
    transition: all 1s ease;
}

.desktop .alice-falling-end {
    position: absolute;
    top: -4880px;
    left: calc(50% - 213px);
    width: 418px;
    height: 441px;
    transition: all 1s ease;
}

.desktop .alice-rabbit-sitting {
    position: absolute;
    top: 701px;
    left: calc(50% - 215px);
    width: 417px;
    height: 387px;
    transition: all 1s ease;
    opacity: 0;
}

.desktop .alice-rabbit-cat-sitting {
    position: absolute;
    top: 705px;
    left: calc(50% - 215px);
    width: 418px;
    height: 380px;
    transition: all 1s ease;
    opacity: 0;
}

.desktop .cloud-3 {
    position: absolute;
    top: 486px;
    left: calc(50% - 711px);
    width: 657px;
    height: 378px;
    aspect-ratio: 1.74;
    object-fit: cover;
}

.desktop .cloud-4 {
    position: absolute;
    top: 826px;
    left: calc(50% + 64px);
    width: 576px;
    height: 322px;
    aspect-ratio: 1.79;
    object-fit: cover;
}

.desktop .cloud-5 {
    position: absolute;
    top: 456px;
    left: calc(50% + 129px);
    width: 282px;
    height: 198px;
    aspect-ratio: 1.43;
    object-fit: cover;
}

.desktop .animated-stars-6 {
    position: absolute;
    top: 166px;
    left: calc(50% - 593px);
    width: 1186px;
    height: 1010px;
    aspect-ratio: 1.17;
    object-fit: cover;
}

.desktop .spirals {
    position: absolute;
    left: calc(50% - 165px);
    bottom: 109px;
    width: 330px;
    height: 61px;
}

.desktop .rectangle-7 {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 112px;
    background-color: #111213;
    filter: blur(50px);
}

.desktop .title-group {
    position: absolute;
    top: 150px;
    left: calc(50% - 259px);
    width: 517px;
    height: 280px;
    background-image: url('../img/newyear-2026/end title 1.png');
    background-size: cover;
    background-position: 50% 50%;
}

.desktop .end.step-2 .moon {
    transform: rotate(0);
}

.desktop .end.step-2 .alice-falling-end {
    top: 702px;
}

.desktop .end.step-3 .alice-falling-end {
    opacity: 0;
}

.desktop .end.step-3 .alice-rabbit-sitting {
    opacity: 1;
}

.desktop .end.step-4 .alice-rabbit-sitting {
    opacity: 0;
}

.desktop .end.step-4 .alice-rabbit-cat-sitting {
    opacity: 1;
}

.desktop .end.step-4 .ellipse-6 {
    opacity: 0.3;
}


.desktop .screenshot-wrapper {
    height: 374px;
    padding: 0px 261px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
    align-self: stretch;
    width: 100%;
    background-color: #000000;
}

.desktop .screenshot-2 {
    position: relative;
    width: 1478px;
    height: 312px;
    aspect-ratio: 4.74;
    object-fit: cover;
}

.desktop .button {
    all: unset;
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    width: 229px;
    height: 48px;
    align-items: center;
    justify-content: space-between;
    padding: 0px 0px 0px 20px;
    position: fixed;
    bottom: 48px;
    right: 48px;
    background-color: #ffb234;
    border-radius: 60px;
    overflow: hidden;
    box-shadow: 0px 0px 8px #ffffff66;
    z-index: 10000;
}

.desktop .button.off {
    background-color: rgba(255,255,255,0.7);
    padding: 0px 20px 0px 0px;
}

.desktop .text-wrapper-2 {
    position: relative;
    width: fit-content;
    font-family: "Tenor Sans-Regular", Helvetica;
    font-weight: 400;
    color: #111213;
    font-size: 22px;
    letter-spacing: 0;
    line-height: 26.4px;
    white-space: nowrap;
}

.desktop .bell-button-on {
    position: relative;
    width: 48px;
    height: 48px;
}

.desktop .button.off .bell-button-on {
    display: none;
}

.desktop .bell-button-off {
    display: none;
    position: relative;
    width: 48px;
    height: 48px;
}

.desktop .button.off .bell-button-off {
    display: block;
}



/* Original CSS code should be injected here */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}