/* =====================================================================
   ELISOR — тематичні фони секцій

   Кожен екран має власну сцену, повʼязану зі змістом: карта — пінами,
   листування — хвилями сигналу, матеріали — кресленням, дослідження —
   даними. Сцени рухаються постійно й реагують на курсор.

   Правила:
   · тільки токени — світла тема працює без окремих стилів;
   · рух вимикається за межами екрана (клас is-live ставить JS);
   · prefers-reduced-motion зупиняє все.
   ===================================================================== */

.scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: inherit;
    /* курсор: 0…1 у межах секції, ставить scenes.js */
    --mx: 0.5;
    --my: 0.5;
    /* глибина шарів — зміщення в пікселях на повний хід курсора */
    --d1: 26px;
    --d2: 14px;
    --d3: 7px;
}
.scene * { pointer-events: none; }

/* Блок зі сценою стає системою координат для неї */
.has-scene { position: relative; isolation: isolate; }
.has-scene > *:not(.scene) { position: relative; z-index: 1; }

/* Світло, що йде за курсором — спільне для всіх сцен */
.scene__cursor {
    position: absolute;
    left: calc(var(--mx) * 100%);
    top: calc(var(--my) * 100%);
    width: 460px; height: 460px;
    margin: -230px 0 0 -230px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-soft) 0%, transparent 62%);
    opacity: 0;
    transition: opacity var(--slow) var(--ease);
}
.has-scene:hover .scene__cursor { opacity: 1; }

/* Загальний шар: рухається від курсора */
.scene i {
    position: absolute;
    display: block;
    will-change: transform;
}
.scene:not(.is-live) i { animation-play-state: paused; }

/* --- AURORA — мʼякі світлові смуги: обкладинка, фінал, демо ---------- */
.scene--aurora i {
    left: -20%; right: -20%;
    height: 240px;
    border-radius: 50%;
    filter: blur(46px);
    opacity: .95;
}
.scene--aurora i:nth-child(1) {
    top: 4%;
    background: linear-gradient(90deg, transparent, var(--accent-soft), transparent);
    animation: sc-aurora 19s var(--ease) infinite alternate;
    transform: translate(calc((var(--mx) - .5) * var(--d1)), calc((var(--my) - .5) * var(--d3)));
}
.scene--aurora i:nth-child(2) {
    top: 42%;
    background: linear-gradient(90deg, transparent, rgba(126,151,168,.20), transparent);
    animation: sc-aurora 25s var(--ease) infinite alternate-reverse;
}
.scene--aurora i:nth-child(3) {
    top: 74%;
    background: linear-gradient(90deg, transparent, rgba(127,168,140,.16), transparent);
    animation: sc-aurora 31s var(--ease) infinite alternate;
}
@keyframes sc-aurora {
    from { transform: translate3d(-8%, 0, 0) scaleY(.8); }
    to   { transform: translate3d(8%, 22px, 0) scaleY(1.25); }
}

/* --- FRACTURE — розломи: проблема, «було / стало» -------------------- */
.scene--fracture i {
    top: -30%; bottom: -30%;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--line-strong) 32%, var(--accent-line) 50%, var(--line-strong) 68%, transparent);
    transform-origin: center;
    animation: sc-crack 14s var(--ease) infinite alternate;
}
.scene--fracture i { box-shadow: 0 0 18px 1px var(--accent-soft); }
.scene--fracture i:nth-child(1) { left: 14%; animation-delay: 0s; }
.scene--fracture i:nth-child(2) { left: 31%; animation-delay: -3s; opacity: .6; }
.scene--fracture i:nth-child(3) { left: 58%; animation-delay: -6s; }
.scene--fracture i:nth-child(4) { left: 76%; animation-delay: -9s; opacity: .5; }
.scene--fracture i:nth-child(5) { left: 91%; animation-delay: -12s; opacity: .7; }
@keyframes sc-crack {
    from { transform: rotate(9deg) translateX(calc((var(--mx) - .5) * -20px)) scaleY(.9); opacity: .25; }
    to   { transform: rotate(15deg) translateX(calc((var(--mx) - .5) * 20px)) scaleY(1.1); opacity: .75; }
}

/* --- NETWORK — вузли та звʼязки: екосистема, рішення, партнери ------- */
.scene--network svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene--network .sc-link {
    stroke: var(--accent-line);
    stroke-width: 1;
    opacity: .3;
    animation: sc-link 7s var(--ease) infinite alternate;
}
.scene--network .sc-link:nth-child(2n) { animation-delay: -2.4s; }
.scene--network .sc-link:nth-child(3n) { animation-delay: -4.8s; }
@keyframes sc-link { from { opacity: .12; } to { opacity: .5; } }
.scene--network .sc-node {
    fill: var(--accent);
    animation: sc-node 9s var(--ease) infinite alternate;
    transform-box: fill-box;
    transform-origin: center;
}
.scene--network .sc-node:nth-child(2n) { animation-delay: -3s; fill: var(--info); }
.scene--network .sc-node:nth-child(3n) { animation-delay: -6s; fill: var(--positive); }
@keyframes sc-node {
    from { transform: translate(0, 0) scale(.7); opacity: .45; }
    to   { transform: translate(6px, -8px) scale(1.3); opacity: .95; }
}
.scene--network > span {
    position: absolute; inset: 0;
    transform: translate(calc((var(--mx) - .5) * var(--d2)), calc((var(--my) - .5) * var(--d2)));
    transition: transform 600ms var(--ease-out);
}

/* --- CROWD — точки-люди сходяться: аудиторія ------------------------- */
.scene--crowd i {
    top: 100%;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px 2px var(--accent-soft);
    opacity: .6;
    animation: sc-rise 13s linear infinite;
}
/* відстань підйому — в пікселях: відсотки тут рахувались би від крапки */
@keyframes sc-rise {
    0%   { transform: translate3d(0, 0, 0) scale(.4); opacity: 0; }
    14%  { opacity: .85; }
    80%  { opacity: .6; }
    100% { transform: translate3d(calc((var(--mx) - .5) * 70px), -680px, 0) scale(1.15); opacity: 0; }
}

/* --- GEO — піни та дуги: географія, карта ---------------------------- */
.scene--geo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene--geo .sc-arc {
    fill: none;
    stroke: var(--accent-line);
    stroke-width: 1;
    stroke-dasharray: 4 6;
    animation: sc-dash 12s linear infinite;
}
@keyframes sc-dash { to { stroke-dashoffset: -100; } }
.scene--geo .sc-pin { fill: var(--accent); }
.scene--geo .sc-halo {
    fill: none;
    stroke: var(--accent-line);
    stroke-width: 1;
    transform-box: fill-box;
    transform-origin: center;
    animation: sc-ping 3.4s var(--ease-out) infinite;
}
@keyframes sc-ping {
    0%   { transform: scale(.3); opacity: .9; }
    70%  { transform: scale(3.4); opacity: 0; }
    100% { transform: scale(3.4); opacity: 0; }
}
.scene--geo > span {
    position: absolute; inset: 0;
    transform: translate(calc((var(--mx) - .5) * var(--d1)), calc((var(--my) - .5) * var(--d3)));
    transition: transform 700ms var(--ease-out);
}

/* --- FLOW — картки їдуть доріжками: сценарій, завдання, день ---------- */
.scene--flow i {
    height: 34px;
    border-radius: 7px;
    border: 1px solid var(--accent-line);
    background: linear-gradient(120deg, var(--accent-soft), transparent 70%);
    box-shadow: 0 6px 22px -10px rgba(0, 0, 0, .8);
    animation: sc-flow 11s linear infinite;
}
.scene--flow i::after {
    content: '';
    position: absolute;
    left: 10px; top: 11px;
    width: 42%; height: 2px;
    border-radius: 2px;
    background: var(--accent-line);
}
.scene--flow i:nth-child(1) { top: 18%; width: 180px; animation-delay: 0s; }
.scene--flow i:nth-child(2) { top: 34%; width: 120px; animation-delay: -2.7s; opacity: .7; }
.scene--flow i:nth-child(3) { top: 52%; width: 220px; animation-delay: -5.4s; }
.scene--flow i:nth-child(4) { top: 68%; width: 140px; animation-delay: -8.1s; opacity: .6; }
.scene--flow i:nth-child(5) { top: 84%; width: 190px; animation-delay: -1.4s; opacity: .5; }
@keyframes sc-flow {
    from { transform: translate3d(-260px, 0, 0); opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    to   { transform: translate3d(calc(100vw + 60px), 0, 0); opacity: 0; }
}

/* --- BLUEPRINT — креслення: профіль, матеріали, BIM ------------------ */
.scene--blueprint svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene--blueprint .sc-draw {
    fill: none;
    stroke: var(--line-bright);
    stroke-width: 1;
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: sc-trace 16s var(--ease) infinite;
}
.scene--blueprint .sc-draw:nth-child(2) { animation-delay: -5s; stroke: var(--accent-line); }
.scene--blueprint .sc-draw:nth-child(3) { animation-delay: -10s; }
@keyframes sc-trace {
    0%   { stroke-dashoffset: 1200; opacity: 0; }
    12%  { opacity: .8; }
    55%  { stroke-dashoffset: 0; opacity: .8; }
    75%  { stroke-dashoffset: 0; opacity: 0; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}
.scene--blueprint .sc-tick { stroke: var(--accent-line); stroke-width: 1; opacity: .5; }
.scene--blueprint > span {
    position: absolute; inset: 0;
    transform: translate(calc((var(--mx) - .5) * var(--d2)), calc((var(--my) - .5) * var(--d2)));
    transition: transform 650ms var(--ease-out);
}

/* --- SIGNAL — хвилі повідомлень: комунікація, чат -------------------- */
.scene--signal i {
    border-radius: 50%;
    border: 1px solid var(--accent-line);
    animation: sc-wave 6.5s var(--ease-out) infinite;
}
.scene--signal i { width: 80px; height: 80px; border-width: 1.5px; }
.scene--signal i:nth-child(1) { left: 14%; top: 34%; }
.scene--signal i:nth-child(2) { left: 14%; top: 34%; animation-delay: -1.6s; }
.scene--signal i:nth-child(3) { left: 14%; top: 34%; animation-delay: -3.2s; }
.scene--signal i:nth-child(4) { left: 14%; top: 34%; animation-delay: -4.8s; }
.scene--signal i:nth-child(5) { right: 18%; bottom: 26%; animation-delay: -.9s; border-color: rgba(126,151,168,.55); }
.scene--signal i:nth-child(6) { right: 18%; bottom: 26%; animation-delay: -2.7s; border-color: rgba(126,151,168,.55); }
.scene--signal i:nth-child(7) { right: 18%; bottom: 26%; animation-delay: -4.5s; border-color: rgba(126,151,168,.55); }
@keyframes sc-wave {
    from { transform: scale(.25); opacity: 1; }
    to   { transform: scale(3.2); opacity: 0; }
}

/* --- DOCS — аркуші пропозицій: тендери, запити ----------------------- */
.scene--docs i {
    width: 96px; height: 128px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: linear-gradient(180deg, var(--tint-soft), transparent);
    animation: sc-sheet 17s var(--ease) infinite;
}
.scene--docs i:nth-child(1) { left: 8%;  top: 22%; animation-delay: 0s; }
.scene--docs i:nth-child(2) { left: 22%; top: 52%; animation-delay: -4s; opacity: .7; }
.scene--docs i:nth-child(3) { right: 12%; top: 18%; animation-delay: -8s; }
.scene--docs i:nth-child(4) { right: 26%; bottom: 14%; animation-delay: -12s; opacity: .6; }
@keyframes sc-sheet {
    0%   { transform: translateY(30px) rotate(-6deg); opacity: 0; }
    15%  { opacity: .5; }
    50%  { transform: translateY(-14px) rotate(4deg); opacity: .5; }
    85%  { opacity: .35; }
    100% { transform: translateY(-52px) rotate(9deg); opacity: 0; }
}

/* --- DATA — стовпчики й точки: дослідження, опитування, статистика --- */
.scene--data i {
    bottom: 18%;
    width: 16px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, var(--accent-line), transparent);
    transform-origin: bottom;
    animation: sc-bar 8s var(--ease) infinite alternate;
}
.scene--data i:nth-child(1) { left: 10%; height: 120px; animation-delay: 0s; }
.scene--data i:nth-child(2) { left: 15%; height: 190px; animation-delay: -1.1s; }
.scene--data i:nth-child(3) { left: 20%; height: 90px;  animation-delay: -2.2s; }
.scene--data i:nth-child(4) { right: 22%; height: 160px; animation-delay: -3.3s; }
.scene--data i:nth-child(5) { right: 17%; height: 230px; animation-delay: -4.4s; }
.scene--data i:nth-child(6) { right: 12%; height: 110px; animation-delay: -5.5s; }
@keyframes sc-bar {
    from { transform: scaleY(.35); opacity: .28; }
    to   { transform: scaleY(1); opacity: .7; }
}

/* --- SPARK — блиски: акції, сертифікати, розпродажі ------------------ */
.scene--spark i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 20px 5px var(--accent-soft), 0 0 4px 1px var(--accent-line);
    animation: sc-spark 5.5s var(--ease-out) infinite;
}
/* промінчик, щоб блиск читався саме як блиск */
.scene--spark i::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 26px; height: 1px;
    margin: 0 0 0 -13px;
    background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
}
@keyframes sc-spark {
    0%   { transform: scale(0); opacity: 0; }
    25%  { transform: scale(1.6); opacity: 1; }
    60%  { transform: scale(.8); opacity: .5; }
    100% { transform: scale(0); opacity: 0; }
}

/* --- TIERS — сходинки рівнів: пакети, масштаб ------------------------ */
.scene--tiers i {
    bottom: 22%;
    width: 74px;
    border-radius: 8px 8px 0 0;
    border: 1px solid var(--line-strong);
    border-bottom: none;
    background: linear-gradient(180deg, var(--accent-soft), transparent);
    transform-origin: bottom;
    animation: sc-tier 9s var(--ease) infinite;
}
.scene--tiers i:nth-child(1) { left: 12%; height: 70px;  animation-delay: 0s; }
.scene--tiers i:nth-child(2) { left: 21%; height: 120px; animation-delay: -.6s; }
.scene--tiers i:nth-child(3) { left: 30%; height: 175px; animation-delay: -1.2s; }
.scene--tiers i:nth-child(4) { left: 39%; height: 235px; animation-delay: -1.8s; }
@keyframes sc-tier {
    0%, 100% { transform: scaleY(.9); opacity: .22; }
    50%      { transform: scaleY(1); opacity: .55; }
}

/* --- GLOBE — меридіани: міжнародна присутність ----------------------- */
.scene--globe svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene--globe .sc-meridian {
    fill: none;
    stroke: var(--line-bright);
    stroke-width: 1;
    opacity: .45;
    transform-box: fill-box;
    transform-origin: center;
    animation: sc-spin 26s linear infinite;
}
.scene--globe .sc-meridian:nth-child(2n) { animation-duration: 34s; animation-direction: reverse; }
@keyframes sc-spin { to { transform: rotate(360deg); } }
.scene--globe .sc-dot { fill: var(--accent); animation: sc-node 7s var(--ease) infinite alternate; }
.scene--globe > span {
    position: absolute; inset: 0;
    transform: translate(calc((var(--mx) - .5) * var(--d2)), calc((var(--my) - .5) * var(--d3)));
    transition: transform 800ms var(--ease-out);
}

/* --- ORBIT — відсотки на орбітах: ретро-бонуси ----------------------- */
.scene--orbit i {
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    animation: sc-spin 28s linear infinite;
}
.scene--orbit i:nth-child(1) { width: 300px; height: 300px; right: 8%;  top: 12%; }
.scene--orbit i:nth-child(2) { width: 440px; height: 440px; right: 2%;  top: 2%;  animation-duration: 44s; animation-direction: reverse; opacity: .6; }
.scene--orbit i:nth-child(3) { width: 180px; height: 180px; right: 16%; top: 30%; animation-duration: 18s; }
.scene--orbit i::after {
    content: '';
    position: absolute;
    top: -4px; left: 50%;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 14px 3px var(--accent-soft);
}

/* --- QUIET — ледь помітний серпанок: питання й відповіді ------------- */
.scene--quiet i {
    width: 420px; height: 420px;
    border-radius: 50%;
    filter: blur(80px);
    background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
    opacity: .8;
    animation: sc-drift 34s var(--ease) infinite alternate;
}
.scene--quiet i:nth-child(1) { left: -6%; top: 10%; }
.scene--quiet i:nth-child(2) { right: -8%; bottom: 6%; animation-delay: -17s;
    background: radial-gradient(circle, rgba(126,151,168,.16) 0%, transparent 70%); }
@keyframes sc-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(7vw, 5vh, 0) scale(1.25); }
}

/* --- Пристосування -------------------------------------------------- */
@media (max-width: 860px) {
    /* на вузькому екрані фон має не заважати читанню */
    .scene { opacity: .55; }
    .scene--docs i, .scene--tiers i:nth-child(4) { display: none; }
    .scene__cursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .scene i, .scene svg *, .scene [class^="sc-"] {
        animation: none !important;
        transition: none !important;
    }
    .scene { opacity: .4; }
}