body[data-page="vybor-home"] .home-ref-main,
body[data-page="vybor-home"] .product-home {
    overflow: visible;
}

.scenario-orbit-system {
    position: relative;
    width: auto;
    margin-inline: auto;
    padding: 0;
}

.scenario-orbit-system__shell {
    position: relative;
    overflow: hidden;
    min-height: clamp(720px, calc(var(--app-stable-height, 100svh) - 80px), 860px);
    /* Miniapp override (vybor-home) ограничивает высоту через home_ref.css */
    border: 1px solid rgba(246, 240, 234, 0.075);
    border-radius: 32px;
    background:
        radial-gradient(circle at 50% 58%, rgba(128, 20, 32, 0.24), transparent 17%),
        radial-gradient(circle at 50% 72%, rgba(87, 11, 22, 0.34), transparent 44%),
        radial-gradient(circle at 18% 20%, rgba(78, 10, 18, 0.22), transparent 26%),
        radial-gradient(circle at 84% 16%, rgba(168, 95, 48, 0.08), transparent 20%),
        linear-gradient(180deg, rgba(10, 8, 8, 0.99), rgba(4, 4, 4, 1));
    box-shadow:
        inset 0 1px 0 rgba(255, 241, 224, 0.04),
        inset 0 -24px 60px rgba(0, 0, 0, 0.3),
        0 36px 110px rgba(0, 0, 0, 0.5);
    isolation: isolate;
    --orbit-progress: 0.34;
}

.scenario-orbit-system__shell::before,
.scenario-orbit-system__shell::after,
.scenario-orbit-system__shell > .scenario-orbit-system__grain,
.scenario-orbit-system__visual::before,
.scenario-orbit-system__visual::after,
.scenario-orbit-system__fog::before,
.scenario-orbit-system__fog::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.scenario-orbit-system__shell::before {
    background:
        linear-gradient(90deg, transparent 0 10%, rgba(246, 223, 194, 0.016) 24%, transparent 42% 58%, rgba(246, 223, 194, 0.018) 78%, transparent 92%),
        linear-gradient(180deg, rgba(255, 236, 214, 0.022), transparent 16%, transparent 84%, rgba(255, 236, 214, 0.01));
    opacity: 0.92;
}

.scenario-orbit-system__shell::after {
    background:
        radial-gradient(circle at 16% 24%, rgba(255, 240, 224, 0.024) 0 1px, transparent 1.4px),
        radial-gradient(circle at 72% 20%, rgba(255, 240, 224, 0.02) 0 1px, transparent 1.3px),
        radial-gradient(circle at 78% 60%, rgba(255, 240, 224, 0.016) 0 1px, transparent 1.2px),
        radial-gradient(circle at 36% 78%, rgba(255, 240, 224, 0.018) 0 1px, transparent 1.4px),
        radial-gradient(circle at 50% 50%, rgba(163, 28, 38, 0.08), transparent 18%),
        radial-gradient(circle at 48% 58%, rgba(210, 146, 84, 0.05), transparent 26%);
    background-size: 320px 320px, 380px 380px, 340px 340px, 300px 300px, 100% 100%, 100% 100%;
    mix-blend-mode: screen;
    opacity: 0.46;
}

.scenario-orbit-system__grain {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.16;
    mix-blend-mode: soft-light;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 242, 225, 0.16) 0 0.6px, transparent 0.9px),
        radial-gradient(circle at 76% 24%, rgba(255, 242, 225, 0.14) 0 0.6px, transparent 1px),
        radial-gradient(circle at 42% 82%, rgba(255, 242, 225, 0.12) 0 0.6px, transparent 0.9px),
        linear-gradient(transparent 0 48%, rgba(255, 236, 214, 0.026) 49%, transparent 50% 100%);
    background-size: 180px 180px, 220px 220px, 210px 210px, 100% 3px;
    filter: blur(0.2px);
}

.scenario-orbit-system__visual {
    position: relative;
    z-index: 1;
    height: clamp(670px, calc(var(--app-stable-height, 100svh) - 128px), 800px);
    overflow: hidden;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0 88%, rgba(0, 0, 0, 0.98) 92%, transparent 100%);
}

.scenario-orbit-system__visual::before {
    background:
        linear-gradient(90deg, transparent 8%, rgba(186, 73, 58, 0.065) 18%, transparent 32%, rgba(191, 139, 82, 0.04) 48%, transparent 62%, rgba(186, 73, 58, 0.05) 76%, transparent 92%),
        radial-gradient(circle at 50% 58%, rgba(163, 30, 37, 0.16), transparent 16%),
        radial-gradient(circle at 50% 56%, rgba(212, 148, 86, 0.08), transparent 24%),
        radial-gradient(circle at 28% 68%, rgba(107, 18, 27, 0.12), transparent 22%),
        radial-gradient(circle at 74% 40%, rgba(107, 18, 27, 0.1), transparent 24%);
    mix-blend-mode: screen;
    opacity: 0.88;
}

.scenario-orbit-system__visual::after {
    background:
        linear-gradient(180deg, rgba(4, 4, 4, 0.08), rgba(4, 4, 4, 0) 14%, rgba(4, 4, 4, 0) 76%, rgba(4, 4, 4, 0.84) 91%, rgba(4, 4, 4, 0.98) 100%),
        radial-gradient(circle at 50% 48%, rgba(255, 244, 233, 0.016), transparent 54%);
    opacity: 0.9;
}

.scenario-orbit-system__canvas,
.scenario-orbit-system__fog {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.scenario-orbit-system__canvas {
    filter: saturate(1.03) contrast(1.02);
}

.scenario-orbit-system__fog {
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 58%, rgba(162, 31, 39, 0.12), transparent 16%),
        radial-gradient(circle at 49% 56%, rgba(223, 151, 84, 0.06), transparent 22%),
        radial-gradient(circle at 35% 66%, rgba(118, 19, 30, 0.07), transparent 22%),
        radial-gradient(circle at 72% 36%, rgba(118, 19, 30, 0.065), transparent 24%);
    mix-blend-mode: screen;
    opacity: 0.88;
}

.scenario-orbit-system__fog::before {
    background:
        radial-gradient(circle at 50% 58%, rgba(165, 34, 43, 0.12), transparent 18%),
        radial-gradient(circle at 50% 58%, rgba(215, 143, 80, 0.05), transparent 28%);
    filter: blur(26px);
    opacity: 0.7;
    animation: scenario-orbit-fog-shift 18s ease-in-out infinite;
}

.scenario-orbit-system__fog::after {
    background:
        linear-gradient(90deg, transparent 10%, rgba(255, 233, 204, 0.018) 26%, transparent 40% 60%, rgba(255, 233, 204, 0.014) 74%, transparent 90%),
        radial-gradient(circle at 50% 58%, rgba(255, 238, 214, 0.026), transparent 40%);
    filter: blur(18px);
    opacity: 0.56;
    animation: scenario-orbit-beams 22s ease-in-out infinite;
}

/* ── Signal: cinematic text materialisation ─────────────────────────────────
   Архитектура:
   • Внешний контейнер (.__signal) живёт в transform-пространстве —
     translate3d пишется каждый кадр из JS (spring physics). Никаких
     left/top — это снимает layout-trash и даёт GPU-композитинг.
   • Внутренний слой (.__signal-inner) делает мягкий «подъём» (translateY).
   • Текст (p) проходит через blur-to-focus + ambient glow + breathing.
   • Fade-in идёт медленно (cinematic reveal), fade-out быстрее —
     чтобы за время невидимости успеть подменить textContent без видимого
     скачка букв. */

.scenario-orbit-system__signal {
    --signal-depth: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    max-width: min(220px, calc(100% - 56px));
    padding: 0;
    opacity: 0;
    filter: blur(8px);
    /* transform контролируется JS — не указываем здесь transition для него */
    transform: translate3d(0, 0, 0);
    transform-origin: center center;
    transition:
        opacity 640ms cubic-bezier(0.4, 0, 0.6, 1),
        filter  560ms cubic-bezier(0.4, 0, 0.6, 1);
    pointer-events: none;
    will-change: transform, opacity, filter;
    overflow: visible;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.scenario-orbit-system__visual.is-signal-visible .scenario-orbit-system__signal {
    opacity: 1;
    filter: blur(0px);
    transition:
        opacity 1900ms cubic-bezier(0.22, 1, 0.36, 1),
        filter  1700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.scenario-orbit-system__signal-inner {
    transform: translate3d(0, 16px, 0);
    transition: transform 720ms cubic-bezier(0.4, 0, 0.6, 1);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.scenario-orbit-system__visual.is-signal-visible .scenario-orbit-system__signal-inner {
    transform: translate3d(0, 0, 0);
    transition: transform 2400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.scenario-orbit-system__signal-label {
    display: block;
    margin-bottom: 10px;
    color: rgba(208, 158, 106, 0.48);
    font-size: 8.5px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.34em;
    text-transform: uppercase;
}

.scenario-orbit-system__signal p {
    margin: 0;
    color: rgba(249, 242, 235, 0.94);
    font-family: "Cormorant Garamond", "Times New Roman", serif;
    font-size: clamp(15px, 3.4vw, 19px);
    font-weight: 500;
    line-height: 1.36;
    letter-spacing: 0.012em;
    text-wrap: balance;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    filter: blur(4px);
    text-shadow:
        0 0 0px rgba(226, 168, 98, 0),
        0 0 0px rgba(112, 24, 31, 0);
    transition:
        filter      640ms cubic-bezier(0.4, 0, 0.6, 1),
        text-shadow 640ms cubic-bezier(0.4, 0, 0.6, 1);
    will-change: filter, text-shadow;
}

.scenario-orbit-system__visual.is-signal-visible .scenario-orbit-system__signal p {
    filter: blur(0px);
    text-shadow:
        0 0 22px rgba(226, 168, 98, 0.16),
        0 0 48px rgba(112, 24, 31, 0.12);
    transition:
        filter      2000ms cubic-bezier(0.22, 1, 0.36, 1) 400ms,
        text-shadow 2000ms cubic-bezier(0.22, 1, 0.36, 1) 700ms;
    animation: scenario-orbit-text-breathe 11s 3200ms ease-in-out infinite;
}

/* Ambient breathing — только opacity, чтобы не дёргать layout/paint */
@keyframes scenario-orbit-text-breathe {
    0%, 100% { opacity: 1; }
    45%      { opacity: 0.84; }
    75%      { opacity: 0.93; }
}

.scenario-orbit-system__indicator {
    position: absolute;
    left: 50%;
    bottom: 20px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transform: translateX(-50%);
    pointer-events: none;
}

.scenario-orbit-system__indicator-bar {
    position: relative;
    width: 74px;
    height: 2px;
    border-radius: 999px;
    background: rgba(246, 240, 234, 0.12);
    overflow: hidden;
}

.scenario-orbit-system__indicator-progress {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--orbit-progress, 0.34) * 100%);
    min-width: 18px;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255, 83, 75, 0.92), rgba(255, 128, 86, 0.72));
    box-shadow: 0 0 10px rgba(255, 88, 74, 0.36);
}

.scenario-orbit-system__indicator-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(246, 240, 234, 0.28);
}


@keyframes scenario-orbit-fog-shift {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.62;
    }
    50% {
        transform: translate3d(0, -12px, 0) scale(1.035);
        opacity: 0.76;
    }
}

@keyframes scenario-orbit-beams {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scaleX(1);
        opacity: 0.38;
    }
    50% {
        transform: translate3d(0, 0, 0) scaleX(1.03);
        opacity: 0.54;
    }
}

@media (max-width: 920px) {
    .scenario-orbit-system {
        width: auto;
    }

    .scenario-orbit-system__shell {
        min-height: clamp(720px, calc(var(--app-stable-height, 100svh) - 80px), 860px);
        border-radius: 32px;
    }

    .scenario-orbit-system__visual {
        height: clamp(670px, calc(var(--app-stable-height, 100svh) - 128px), 800px);
    }
}

@media (max-width: 640px) {
    .scenario-orbit-system {
        width: auto;
    }

    .scenario-orbit-system__shell {
        min-height: clamp(720px, calc(var(--app-stable-height, 100svh) - 80px), 860px);
        border-radius: 32px;
    }

    .scenario-orbit-system__visual {
        height: clamp(670px, calc(var(--app-stable-height, 100svh) - 128px), 800px);
    }

    .scenario-orbit-system__signal {
        max-width: min(200px, calc(100% - 52px));
    }

    .scenario-orbit-system__signal p {
        font-size: clamp(14px, 3.5vw, 17.5px);
    }
}

@media (max-width: 430px) {
    .scenario-orbit-system {
        width: auto;
    }

    .scenario-orbit-system__shell {
        min-height: clamp(720px, calc(var(--app-stable-height, 100svh) - 80px), 860px);
    }

    .scenario-orbit-system__visual {
        height: clamp(670px, calc(var(--app-stable-height, 100svh) - 128px), 800px);
    }

    .scenario-orbit-system__signal {
        max-width: min(178px, calc(100% - 44px));
    }

    .scenario-orbit-system__signal p {
        font-size: clamp(13.5px, 3.4vw, 16.5px);
        line-height: 1.32;
    }

    .scenario-orbit-system__indicator {
        bottom: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scenario-orbit-system__fog::before,
    .scenario-orbit-system__fog::after {
        animation: none;
    }

    .scenario-orbit-system__signal {
        filter: none;
        transition: opacity 280ms ease;
        will-change: auto;
    }

    .scenario-orbit-system__visual.is-signal-visible .scenario-orbit-system__signal {
        transition: opacity 280ms ease;
    }

    .scenario-orbit-system__signal-inner {
        transform: none;
        transition: none;
        will-change: auto;
    }

    .scenario-orbit-system__visual.is-signal-visible .scenario-orbit-system__signal-inner {
        transform: none;
        transition: none;
    }

    .scenario-orbit-system__signal p {
        filter: none;
        transition: none;
        animation: none !important;
    }

    .scenario-orbit-system__visual.is-signal-visible .scenario-orbit-system__signal p {
        filter: none;
        transition: none;
        animation: none !important;
    }
}