* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}

/* Контейнер 1920×1080, центрируется и масштабируется через JS */
.main {
    position: absolute;
    width: 1920px;
    height: 1080px;
    top: 50%;
    left: 50%;
    margin-top: -540px;
    margin-left: -960px;
    transform-origin: center center;
    overflow: hidden;
    background-color: #000;
}

/* ==================== Логотип ==================== */
.logo {
    position: absolute;
    left: 1608px;
    top: 53px;
    width: 257px;
    z-index: 100;
}
.logo img { width: 100%; }

/* ==================== Плеер ==================== */
.musicPlayer {
    position: absolute;
    left: 65px;
    top: 967px;
    z-index: 100;
    display: flex;
    gap: 8px;
    align-items: center;
}
.play-btn,
.stop-btn {
    cursor: pointer;
    display: inline-block;
    position: relative;
    line-height: 0;
}
.musicPlayer img {
    width: 79px;
    height: 79px;
    display: block;
}

/* Иконка стоп (■) поверх кнопки */
.stop-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background: #fff;
    pointer-events: none;
    border-radius: 2px;
}

/* ==================== 1 — Фоны ==================== */

/* bg_main: 1920×1114, сдвинут вверх */
.bg {
    position: absolute;
    top: -16px;
    left: 0;
    width: 1920px;
    height: 1114px;
    z-index: 1;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}
.bg.active { opacity: 1; }

/* bg_dark: 2231×1084, чуть шире — перекрывает края */
.bg-dark {
    position: absolute;
    top: -2px;
    left: -311px;
    width: 2231px;
    height: 1084px;
    z-index: 2;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}
.bg-dark.active { opacity: 1; }

/* ==================== Декоративные шторы ==================== */
.curtain-top {
    position: absolute;
    left: -518px;
    top: -421px;
    width: 1358px;
    height: 830px;
    z-index: 50;
    pointer-events: none;
}
.curtain-bottom {
    position: absolute;
    left: 1317px;
    top: 666px;
    width: 1096px;
    height: 997px;
    z-index: 50;
    pointer-events: none;
}

/* ==================== Центральная композиция ==================== */
.center-comp {
    position: absolute;
    left: 0;
    top: 0;
    width: 1920px;
    height: 1080px;
    z-index: 10;
}

/* ==================== 2 — Звезда ==================== */
/*
 * Разрезана на две части:
 *   star_front (763×466) — верхняя
 *   star_back  (476×260) — нижняя (из разреза выходят цифры)
 * Появляется масштабированием из нуля с bounce-эффектом
 */
.star-wrap {
    position: absolute;
    left: 75px;
    top: 198px;
    width: 763px;
    height: 725px;
    transform: scale(0);
    transform-origin: center 60%;
    opacity: 0;
    transition: transform 1.5s cubic-bezier(0.18, 0.89, 0.32, 1.28),
                opacity   0.5s ease-in;
}
.star-wrap.active {
    transform: scale(1);
    opacity: 1;
}

.star-front {
    position: absolute;
    left: 0;
    top: 0;
    width: 763px;
    height: 466px;
    z-index: 2;
}
.star-back {
    position: absolute;
    left: 144px;
    top: 465px;
    width: 476px;
    height: 260px;
    z-index: 1;
}

/* ==================== 3 — «9» и «мая» ==================== */
/*
 * Выезжают из разреза звезды снизу вверх.
 * top = финальная позиция. Начальный сдвиг — только transform.
 */
.text-9 {
    position: absolute;
    left: 397px;
    top: 389px;
    width: 112px;
    height: 151px;
    z-index: 3;
    opacity: 0;
    transform: translateY(195px) scale(0.5);
    transition: opacity 0.8s ease,
                transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.text-9.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.text-may {
    position: absolute;
    left: 321px;
    top: 567px;
    width: 282px;
    height: 84px;
    z-index: 3;
    opacity: 0;
    transform: translateY(140px) scale(0.5);
    transition: opacity 0.8s ease 0.35s,
                transform 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s;
}
.text-may.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ==================== 4 — Площадка и года ==================== */
/* Быстро въезжают слева */
.platform {
    position: absolute;
    left: -700px;
    top: 691px;
    width: 629px;
    height: 105px;
    z-index: 5;
    opacity: 0;
    transition: left 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.35s ease;
}
.platform.active {
    left: 144px;
    opacity: 1;
}

.years {
    position: absolute;
    left: -700px;
    top: 705px;
    width: 582px;
    height: 69px;
    z-index: 6;
    opacity: 0;
    transition: left 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.25s,
                opacity 0.4s ease 0.25s;
}
.years.active {
    left: 166px;
    opacity: 1;
}

/* ==================== 5 — Шарики и звёздочки ==================== */
.balloons, .small-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    z-index: 20;
    pointer-events: none;
}

.balloon, .s-star {
    position: absolute;
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.5s ease,
                transform 0.7s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.balloon.active, .s-star.active {
    opacity: 1;
    transform: scale(1);
}

/* Шарики — дуга над звездой (b7 = вершина) */
.b1  { left: 100px; top: 394px; width: 33px; height: 34px; }
.b2  { left: 137px; top: 332px; width: 29px; height: 29px; }
.b3  { left: 189px; top: 271px; width: 35px; height: 34px; }
.b4  { left: 250px; top: 225px; width: 28px; height: 28px; }
.b5  { left: 321px; top: 194px; width: 21px; height: 22px; }
.b6  { left: 376px; top: 166px; width: 25px; height: 25px; }
.b7  { left: 441px; top: 147px; width: 21px; height: 22px; }
.b8  { left: 502px; top: 166px; width: 25px; height: 25px; }
.b9  { left: 561px; top: 194px; width: 21px; height: 22px; }
.b10 { left: 625px; top: 225px; width: 28px; height: 28px; }
.b11 { left: 679px; top: 271px; width: 35px; height: 34px; }
.b12 { left: 737px; top: 332px; width: 29px; height: 29px; }
.b13 { left: 770px; top: 394px; width: 33px; height: 34px; }

/* Звёздочки снизу */
.ss1 { left: 139px; top: 827px; width: 59px; height: 57px; }
.ss2 { left: 270px; top: 936px; width: 60px; height: 56px; }
.ss3 { left: 432px; top: 964px; width: 59px; height: 56px; }
.ss4 { left: 593px; top: 936px; width: 59px; height: 56px; }
.ss5 { left: 728px; top: 827px; width: 59px; height: 57px; }

/* ==================== 6-9 — Карты ==================== */
/*
 * Одна непрерывная анимация: zoom-in + fade-in → сразу zoom-out + fade-out
 * transform-origin задаёт угол появления для каждой карты.
 */

/*
 * scale растёт непрерывно 0.07 → 1.30 без смены направления.
 * opacity независимо: fade-in до 28%, fade-out до 100%.
 * Это исключает "рывок" в точке пика.
 */
@keyframes card-c1 {
    0%   { opacity: 0; transform: scale(0.07); }
    28%  { opacity: 1; }
    100% { opacity: 0; transform: scale(1.30); }
}
@keyframes card-c2 {
    0%   { opacity: 0; transform: scale(0.07); }
    28%  { opacity: 1; }
    100% { opacity: 0; transform: scale(1.30); }
}
@keyframes card-c3 {
    0%   { opacity: 0; transform: scale(0.07); }
    28%  { opacity: 1; }
    100% { opacity: 0; transform: scale(1.30); }
}
@keyframes card-c4 {
    0%   { opacity: 0; transform: scale(0.07); }
    28%  { opacity: 1; }
    100% { opacity: 0; transform: scale(1.30); }
}

.cards-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    z-index: 40;
    pointer-events: none;
}

.card {
    position: absolute;
    top: 0;
    right: 0;
    width: 1100px;
    height: 1080px;
    object-fit: cover;
    object-position: center;
    opacity: 0;
}

/* Углы появления */
.c1 { transform-origin: 100% 100%; } /* правый нижний */
.c2 { transform-origin: 0%   0%;   } /* левый верхний */
.c3 { transform-origin: 0%   100%; } /* левый нижний  */
.c4 { transform-origin: 100% 0%;   } /* правый верхний */

/* Запуск анимации */
.c1.active { animation: card-c1 7.2s linear forwards; }
.c2.active { animation: card-c2 7.2s linear forwards; }
.c3.active { animation: card-c3 7.2s linear forwards; }
.c4.active { animation: card-c4 7.2s linear forwards; }

/* ==================== 11 — Финальный текст ==================== */
.final-text {
    position: absolute;
    left: 940px;
    top: 234px;
    width: 904px;
    height: 629px;
    z-index: 60;
    opacity: 0;
    transition: opacity 2s ease-in-out;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: 30px 70px;

    color: #fff;
    font-family: Arial, 'Helvetica Neue', sans-serif;
}
.final-text.active { opacity: 1; }

.ft-greet {
    font-size: 35px;
    font-weight: 400;
    margin-bottom: 32px;
    letter-spacing: 0.3px;
}

.ft-body {
    font-size: 30px;
    line-height: 1.6;
    margin-bottom: 26px;
}

.ft-sign {
    font-size: 30px;
    margin-top: 10px;
    align-self: flex-end;
}

/* ==================== Экран загрузки ==================== */
.mask-load {
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    transition: opacity 0.5s;
}
#loader {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 157px;
    height: 43px;
    margin: -35px 0 0 -79px;
    background: url(../img/loader.gif) center center no-repeat;
    background-size: 100%;
    z-index: 100001;
}
#loader p {
    position: absolute;
    bottom: -35px;
    left: 0;
    font: 16px/16px Arial, sans-serif;
    color: #cc3333;
    letter-spacing: 13px;
}