/**
 * Страница «Премиум» (/premium/). Подключается только на этой странице
 * (см. inc/content-pages.php). Поток изолирован от остальных страниц.
 *
 * Сейчас — стиль шахматной скролл-анимации (виджет #oliorosti-premium-widget).
 * Перенос с эталона; адаптация: фон доски берётся из ассетов темы, шрифт
 * Playfair Display самохостится (assets/css/fonts.css), внешние ссылки убраны.
 * Селекторы заскоуплены под #oliorosti-premium-widget.
 */

#oliorosti-premium-widget {
    margin: auto;
    text-align: center;
    padding: 0;
    width: 100%;
    position: relative;
    font-family: 'Playfair Display', serif;
    background-color: #fff; /* Белый фон страницы */
    /* без overflow:hidden — иначе ломается position:sticky у f65-блока;
       каждая сцена (шахматы и т.д.) обрезает себя сама. */
}

#oliorosti-premium-widget h2:not(.handwritten),
#oliorosti-premium-widget p:not(.handwritten) {
    font-family: 'Playfair Display', serif !important;
}

#oliorosti-premium-widget .scene-container {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* --- ШАХМАТНАЯ ДОСКА --- */
#oliorosti-premium-widget .board-wrapper {
    position: relative;
    /* Размер доски с запасом под текст сверху и снизу */
    width: 85vmin;
    height: 85vmin;
    max-width: 800px;
    max-height: 800px;

    background-image: url('../img/premium/board.jpg');
    /* 100% 100% растягивает картинку целиком в квадрат */
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;

    box-shadow: none;
}

/* --- ФИГУРЫ --- */
#oliorosti-premium-widget .chess-piece {
    position: absolute;
    width: 10%;
    height: 10%;
    transform-origin: bottom center;
    /* Якорь фигуры: центр по X, точка привязки у низа картинки. */
    transform: translate(-50%, -90%);
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    will-change: transform, top, left;
}

#oliorosti-premium-widget .chess-piece img {
    width: 150% !important;
    max-width: none !important;
    height: auto;
    display: block;
    filter: contrast(1.2) sepia(0.2);
}
#oliorosti-premium-widget #piece-black-king img {
    width: 100% !important;
}
#oliorosti-premium-widget #piece-white-rook img {
    width: 125% !important;
}

/* Финальная сумка */
#oliorosti-premium-widget .final-product {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #fff;
    opacity: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}
#oliorosti-premium-widget .final-product img {
    max-width: 46%;
    max-height: 46%;
    box-shadow: none;
}

/* Финальный кадр — без тёмной плашки: текст чёрным прямо на белом фоне. */
#oliorosti-premium-widget .text-layer--final .story-plate {
    max-width: none;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}
#oliorosti-premium-widget .text-layer--final .story-plate h2 {
    color: #000;
    text-shadow: none;
}
#oliorosti-premium-widget .text-layer--final .story-plate p {
    color: #1a1a1a;
}

/* Подсказка-скролл справа: даёт понять, что страница продолжается и есть
   анимация. Гаснет, когда пользователь листает (opacity ведёт таймлайн в
   premium-chess.js). pointer-events:none — чисто декоративная. */
#oliorosti-premium-widget .chess-scroll-hint {
    position: absolute;
    right: clamp(10px, 3vw, 44px);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 90;
    pointer-events: none;
    color: #555;
    font-family: 'Playfair Display', serif;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}
#oliorosti-premium-widget .chess-scroll-hint__label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 0.8rem;
}
#oliorosti-premium-widget .chess-scroll-hint__arrow {
    animation: chess-scroll-bounce 1.6s ease-in-out infinite;
}
@keyframes chess-scroll-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50%      { transform: translateY(7px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    #oliorosti-premium-widget .chess-scroll-hint__arrow { animation: none; }
}
/* На мобиле подсказка «Листайте» не нужна (узкий экран, очевидный жест). */
@media (max-width: 767px) {
    #oliorosti-premium-widget .chess-scroll-hint { display: none; }
}

/* Динамический индикатор прокрутки шахматной сцены: тонкая вертикальная полоса
   слева, заполнение растёт по прогрессу анимации (premium-chess.js onUpdate).
   Видно на всех устройствах — наглядно подтверждает, что свайп/скролл работает. */
#oliorosti-premium-widget .chess-scroll-progress,
#f65-widget .f65-scroll-progress {
    position: absolute;
    left: clamp(10px, 3vw, 40px);
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 40vh;
    max-height: 380px;
    background: rgba(0, 0, 0, 0.14);
    border-radius: 3px;
    overflow: hidden;
    z-index: 90;
    pointer-events: none;
}
#oliorosti-premium-widget .chess-scroll-progress__fill,
#f65-widget .f65-scroll-progress__fill {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #4a4a4a, #1c1c1c); /* тёмно-серый */
    transform: scaleY(0);
    transform-origin: top center;
    will-change: transform;
}

/* Тексты */
#oliorosti-premium-widget .text-layer {
    position: absolute;
    bottom: 20%;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 100;
    pointer-events: none;
}
/* Финальный кадр: текст в потоке под сумкой (бывшие inline-стили). */
#oliorosti-premium-widget .text-layer--final {
    position: relative;
    bottom: auto;
    margin-top: 20px;
}
#oliorosti-premium-widget .story-text {
    position: absolute;
    width: 100%;
    opacity: 0;
    transform: translateY(20px);
}
#oliorosti-premium-widget .story-text--static {
    position: relative;
    opacity: 1;
    transform: none;
}
/* Тёмный картуш-плашка: высокий контраст над гравюрой. Обёртка нужна,
   т.к. transform у .story-text занимает GSAP (анимация появления). */
#oliorosti-premium-widget .story-plate {
    display: inline-block;
    max-width: min(90vw, 600px);
    padding: 16px 40px;
    background: rgba(17, 15, 13, 0.92);
    border: 1px solid rgba(183, 162, 111, 0.55); /* тонкая золотая рамка (как «65-е») */
    border-radius: 3px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45);
}
#oliorosti-premium-widget .story-plate h2 {
    margin: 0 0 0.4rem;
    font-size: clamp(1.5rem, 4vw, 2.4rem);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.15;
    color: #fff;
}
#oliorosti-premium-widget .story-plate p {
    margin: 0;
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-style: italic;
    line-height: 1.4;
    color: #efe9dd; /* мягкий тёплый белый */
}

/* ============================================================
   ВЫЗОВ СУДЬБЕ — основная компоновка (ВСЕ устройства). Включается классом
   .chess-top на #chess-game (page-premium.php). Текст НАД доской, без тёмной
   плашки, композиция уменьшена и центрирована по вертикали.
   Не трогает финальный кадр (.text-layer--final). Мобильные подгонки размеров —
   в @media (max-width:767px) ниже.
   БЫСТРЫЙ ОТКАТ: убрать класс chess-top в page-premium.php — вернётся прежний
   вид (плашка снизу, крупная доска).
   ============================================================ */
    /* Прилипшая шапка перекрывает верх сцены.
       Поджимаем содержимое вниз — доска центрируется уже ПОД шапкой, а текст
       садится в освободившуюся полосу между шапкой и доской. */
    #oliorosti-premium-widget .scene-container.chess-top {
        box-sizing: border-box;
        /* сцена пинится ПОД шапкой (premium-chess.js, start "top <шапка>"),
           её высота = экран минус шапка. Группу [текст + доска] центрируем по
           вертикали колонкой — равные поля сверху и снизу. */
        height: calc(100svh - var(--chess-top-offset, 147px));
        flex-direction: column;
        justify-content: center;
        gap: 1.4rem;
    }
    /* композиция крупнее (доска+гора — единая фоновая гравюра) */
    #oliorosti-premium-widget .chess-top .board-wrapper {
        width: 60vmin;
        height: 60vmin;
        max-width: 640px;
        max-height: 640px;
    }
    /* текстовый слой — в потоке колонки (над доской), фиксированной высоты;
       три story-text лежат друг на друге и центрируются внутри — при смене
       не «прыгают» по вертикали. */
    #oliorosti-premium-widget .chess-top .text-layer:not(.text-layer--final) {
        position: relative;
        top: auto;
        bottom: auto;
        order: -1; /* текст выше доски, даже если в DOM он после неё */
        width: 100%;
        height: 6.5rem;
    }
    #oliorosti-premium-widget .chess-top .text-layer:not(.text-layer--final) .story-text {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* убираем плашку: чёрный текст прямо на светлой гравюре сверху */
    #oliorosti-premium-widget .chess-top .text-layer:not(.text-layer--final) .story-plate {
        max-width: 720px;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }
    #oliorosti-premium-widget .chess-top .text-layer:not(.text-layer--final) .story-plate h2 {
        color: #000;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
    }
    #oliorosti-premium-widget .chess-top .text-layer:not(.text-layer--final) .story-plate p {
        color: #1a1a1a;
    }

/* Отладочная сетка центров клеток (debugMode в premium-chess.js) */
#oliorosti-premium-widget .debug-dot {
    position: absolute;
    width: 8px; height: 8px;
    background: red;
    border: 1px solid white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    pointer-events: none;
}

/* Мобильные подгонки компоновки chess-top: доска крупнее (узкий экран),
   текстовый слой выше — подзаголовок переносится на 2–3 строки. */
@media (max-width: 767px) {
    #oliorosti-premium-widget .chess-top .board-wrapper {
        width: 84vmin;
        height: 84vmin;
        max-width: none;
        max-height: none;
    }
    #oliorosti-premium-widget .chess-top .text-layer:not(.text-layer--final) {
        height: 8.5rem;
    }
}

/* ============================================================
   Блок 1 — полноэкранный hero-слайдер (.premium-hero).
   Использует структуру и JS главного слайдера (initSlider), но
   перекрывает карусельные правила: слайды во всю ширину и высоту
   экрана (без peek-соседей и фиксированных высот эталона главной).
   Селекторы заскоуплены под .premium-hero.
   ============================================================ */
.premium-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    /* svh (стабильная «малая» высота), НЕ dvh: dvh меняется при показе/скрытии
       адресной строки во время скролла → высота слайда пересчитывается и
       object-fit:cover видео перемасштабируется (дёрганье на мобиле). svh при
       скролле не меняется. На десктопе svh == vh. */
    height: 100svh;
    background: #000;
    overflow: hidden;
}
.premium-hero .hero-slider__viewport { height: 100%; }
.premium-hero .hero-slider__track { height: 100%; }
.premium-hero .hero-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
}
.premium-hero .hero-slide__poster-img { z-index: 2; }
.premium-hero__overlay {
    z-index: 2;
    background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.55) 100%);
}

/* Подписи слайдов: крупный заголовок (Playfair) + курсивный подзаголовок,
   в нижней трети кадра. Появляются плавно на активном слайде. */
.premium-hero__caption {
    position: absolute;
    left: 50%;
    top: 62%;
    transform: translate(-50%, -50%);
    width: min(90%, 900px);
    text-align: center;
    color: #fff;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity .8s ease .2s;
}
.premium-hero .hero-slide.is-active .premium-hero__caption { opacity: 1; }
.premium-hero__title {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.7rem, 5vw, 3.1rem);
    letter-spacing: .12em;
    line-height: 1.12;
    color: #fff; /* перебиваем общий h2{color:var(--c-text)} из style.css */
    text-shadow: 0 2px 24px rgba(0,0,0,.5);
}
.premium-hero__sub {
    margin: .7em 0 0;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1rem, 2.3vw, 1.4rem);
    letter-spacing: .02em;
    color: #fff; /* чисто белый подзаголовок */
    text-shadow: 0 2px 16px rgba(0,0,0,.5);
}

/* Сквозной заголовок «Сделано въ России»: полупрозрачная брендовая
   каллиграфия по центру, поверх всех слайдов (как сквозной заголовок
   на главной). pointer-events:none — не мешает свайпу/стрелкам. */
.premium-hero__heading {
    position: absolute;
    left: 0; right: 0;
    top: 42%;
    transform: translateY(-50%);
    text-align: center;
    z-index: 3;
    pointer-events: none;
}
.premium-hero__heading span {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 8vw, 7rem);
    line-height: 1;
    color: rgba(255, 255, 255, .5);
    text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}

/* Точки-индикаторы: на премиуме показываем на всех ширинах. */
.premium-hero .hero-slider__dots {
    display: flex;
    justify-content: center;
    gap: 9px;
    position: absolute;
    left: 0; right: 0;
    bottom: 26px;
    z-index: 4;
}
.premium-hero .hero-slider__dot {
    width: 8px; height: 8px;
    padding: 0; border: 0; border-radius: 999px;
    background: rgba(255,255,255,.45);
    box-shadow: 0 1px 3px rgba(0,0,0,.45);
    -webkit-appearance: none; appearance: none;
    cursor: pointer;
    transition: width .3s ease, background-color .3s ease;
}
.premium-hero .hero-slider__dot.is-active { width: 22px; background: #fff; }

@media (max-width: 767px) {
    .premium-hero__caption { top: 60%; }
}

/* ============================================================
   Блок 3 — витрина «боги» (.premium-gods). Редакторский зигзаг:
   половина строки — иллюстрация божества, половина — фото изделия
   с подписью; стороны чередуются. Фон белый, текст Playfair.
   ============================================================ */
.premium-gods {
    background: #fff;
    color: #000;
    font-family: 'Playfair Display', serif;
}
.premium-gods__row {
    display: flex;
    align-items: stretch;
    min-height: 70vh;
    scroll-margin-top: 160px; /* якорь #god-N не уезжает под липкую шапку */
}
/* Чередование сторон: у чётных строк божество справа. */
.premium-gods__row:nth-child(even) {
    flex-direction: row-reverse;
}
.premium-gods__deity {
    flex: 1 1 50%;
    overflow: hidden;
}
.premium-gods__deity img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.premium-gods__card {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(1.5rem, 5vw, 4rem);
    gap: .6rem;
}
.premium-gods__bag {
    width: clamp(180px, 55%, 360px);
    height: auto;
    margin-bottom: .8rem;
}
.premium-gods__title {
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(1.4rem, 2.6vw, 2.1rem);
    letter-spacing: .06em;
    line-height: 1.15;
}
.premium-gods__sub {
    margin: 0;
    font-style: italic;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    color: #444;
}

@media (max-width: 767px) {
    /* Мобайл: строки в столбик, божество сверху; стороны не чередуем.
       Каждая строка — пара «божество + изделие»: большой зазор МЕЖДУ парами
       (margin-bottom) и плотная связка ВНУТРИ пары (карточка прижата к своему
       божеству) — чтобы было явно, какой товар к какому богу. */
    .premium-gods__row,
    .premium-gods__row:nth-child(even) {
        flex-direction: column;
        min-height: 0;
        margin-bottom: 3.5rem;
    }
    .premium-gods__row:last-child { margin-bottom: 0; }
    /* картинка-божество целиком, без обрезки (исходник квадратный) */
    .premium-gods__deity {
        flex: none;
        aspect-ratio: auto;
        overflow: visible;
    }
    .premium-gods__deity img { height: auto; }
    /* карточка прижата к своему божеству сверху; разделение пар — через
       margin-bottom строки выше */
    .premium-gods__card { flex: none; padding: 1rem 1.25rem 0; }
}

/* ============================================================
   Блок 4 — виджет «65-е Поле» (#f65-widget). Скролл-анимация на
   GSAP: номера 64 клеток проявляются, затем поднимается «65-е
   поле». Фон доски — ассет темы. Селекторы под #f65-widget.
   ============================================================ */
#f65-widget {
    margin: 0;
    padding: 0;
    width: 100%;
    position: relative;
    font-family: 'Playfair Display', serif;
    background-color: #fff;
    color: #000;
    /* без overflow:hidden — иначе ломается position:sticky у .f65-sticky;
       обрезку 3D-доски делает сам .f65-sticky. */
}
#f65-widget h2,
#f65-widget p {
    font-family: 'Playfair Display', serif !important;
    margin: 0;
}
#f65-widget .f65-scene {
    width: 100%;
    height: 250vh;            /* длина прокрутки: ~150vh «прилипания» + кадр */
    position: relative;
    background: #fff;
    /* без overflow:hidden — иначе ломается position:sticky у .f65-sticky */
}
#f65-widget .f65-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    box-sizing: border-box;
    /* отступ сверху на высоту прилипшей шапки — иначе она перекрывает верх
       композиции; центрирование тогда происходит в видимой зоне под шапкой. */
    padding-top: var(--f65-top-offset, 90px);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    perspective: 1200px;
    transform-style: preserve-3d;
    /* непрозрачный фон: без него промотированный 3D-слой при быстром скролле
       мигает серым прямоугольником из-под шапки. */
    background: #fff;
}
#f65-widget .f65-board-wrapper {
    position: relative;
    width: 60vmin;
    height: 60vmin;
    max-width: 600px;
    max-height: 600px;
    background-image: url('../img/premium/board-65.jpg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transform-style: preserve-3d;
    will-change: transform;
    overflow: visible;
}
#f65-widget .f65-number {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: bold;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    line-height: 1;
    transform-style: preserve-3d;
}
#f65-widget .f65-debug-dot {
    position: absolute;
    width: 6px; height: 6px;
    background-color: red;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    pointer-events: none;
}
#f65-widget .f65-item-container {
    position: absolute;
    top: 50%; left: 50%;
    width: 25%;
    height: auto;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    will-change: transform, opacity;
    backface-visibility: hidden;
}
#f65-widget .f65-img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.5));
    animation: f65-float 4s ease-in-out infinite;
    display: block;
}
@keyframes f65-float {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}
#f65-widget .f65-story-text {
    opacity: 0;
    text-align: center;
    margin-top: 15px;
    transform: translateZ(20px);
}
/* Заголовок «65-е Поле» вынесен из центра доски в нижнюю (светлую, облачную)
   зону и посажен на полупрозрачную плашку: на пёстрых клетках он читался плохо.
   Заменил собой прежний слоган «Выход за рамки возможного» (по просьбе). */
#f65-widget .f65-story-text .f65-title {
    margin: 5rem auto 0;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #000;
    background: rgba(255,255,255,0.92);
    display: inline-block;
    padding: 6px 20px;
    border-radius: 4px;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    text-transform: none;
}
#f65-widget .f65-story-text .f65-title span.gold-text {
    color: #b7a26f;
    font-weight: 700;
    text-transform: none;
}
@media (max-width: 767px) {
    /* короче сцена: меньше «воздуха» между Venus и доской + анимация быстрее */
    #f65-widget .f65-scene { height: 160vh; }
    /* больше воздуха сверху: композицию опускаем, чтобы эмблема «65» уверенно
       выходила из-под прилипшей шапки, а не упиралась в неё. */
    #f65-widget .f65-sticky { padding-top: calc(var(--f65-top-offset, 90px) + 96px); }
    #f65-widget .f65-board-wrapper { width: 90vmin; height: 90vmin; }
    #f65-widget .f65-number { font-size: 1rem; }
    #f65-widget .f65-item-container { width: 40%; }
    /* на мобиле заголовок убираем совсем: сразу под ним идёт почти такой же
       заголовок следующего блока (Консьерж-сервис «65-ое Поле») — дублирование. */
    #f65-widget .f65-story-text .f65-title { display: none; }
}

/* ============================================================
   Блок 5 — консьерж-сервис «65-ое Поле». Текстовый блок по центру.
   ============================================================ */
.premium-concierge {
    background: #fff;
    color: #000;
    font-family: 'Playfair Display', serif;
    text-align: center;
    padding: clamp(3rem, 8vw, 6rem) 1.25rem 2.5rem;
}
/* на мобиле подзажимаем верхний отступ — меньше «воздуха» после 65-го Поля */
@media (max-width: 767px) {
    .premium-concierge { padding-top: 1.5rem; }
}
.premium-concierge__title {
    margin: 0 0 1.5rem;
    font-family: var(--font-display); /* брендовая каллиграфия — как .handwritten на эталоне */
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 400;
    line-height: 1.1;
}
.premium-concierge__text {
    max-width: 500px;
    margin: 0 auto;
}
.premium-concierge__text p {
    margin: 0 0 1rem;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.6;
}
.premium-concierge__text p:last-child {
    margin-bottom: 0;
    font-style: italic;
    color: #444;
}

/* ============================================================
   Блок 6 — форма «Заявка на персональную презентацию»
   (.premium-embed-wrapper). Анимация «свиток + Гермес».
   Перенос с эталона; адаптация: AI-кнопка убрана; картинки
   (Гермес, конь) — ассеты темы; CSS-переменные заскоуплены
   на обёртку (не в глобальный :root).
   ============================================================ */
.premium-embed-wrapper {
    scroll-margin-top: 160px; /* якорь #zayavka не уезжает под липкую шапку */
    --paper-bg: #fcfcfc;
    --ink-color: #000000;
    --line-color: #333333;

    background-color: #ffffff;
    font-family: 'Playfair Display', serif;
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}
.premium-embed-wrapper * { box-sizing: border-box; }

.premium-embed-wrapper .main-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 620px;
    width: 100%;
}

/* Форма использует тот же класс .scene-container, что и блок шахмат. Общее
   правило #oliorosti-premium-widget .scene-container (height:100vh, flex,
   overflow:hidden) перебивало форму по ID-специфичности → сцена растягивалась
   на весь экран и свиток центрировался с огромным «воздухом». Префикс с ID
   возвращает форме фиксированную высоту и нейтральную раскладку. */
#oliorosti-premium-widget .premium-embed-wrapper .scene-container {
    position: relative;
    width: 100%;
    max-width: none;
    height: 620px;
    display: block;
    overflow: visible;
    perspective: 1000px;
    margin: 0 auto;
}

/* Свиток (обёртка) */
.premium-embed-wrapper .scroll-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 550px;
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 30;
}
.premium-embed-wrapper .scroll-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--paper-bg);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    border-top: 2px solid var(--ink-color);
    border-bottom: 2px solid var(--ink-color);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    transition: all 0.8s ease;
}

/* Палочки свитка */
.premium-embed-wrapper .scroll-bg::before,
.premium-embed-wrapper .scroll-bg::after {
    content: '';
    position: absolute;
    background: #1a1a1a;
    border: 1px solid #000;
    box-shadow: 2px 5px 10px rgba(0,0,0,0.3);
    transition: opacity 0.4s;
    z-index: 2;
}
@media (min-width: 901px) {
    .premium-embed-wrapper .scroll-bg::before,
    .premium-embed-wrapper .scroll-bg::after {
        top: -15px;
        bottom: -15px;
        width: 20px;
        border-radius: 2px;
    }
    .premium-embed-wrapper .scroll-bg::before { left: -20px; }
    .premium-embed-wrapper .scroll-bg::after { right: -20px; }
}

/* Форма */
.premium-embed-wrapper .premium-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    text-align: center;
    color: var(--ink-color);
    transition: opacity 0.3s ease;
}
.premium-embed-wrapper .form-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.1rem;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    border: none;
    font-weight: 400;
    line-height: 1.2;
    color: var(--ink-color);
}
.premium-embed-wrapper .form-control {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #000;
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    color: var(--ink-color);
    padding: 8px 0;
    outline: none;
    text-align: left;
    resize: none;
    box-shadow: none;
}

/* Согласие на обработку ПДн — под пергамент свитка (чернильный текст). */
.premium-embed-wrapper .olio-consent {
    margin: 14px 0 4px;
}
.premium-embed-wrapper .olio-consent__input {
    accent-color: var(--ink-color);
}
.premium-embed-wrapper .olio-consent__text {
    font-family: 'Playfair Display', serif;
    font-size: 0.95rem;
    color: var(--ink-color);
}
.premium-embed-wrapper .olio-consent__text a {
    color: var(--ink-color);
    text-decoration: underline;
}
.premium-embed-wrapper .form-control::placeholder {
    color: #666;
    font-style: italic;
    font-size: 1.2rem;
}
.premium-embed-wrapper .form-control:focus {
    border-bottom: 2px solid var(--ink-color);
}
.premium-embed-wrapper .form-group { margin-bottom: 1.2rem; position: relative; }
.premium-embed-wrapper .form-row { display: flex; gap: 30px; }

/* Honeypot — прячем от людей. */
.premium-embed-wrapper .premium-hp {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* Select (жирная стрелка) */
.premium-embed-wrapper select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 20px;
    padding-right: 30px;
    cursor: pointer;
}
.premium-embed-wrapper select.form-control:focus { outline: none; }

/* Блок подписи и коня */
.premium-embed-wrapper .submit-wrapper {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 15px;
    margin: auto;
    margin-top: 20px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 10px 30px;
    text-align: center;
    width: 100%;
}
.premium-embed-wrapper .chess-knight {
    display: block; /* был <div>; теперь <span> (валидно внутри <button>) — задаём блок явно */
    width: 70px;
    height: 70px;
    background-image: url('../img/premium/knight.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: bottom center;
    flex-shrink: 0;
}
.premium-embed-wrapper .signature-text {
    font-family: 'Classica One', cursive;
    font-size: 2.8rem;
    color: var(--ink-color);
    line-height: 1.8;
    transition: transform 0.3s;
    white-space: nowrap;
    /* глобальное правило кнопок темы (button{text-transform:uppercase;
       letter-spacing:5px}) наследуется сюда и ломает каллиграфию — сбрасываем,
       чтобы было «Сделать ход», а не «СДЕЛАТЬ ХОД». */
    text-transform: none;
    letter-spacing: normal;
}
.premium-embed-wrapper .submit-wrapper:hover .chess-knight {
    transform: rotate(-20deg) translateX(-5px);
}
.premium-embed-wrapper .submit-wrapper:hover .signature-text {
    transform: scale(1.05);
}
.premium-embed-wrapper .submit-wrapper:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Гермесы и анимация (десктоп — горизонтальный полёт) */
.premium-embed-wrapper .hermes-empty {
    position: absolute;
    left: -50vw;
    top: 50%;
    transform: translateY(-50%);
    width: 400px;
    height: 218px;
    background-image: url('../img/premium/hermes-1.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 20;
    transition: left 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    opacity: 1;
}
.premium-embed-wrapper .hermes-full {
    position: absolute;
    left: calc(50% - 350px);
    top: 50%;
    transform: translateY(-50%);
    width: 400px;
    height: 218px;
    background-image: url('../img/premium/hermes-2.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: left 1.5s ease-in, opacity 0.1s;
}
.premium-embed-wrapper .hermes-empty.fly-in {
    left: calc(50% - 350px);
}
.premium-embed-wrapper .hermes-full.fly-away {
    opacity: 1;
    left: 120vw;
}
.premium-embed-wrapper .success-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000;
    text-align: center;
    font-size: 2.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s;
}

/* Состояния свитка (десктоп) */
.premium-embed-wrapper .scroll-wrapper.rolled {
    width: 50px;
    height: 550px;
}
.premium-embed-wrapper .scroll-wrapper.rolled .scroll-bg {
    background: linear-gradient(to right, #ddd 0%, #fff 40%, #fff 60%, #ccc 100%);
    border: 1px solid #000;
    box-shadow: 5px 5px 20px rgba(0,0,0,0.3);
    background-image: none;
}
.premium-embed-wrapper .scroll-wrapper.rolled .scroll-bg::before,
.premium-embed-wrapper .scroll-wrapper.rolled .scroll-bg::after { opacity: 0; }
.premium-embed-wrapper .scroll-wrapper.rolled .premium-form { opacity: 0; pointer-events: none; }
.premium-embed-wrapper .scroll-wrapper.rotated {
    transform: translate(-50%, -50%) rotate(55deg) scale(0.7);
}
.premium-embed-wrapper .scroll-wrapper.vanished {
    opacity: 0;
    transition: opacity 0.1s;
}

/* Мобильная адаптация формы (≤900px) */
@media (max-width: 900px) {
    #oliorosti-premium-widget .premium-embed-wrapper .scene-container,
    #oliorosti-premium-widget .premium-embed-wrapper .main-wrapper {
        height: 800px;
        min-height: 800px;
    }
    .premium-embed-wrapper .scroll-wrapper {
        width: 85vw;
        height: 650px;
    }
    .premium-embed-wrapper .scroll-bg::before,
    .premium-embed-wrapper .scroll-bg::after {
        left: -15px;
        right: -15px;
        width: auto;
        height: 25px;
        border-radius: 5px;
        background: linear-gradient(to bottom, #000 0%, #333 30%, #555 50%, #333 70%, #000 100%);
        border: none;
    }
    .premium-embed-wrapper .scroll-bg::before {
        top: -20px;
        box-shadow: 0 5px 10px rgba(0,0,0,0.4);
    }
    .premium-embed-wrapper .scroll-bg::after {
        bottom: -20px;
        top: auto;
        box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    }
    .premium-embed-wrapper .form-row {
        flex-direction: column;
        gap: 10px;
    }
    .premium-embed-wrapper .form-group {
        width: 100% !important;
        margin-bottom: 1rem;
    }
    /* на узком экране даём форме больше ширины внутри свитка */
    .premium-embed-wrapper .premium-form {
        width: 88%;
    }
    /* «резиновый» размер заголовка + меньший трекинг — длинные слова
       «ПЕРСОНАЛЬНУЮ/ПРЕЗЕНТАЦИЮ» помещаются на любой ширине телефона */
    .premium-embed-wrapper .form-header h2 {
        font-size: clamp(1.2rem, 5.2vw, 1.7rem);
        letter-spacing: 1px;
        margin-bottom: 1rem;
    }
    .premium-embed-wrapper .signature-text {
        font-size: clamp(1.5rem, 5vw, 2.2rem);
    }
    .premium-embed-wrapper .hermes-empty {
        left: calc(50% - 150px);
        top: -150%;
        width: 300px;
        height: 163px;
        transition: top 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    .premium-embed-wrapper .hermes-full {
        left: calc(50% - 150px);
        top: 50%;
        width: 300px;
        height: 163px;
        transition: top 1.5s ease-in, opacity 0.1s;
    }
    .premium-embed-wrapper .hermes-empty.fly-in {
        left: calc(50% - 150px);
        top: 50%;
    }
    .premium-embed-wrapper .hermes-full.fly-away {
        left: calc(50% - 150px);
        top: -150%;
    }
    .premium-embed-wrapper .scroll-wrapper.rolled {
        width: 85vw;
        height: 60px;
    }
    .premium-embed-wrapper .scroll-wrapper.rolled .scroll-bg {
        background: linear-gradient(to bottom, #ddd 0%, #fff 40%, #fff 60%, #ccc 100%);
    }
    .premium-embed-wrapper .scroll-wrapper.rotated {
        transform: translate(-50%, -50%) rotate(-10deg) scale(0.8);
    }
}