:root {
    --white: #ffffff;
    --sand: #e2caa8;

    --sand-soft: rgba(226, 202, 168, 0.55);
    /* боковой отступ контентных колонок (hero справа, premiere/concert слева) */
    --edge: clamp(24px, 6.5vw, 100px);
    --white-70: rgba(255, 255, 255, 0.7);
    --white-45: rgba(255, 255, 255, 0.45);
    --white-25: rgba(255, 255, 255, 0.25);

    --font: "Poiret One", "Trebuchet MS", sans-serif;
    /* шрифт кнопок — общий с сайтом (как изначально) */
    --font-btn: var(--font);
    --font-btn-weight: 400;

    /* liquid glass: подложка #442315 с регулируемой прозрачностью */
    --glass-tint: 68 35 21; /* #442315 в rgb-каналах */
    --glass-opacity: 0.25; /* регулировка плотности тонировки стекла */

    /* текст вне стеклянных контейнеров на тёмной подложке */
    --text-shadow:
        0 2px 24px rgba(20, 8, 3, 0.55), 0 0 2px rgba(255, 255, 255, 0.35);

    --r-sm: 16px;
    --r-md: 32px;
    --r-lg: 64px;

    --blur-sm: 16px;
    --blur-md: 32px;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* перламутр: угол анимации + угол, зависящий от курсора */
    --pearl-angle: 0deg;
    --cursor-angle: 0deg;
    --pearl-w: 1.5px;
}

@property --pearl-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg;
}

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

html,
body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: var(--white);
    color: var(--white);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overscroll-behavior: none;
}

body {
    height: 100dvh;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    animation: pearlSpin 9s linear infinite;
}

@keyframes pearlSpin {
    to {
        --pearl-angle: 360deg;
    }
}

a {
    color: inherit;
    text-decoration: none;
}
button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
img,
video {
    display: block;
}

/* ==========================================================================
   Loader
   ========================================================================== */

.loader {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    background: var(--white);
    transition:
        opacity 1.1s var(--ease-in-out),
        visibility 1.1s;
}
.loader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader__word {
    display: flex;
    font-size: clamp(44px, 9vw, 120px);
    letter-spacing: 0.18em;
    color: var(--sand);
    padding-left: 0.18em;
}
.loader__word span {
    display: inline-block;
    opacity: 0.35;
    animation: loaderLetter 2.4s var(--ease-in-out) infinite;
    animation-delay: calc(var(--i, 0) * 0.12s);
}
.loader__word span:nth-child(1) {
    --i: 0;
}
.loader__word span:nth-child(2) {
    --i: 1;
}
.loader__word span:nth-child(3) {
    --i: 2;
}
.loader__word span:nth-child(4) {
    --i: 3;
}
.loader__word span:nth-child(5) {
    --i: 4;
}
.loader__word span:nth-child(6) {
    --i: 5;
}
.loader__word span:nth-child(7) {
    --i: 6;
}

@keyframes loaderLetter {
    0%,
    100% {
        opacity: 0.35;
        transform: translateY(0);
        filter: blur(0);
    }
    40% {
        opacity: 1;
        transform: translateY(-4px);
        filter: blur(0);
    }
}

.loader__bar {
    width: min(220px, 50vw);
    height: 1px;
    background: rgba(226, 202, 168, 0.28);
    overflow: hidden;
    border-radius: 1px;
}
.loader__bar i {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--sand), #fff 60%, var(--sand));
    background-size: 200% 100%;
    animation: barShine 1.6s linear infinite;
    transition: width 0.4s var(--ease-out);
}
@keyframes barShine {
    to {
        background-position: -200% 0;
    }
}

/* ==========================================================================
   Stage & blocks
   ========================================================================== */

.stage {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: var(--white);
}

.block {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.22s linear,
        visibility 0.22s;
}
.block.is-visible {
    opacity: 1;
    visibility: visible;
}
.block.is-front {
    z-index: 2;
}

.block__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

/* Финальный кадр в высоком разрешении: проявляется поверх видео в конце,
   мягкий fade гасит расхождение цветокоррекции между видео и картинкой. */
.block__endframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.55s var(--ease-out);
}
.block.is-active .block__endframe {
    opacity: 1;
}

.block__ui {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}
.block__ui > * {
    pointer-events: auto;
}

/* --- Reveal system --------------------------------------------------------- */

.reveal {
    --d: 0ms;
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    filter: blur(14px);
    transition:
        opacity 1.1s var(--ease-out) var(--d),
        transform 1.3s var(--ease-out) var(--d),
        filter 1.1s var(--ease-out) var(--d);
    will-change: opacity, transform, filter;
}
.block.is-active .reveal {
    opacity: 1;
    transform: none;
    filter: blur(0);
}
.block:not(.is-active) .reveal {
    transition-duration: 0.35s, 0.35s, 0.35s;
    transition-delay: 0ms;
}

/* split-text: letters */
[data-split] .ch {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 0.35em, 0) scale(0.96);
    filter: blur(10px);
    transition:
        opacity 0.9s var(--ease-out) calc(var(--d, 0ms) + var(--ci) * 55ms),
        transform 1.2s var(--ease-out) calc(var(--d, 0ms) + var(--ci) * 55ms),
        filter 0.9s var(--ease-out) calc(var(--d, 0ms) + var(--ci) * 55ms);
}
[data-split] .ch.is-space {
    width: 0.3em;
}
.block.is-active [data-split] .ch {
    opacity: 1;
    transform: none;
    filter: blur(0);
}
.block:not(.is-active) [data-split] .ch {
    transition-duration: 0.3s, 0.3s, 0.3s;
    transition-delay: 0ms;
}

/* ==========================================================================
   Liquid glass & pearl stroke
   ========================================================================== */

.glass {
    position: relative;
    isolation: isolate;
    /* подложка liquid glass: #442315, плотность регулируется --glass-opacity */
    background:
        linear-gradient(
            135deg,
            rgb(var(--glass-tint) / calc(var(--glass-opacity) + 0.1)),
            rgb(var(--glass-tint) / var(--glass-opacity)) 55%,
            rgb(var(--glass-tint) / calc(var(--glass-opacity) + 0.06))
        ),
        rgb(var(--glass-tint) / var(--glass-opacity));
    -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(1.45)
        brightness(1.05);
    backdrop-filter: blur(var(--blur-sm)) saturate(1.45) brightness(1.05);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(255, 255, 255, 0.12),
        0 18px 60px -20px rgba(20, 8, 3, 0.55);
    /* контент внутри liquid glass — белый */
    color: var(--white);
}
.glass--deep {
    -webkit-backdrop-filter: blur(var(--blur-md)) saturate(1.5) brightness(1.06);
    backdrop-filter: blur(var(--blur-md)) saturate(1.5) brightness(1.06);
    background:
        linear-gradient(
            160deg,
            rgb(var(--glass-tint) / calc(var(--glass-opacity) + 0.14)),
            rgb(var(--glass-tint) / calc(var(--glass-opacity) + 0.04)) 50%,
            rgb(var(--glass-tint) / calc(var(--glass-opacity) + 0.1))
        ),
        rgb(var(--glass-tint) / calc(var(--glass-opacity) + 0.04));
}

/* блик на стекле, следующий за курсором */
.glass::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(
        220px circle at var(--mx, 50%) var(--my, 50%),
        rgba(255, 255, 255, 0.45),
        rgba(255, 255, 255, 0) 70%
    );
    opacity: var(--glow, 0);
    transition: opacity 0.6s var(--ease-out);
    z-index: 1;
}
.glass > * {
    position: relative;
    z-index: 2;
}
.glass:hover {
    --glow: 1;
}

/* перламутровая обводка */
.pearl {
    --mx: 50%;
    --my: 50%;
}
.pearl::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: var(--pearl-w);
    pointer-events: none;
    z-index: 3;
    background:
        radial-gradient(
            260px circle at var(--mx) var(--my),
            rgba(255, 255, 255, 0.95),
            rgba(255, 255, 255, 0) 60%
        ),
        conic-gradient(
            from calc(var(--pearl-angle) + var(--cursor-angle)),
            #ffffff 0deg,
            #ffd6e7 40deg,
            #cfeeff 85deg,
            #e2caa8 130deg,
            #ffffff 175deg,
            #e6d9ff 215deg,
            #d3fff1 260deg,
            #ffe9c9 305deg,
            #ffffff 360deg
        );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    transition:
        padding 0.4s var(--ease-out),
        opacity 0.4s;
    opacity: 0.95;
}
.pearl:hover::before {
    --pearl-w: 2px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    height: 64px;
    padding: 0 34px 0 38px;
    border-radius: var(--r-md);
    font-family: var(--font-btn);
    font-weight: var(--font-btn-weight);
    font-size: 21px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--white);
    text-shadow: 0 1px 10px rgba(20, 8, 3, 0.35);
    transition:
        transform 0.6s var(--ease-out),
        box-shadow 0.6s var(--ease-out);
    will-change: transform;
}
.btn:hover {
    transform: translateY(-2px) scale(1.015);
}
.btn:active {
    transform: translateY(0) scale(0.995);
    transition-duration: 0.15s;
}

.btn__label {
    position: relative;
}
.btn__arrow {
    display: inline-block;
    font-family: system-ui, sans-serif;
    font-weight: 200;
    transition: transform 0.6s var(--ease-out);
}
.btn:hover .btn__arrow {
    transform: translateX(6px);
}

/* «Плавающая» тень под кнопкой (как у кнопок Google):
   градиент перламутровой обводки продолжает мягкая цветная тень снизу,
   расходящаяся конусом от краёв border. */
.btn.glass.pearl {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        /* тёплый «хвост» градиента границы, растворяющийся под кнопкой */ 0
            12px 22px -8px rgba(226, 202, 168, 0.4),
        0 18px 34px -10px rgba(255, 214, 231, 0.28),
        0 26px 48px -14px rgba(207, 238, 255, 0.24),
        0 34px 70px -20px rgba(230, 217, 255, 0.2);
}
.btn.glass.pearl:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 16px 28px -8px rgba(226, 202, 168, 0.5),
        0 24px 42px -10px rgba(255, 214, 231, 0.34),
        0 34px 60px -14px rgba(207, 238, 255, 0.3),
        0 46px 88px -22px rgba(230, 217, 255, 0.26);
}

.btn--solid {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.85),
        rgba(255, 255, 255, 0.55) 55%,
        rgba(226, 202, 168, 0.55)
    );
    color: #442315;
    -webkit-backdrop-filter: blur(var(--blur-sm));
    backdrop-filter: blur(var(--blur-sm));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 4px 10px -2px rgba(20, 8, 3, 0.35),
        0 12px 22px -8px rgba(226, 202, 168, 0.45),
        0 18px 34px -10px rgba(255, 214, 231, 0.3),
        0 26px 48px -14px rgba(207, 238, 255, 0.26),
        0 34px 70px -20px rgba(230, 217, 255, 0.22);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero__title {
    position: absolute;
    top: 1.5vh;
    /* desktop: правая колонка — ширина заголовка вписывается JS в 40% окна */
    right: var(--edge);
    margin: 0;
    z-index: 1;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: var(--white);
    /* та же геометрия, что у --text-shadow, но мягче (~0.5x) */
    text-shadow: 0 2px 24px rgba(20, 8, 3, 0.3),
        0 0 2px rgba(255, 255, 255, 0.2);
    font-size: 100px; /* пересчитывается JS: вписывается в 40% ширины (desktop) */
}

.hero__cta {
    position: absolute;
    /* правая колонка героя, под заголовком: та же колонка 40% и общий с
       заголовком центр; от правого края экрана — паддинг var(--edge) */
    right: var(--edge);
    top: 70%;
    width: 40vw;
    justify-content: center;
    height: auto;
    min-height: 64px;
    font-size: clamp(13px, 1.35vw, 26px);
    text-align: center;
    white-space: normal;
    transform: translateY(-50%);
    z-index: 4;
}
.hero__cta.reveal {
    --d: 700ms;
    transform: translateY(calc(-50% + 28px));
}
.block.is-active .hero__cta.reveal {
    transform: translateY(-50%);
}
.block.is-active .hero__cta.reveal:hover {
    transform: translateY(calc(-50% - 2px)) scale(1.015);
}
.block.is-active .hero__cta.reveal:active {
    transform: translateY(-50%) scale(0.995);
}

/* ==========================================================================
   Releases
   ========================================================================== */

.section__title {
    margin: 0;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    color: var(--white);
    text-shadow: var(--text-shadow);
}

/* Заголовок и карточка — в левой колонке с общим центром (var(--edge) + 20vw);
   внутренний alignment текста — по центру. */
.releases__title {
    position: absolute;
    top: 15vh;
    left: calc(var(--edge) + 20vw);
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100vw - 48px);
    text-align: center;
    font-size: clamp(44px, 6.4vw, 104px);
}

.release {
    position: absolute;
    /* карточка в левой колонке; центр совпадает с центром заголовка */
    left: calc(var(--edge) + 20vw);
    top: 58%;
    transform: translate(-50%, -50%);
    width: min(466px, calc(50vw - var(--edge)));
    max-width: calc(100vw - 48px);
    padding: 10px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    gap: 18px;
    transition:
        transform 0.7s var(--ease-out),
        box-shadow 0.7s var(--ease-out);
}
.release.reveal {
    --d: 400ms;
    transform: translate(-50%, calc(-50% + 28px));
}
.block.is-active .release.reveal {
    transform: translate(-50%, -50%);
}
.block.is-active .release.reveal:hover {
    transform: translate(-50%, calc(-50% - 3px)) scale(1.012);
}

.release__cover {
    width: 104px;
    height: 104px;
    border-radius: 24px;
    object-fit: cover;
    flex: 0 0 auto;
    box-shadow: 0 12px 40px -14px rgba(120, 95, 60, 0.45);
}
.release__badge {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: auto;
    padding-right: 10px;
    filter: drop-shadow(0 2px 14px rgba(120, 95, 60, 0.18));
}

/* ==========================================================================
   Concert
   ========================================================================== */

.concert {
    position: absolute;
    top: 50%;
    left: var(--edge);
    transform: translateY(-50%);
    width: min(760px, 52vw);
    min-height: min(600px, 74vh);
    padding: clamp(28px, 4.5vw, 56px) clamp(24px, 4vw, 56px);
    border-radius: var(--r-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--white);
    text-shadow: 0 2px 24px rgba(20, 8, 3, 0.45);
}
.concert.reveal {
    --d: 200ms;
    transform: translateY(calc(-50% + 32px));
}
.block.is-active .concert.reveal {
    transform: translateY(-50%);
}

.concert__title {
    margin: 0;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.1;
    font-size: clamp(40px, 5.6vw, 92px);
}
.concert__title.reveal {
    --d: 300ms;
}

.concert__line {
    width: 100%;
    height: 1px;
    margin: clamp(22px, 4vh, 40px) 0;
    background: linear-gradient(
        90deg,
        rgba(226, 202, 168, 0),
        var(--sand) 25%,
        #fff 50%,
        var(--sand) 75%,
        rgba(226, 202, 168, 0)
    );
    transform-origin: center;
    transform: scaleX(0);
    opacity: 0;
    transition:
        transform 1.4s var(--ease-out) 700ms,
        opacity 0.8s linear 700ms;
}
.block.is-active .concert__line {
    transform: scaleX(1);
    opacity: 1;
}
.block:not(.is-active) .concert__line {
    transition-duration: 0.3s, 0.3s;
    transition-delay: 0ms;
}

.concert__date {
    margin: 0;
    font-size: clamp(30px, 3.6vw, 62px);
    letter-spacing: 0.04em;
    line-height: 1.1;
}
.concert__date.reveal {
    --d: 850ms;
}

.concert__place {
    margin: clamp(18px, 3vh, 36px) 0 0;
    font-size: clamp(18px, 1.6vw, 26px);
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.85);
}
.concert__place.reveal {
    --d: 1000ms;
}

.concert__cta {
    margin-top: auto;
    padding-top: 0;
    align-self: center;
    position: relative;
    top: clamp(18px, 3vh, 30px);
}
.concert__cta.reveal {
    --d: 1200ms;
}

/* ==========================================================================
   Social
   ========================================================================== */

/* «События» — верхняя надпись секции 3 (концерт), по аналогии с первой секцией */
.events__title {
    position: absolute;
    top: 2.5vh;
    left: 50%;
    width: max-content;
    text-align: center;
    transform: translateX(-50%);
    font-size: clamp(36px, 4.6vw, 72px);
    line-height: 1;
    z-index: 0;
}

.social__title {
    position: absolute;
    top: clamp(110px, 18vh, 190px);
    left: 0;
    right: 0;
    text-align: center;
    font-size: clamp(30px, 3.4vw, 54px);
    white-space: nowrap;
}

/* desktop: «Будем» — у левого края, «на связи» — у правого */
@media (min-width: 768px) {
    .social__title {
        display: block;
        text-align: initial;
        padding: 0;
        white-space: normal;
    }
    .social__title-word--left {
        position: absolute;
        left: clamp(24px, 7vw, 120px);
    }
    .social__title-word--right {
        position: absolute;
        right: clamp(24px, 7vw, 120px);
        text-align: right;
    }
}

.social__col {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: min(320px, 26vw);
}
.social__col--left {
    left: clamp(24px, 7vw, 120px);
}
.social__col--right {
    right: clamp(24px, 7vw, 120px);
}

.social {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 22px 16px 16px;
    border-radius: var(--r-md);
    color: var(--white);
    text-shadow: 0 1px 10px rgba(20, 8, 3, 0.35);
    transition:
        transform 0.7s var(--ease-out),
        box-shadow 0.7s var(--ease-out);
}
.social:hover {
    transform: translateY(-3px) scale(1.015);
}
/* «плавающая» тень продолжает градиент обводки (как у кнопок Google) */
.social.glass.pearl {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 10px 20px -8px rgba(226, 202, 168, 0.4),
        0 16px 30px -10px rgba(255, 214, 231, 0.28),
        0 24px 46px -14px rgba(207, 238, 255, 0.24),
        0 32px 66px -20px rgba(230, 217, 255, 0.2);
}
.social.glass.pearl:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 14px 26px -8px rgba(226, 202, 168, 0.5),
        0 22px 40px -10px rgba(255, 214, 231, 0.34),
        0 32px 56px -14px rgba(207, 238, 255, 0.3),
        0 44px 84px -22px rgba(230, 217, 255, 0.26);
}
.social:nth-child(1).reveal {
    --d: 350ms;
}
.social:nth-child(2).reveal {
    --d: 500ms;
}
.social__col--right .social:nth-child(1).reveal {
    --d: 650ms;
}
.social__col--right .social:nth-child(2).reveal {
    --d: 800ms;
}

.social__icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.85),
        rgba(255, 255, 255, 0.45)
    );
    box-shadow:
        inset 0 1px 0 #fff,
        0 10px 30px -12px rgba(120, 95, 60, 0.35);
    transition: transform 0.6s var(--ease-out);
}
.social:hover .social__icon {
    transform: rotate(-6deg) scale(1.05);
}
.social__icon svg {
    width: 24px;
    height: 24px;
    /* liquid glass: тонировка #442315 с прозрачностью 0.5 */
    fill: rgb(var(--glass-tint) / 0.5);
    filter: drop-shadow(0 1px 6px rgba(120, 95, 60, 0.15));
}

.social__text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}
.social__text b {
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 0.06em;
}
.social__text small {
    font-size: 14px;
    letter-spacing: 0.1em;
    opacity: 0.95;
    margin-top: 3px;
    text-transform: uppercase;
}

.social__copy {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(20px, 4vh, 40px);
    margin: 0;
    font-size: 13px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    color: var(--white);
    text-shadow: var(--text-shadow);
}
.social__copy.reveal {
    --d: 1100ms;
}

/* ==========================================================================
   Dots navigation & hint
   ========================================================================== */

.dots {
    position: fixed;
    right: clamp(14px, 2vw, 32px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 16px;
    opacity: 0;
    transition: opacity 1s var(--ease-out) 0.6s;
}
.dots.is-shown {
    opacity: 1;
}
.dots__item {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
}
.dots__item i {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--white);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.7),
        0 2px 12px rgba(120, 95, 60, 0.35);
    opacity: 0.6;
    transition:
        transform 0.6s var(--ease-out),
        opacity 0.6s,
        background 0.6s;
}
.dots__item:hover i {
    transform: scale(1.35);
    opacity: 1;
}
.dots__item.is-current i {
    transform: scale(1.6);
    opacity: 1;
    background: var(--sand);
    box-shadow:
        0 0 0 1px #fff,
        0 0 18px rgba(255, 255, 255, 0.9);
}

.hint {
    position: fixed;
    left: 50%;
    bottom: clamp(18px, 3vh, 32px);
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--white);
    text-shadow: var(--text-shadow);
    font-size: 12px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.8s var(--ease-out);
    pointer-events: none;
}
.hint.is-shown {
    opacity: 0.9;
}
.hint__line {
    width: 1px;
    height: 44px;
    background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0));
    overflow: hidden;
    position: relative;
}
.hint__line::after {
    content: "";
    position: absolute;
    left: 0;
    top: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0),
        var(--sand),
        rgba(255, 255, 255, 0)
    );
    animation: hintDrop 2.2s var(--ease-in-out) infinite;
}
@keyframes hintDrop {
    to {
        top: 100%;
    }
}

/* ==========================================================================
   Cursor glow (только на устройствах с мышью)
   ========================================================================== */

.cursor-glow {
    position: fixed;
    left: 0;
    top: 0;
    width: 420px;
    height: 420px;
    margin: -210px 0 0 -210px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 15;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.22),
        rgba(226, 202, 168, 0.1) 40%,
        rgba(255, 255, 255, 0) 70%
    );
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 0.8s;
    will-change: transform;
}
.cursor-glow.is-shown {
    opacity: 1;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
    .concert {
        width: min(620px, 58vw);
    }
    .social__col {
        width: min(300px, 32vw);
    }
    .social__text b {
        font-size: 19px;
    }
    .social__text small {
        font-size: 12px;
    }
}

/* Tablet */
@media (max-width: 900px) {
    .btn {
        height: 58px;
        font-size: 16px;
        padding: 0 28px 0 30px;
        letter-spacing: 0.12em;
    }
    .concert {
        width: min(560px, 62vw);
        min-height: 0;
    }
    .concert__cta {
        top: clamp(22px, 4vh, 34px);
        margin-top: 8px;
    }
    .social__col {
        width: min(260px, 34vw);
        gap: 14px;
    }
    .social {
        padding: 12px 16px 12px 12px;
        gap: 12px;
    }
    .social__icon {
        width: 44px;
        height: 44px;
    }
    .social__icon svg {
        width: 20px;
        height: 20px;
    }
    .social__text b {
        font-size: 17px;
    }
    .social__text small {
        font-size: 11px;
        letter-spacing: 0.08em;
    }
}

/* Mobile */
/* Mobile и Tablet: общая вертикальная композиция (позиционирование
   совпадает, размеры tablet доопределяет слой ниже). */
/* Mobile и Tablet: общая вертикальная композиция. Второе условие —
   планшеты в landscape до 1366px с пропорцией ≤8:5 (ноутбуки 1366×768
   и десктопы остаются в desktop-композиции). */
@media (max-width: 1100px),
    (max-width: 1366px) and (max-aspect-ratio: 8/5) {
    .hero__title {
        /* mobile: прижат к потолку с небольшим отступом */
        top: max(16px, calc(env(safe-area-inset-top) + 8px));
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        font-size: clamp(64px, 20vw, 130px);
        /* тень выраженнее, чем на desktop: мобильный фон ярче */
        text-shadow: 0 4px 36px rgba(20, 8, 3, 0.55),
            0 0 3px rgba(255, 255, 255, 0.35);
    }
    .hero__cta {
        /* на мобильном масштаб не увеличиваем */
        --btn-scale: 1;
        left: 50%;
        right: auto;
        top: auto;
        bottom: max(28px, calc(env(safe-area-inset-bottom) + 20px));
        width: auto;
        min-width: 0;
        min-height: 0;
        white-space: nowrap;
        transform: translate(-50%, 0) scale(var(--btn-scale));
        max-width: calc(100vw - 40px);
    }
    .hero__cta.reveal {
        transform: translate(-50%, 28px) scale(var(--btn-scale));
    }
    .block.is-active .hero__cta.reveal {
        transform: translate(-50%, 0) scale(var(--btn-scale));
    }
    .block.is-active .hero__cta.reveal:hover {
        transform: translate(-50%, -2px) scale(calc(var(--btn-scale) * 1.015));
    }
    .block.is-active .hero__cta.reveal:active {
        transform: translate(-50%, 0) scale(calc(var(--btn-scale) * 0.995));
    }

    .btn {
        height: 54px;
        font-size: 14px;
        letter-spacing: 0.1em;
        padding: 0 22px 0 24px;
        gap: 10px;
    }

    .releases__title {
        /* mobile: «Премьера» над кнопкой; группа прижата к отметке ~80% высоты */
        top: calc(80% - 170px);
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        font-size: clamp(38px, 11vw, 60px);
    }
    .release {
        top: 80%;
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
        width: calc(100vw - 40px);
        max-width: none;
        gap: 12px;
        padding: 8px;
        border-radius: 28px;
    }
    .release.reveal {
        transform: translate(-50%, calc(-50% + 28px));
    }
    .block.is-active .release.reveal {
        transform: translate(-50%, -50%);
    }
    .block.is-active .release.reveal:hover {
        transform: translate(-50%, calc(-50% - 3px)) scale(1.012);
    }
    .release__cover {
        width: 84px;
        height: 84px;
        border-radius: 20px;
    }

    .concert {
        left: 50%;
        top: auto;
        /* mobile: карточка прижата к низу экрана с небольшим отступом */
        bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
        width: calc(100vw - 32px);
        min-height: 0;
        padding: 34px 22px 30px;
        border-radius: 40px;
        transform: translate(-50%, 0);
    }
    .concert.reveal {
        transform: translate(-50%, 32px);
    }
    .block.is-active .concert.reveal {
        transform: translate(-50%, 0);
    }
    /* iOS по тапу применяет hover — базовое правило с calc(-50% - 3px)
       уронило бы карточку к центру; перекрываем */
    .block.is-active .concert.reveal:hover {
        transform: translate(-50%, -3px) scale(1.012);
    }
    .concert__title {
        font-size: clamp(36px, 11vw, 56px);
    }
    .concert__date {
        font-size: clamp(28px, 8.4vw, 44px);
    }
    .concert__place {
        font-size: 17px;
        margin-top: 16px;
    }
    .concert__cta {
        top: 0;
        margin-top: 30px;
    }

    .social__title {
        top: max(20px, env(safe-area-inset-top));
        font-size: clamp(24px, 7.5vw, 34px);
        white-space: normal;
    }
    /* в разметке слова-спаны стоят вплотную; на desktop их разводит
       абсолютное позиционирование, здесь нужна строка по центру */
    .social__title {
        text-align: center;
        padding: 0;
    }
    .social__title-word {
        position: static;
    }
    .social__title-word + .social__title-word {
        margin-left: 0.4em;
    }
    .events__title {
        display: none;
    }
    .social__col {
        top: auto;
        transform: none;
        width: calc(50vw - 24px);
        gap: 10px;
        bottom: max(58px, calc(env(safe-area-inset-bottom) + 52px));
    }
    .social__col--left {
        left: 16px;
    }
    .social__col--right {
        right: 16px;
    }
    .social {
        padding: 10px 12px;
        gap: 10px;
        border-radius: 22px;
    }
    .social__icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }
    .social__icon svg {
        width: 18px;
        height: 18px;
    }
    .social__text b {
        font-size: 14px;
        letter-spacing: 0.04em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .social__text small {
        display: none;
    }
    .social__copy {
        font-size: 11px;
        letter-spacing: 0.24em;
        bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
    }

    .dots {
        right: 10px;
        gap: 12px;
    }
    .hint {
        display: none;
    }
    .cursor-glow {
        display: none;
    }
}

/* Низкие экраны (landscape-телефоны) */
@media (max-height: 480px) {
    .hero__title {
        top: 2vh;
    }
    .hero__cta {
        --btn-scale: 1.25;
    }
    .releases__title {
        top: 8vh;
        font-size: clamp(28px, 7vw, 48px);
    }
    .release {
        top: 60%;
        padding: 6px;
    }
    .release__cover {
        width: 64px;
        height: 64px;
        border-radius: 16px;
    }
    .concert {
        padding: 18px 20px;
        min-height: 0;
    }
    .concert__title {
        font-size: clamp(22px, 5vw, 40px);
    }
    .concert__line {
        margin: 10px 0;
    }
    .concert__date {
        font-size: clamp(18px, 4vw, 30px);
    }
    .concert__place {
        font-size: 13px;
        margin-top: 8px;
    }
    .concert__cta {
        top: 0;
        margin-top: 14px;
    }
    .btn {
        height: 44px;
        font-size: 12px;
    }
}

@media (hover: none) {
    .cursor-glow {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body {
        animation: none;
    }
    .reveal,
    [data-split] .ch {
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
}

/* ==========================================================================
   Tablet: та же вертикальная композиция, что на mobile, но элементы крупнее
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1100px),
    (min-width: 768px) and (max-width: 1366px) and (max-aspect-ratio: 8/5) {
    .hero__title {
        font-size: clamp(91px, 13.3vw, 142px);
    }
    .hero__cta {
        font-size: clamp(16px, 1.8vw, 20px);
    }
    .btn {
        height: 66px;
        font-size: 19px;
        padding: 0 32px 0 36px;
    }
    .releases__title {
        top: calc(80% - 190px);
        font-size: clamp(56px, 9vw, 84px);
    }
    .release {
        /* карточка облегает содержимое; бейдж фикс. ширины -> карточка
           уже на широких экранах */
        width: fit-content;
        max-width: calc(100vw - 48px);
        padding: 10px 14px 10px 10px;
        gap: 14px;
        border-radius: 30px;
    }
    .release__cover {
        width: 92px;
        height: 92px;
        border-radius: 22px;
    }
    /* бейдж ~3.4:1: ширина 312px -> высота 92px, строго вровень с обложкой */
    .release__badge {
        flex: 0 0 auto;
        width: 312px;
        max-width: 100%;
        padding-right: 0;
    }
    .concert {
        width: min(640px, calc(100vw - 64px));
        padding: 40px 28px 36px;
    }
    .concert__title {
        font-size: clamp(48px, 7.5vw, 72px);
    }
    .concert__date {
        font-size: clamp(36px, 6vw, 56px);
    }
    .social__title {
        font-size: clamp(34px, 5.4vw, 48px);
    }
    .social__col {
        width: min(380px, 44vw);
        gap: 14px;
    }
    .social {
        padding: 14px 18px 14px 14px;
        border-radius: 26px;
    }
    .social__icon {
        width: 48px;
        height: 48px;
        border-radius: 16px;
    }
    .social__icon svg {
        width: 22px;
        height: 22px;
    }
    .social__text b {
        font-size: 18px;
    }
    .social__text small {
        display: block;
        font-size: 12px;
    }
    .social__copy {
        font-size: 12.5px;
    }
}