/* Scene, compositing and motion settings from the published base.css. */
.scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--bg);
}

.scene__world {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease, visibility .8s;
}
:root[data-theme="hell"] .scene__world--hell,
:root[data-theme="heaven"] .scene__world--heaven { opacity: 1; visibility: visible; }
/* мир, который сейчас не показан, убран совсем: его анимации и слои не тратят кадр (fx.js) */
.scene__world[hidden] { display: none; }

.scene__world--hell   { --ar: 2560 / 1441; --img: url("bg-hell.jpg"); }
.scene__world--heaven { --ar: 2560 / 1441; --img: url("bg-heaven.jpg"); }

/* Картинка всегда закрывает экран целиком (как background-size: cover),
   а все эффекты внутри неё стоят в процентах — поэтому точно попадают в портал, луч, арку */
.scene__box {
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100vw, calc(100vh * var(--ar)));
    aspect-ratio: var(--ar);
    /* сдвиг за мышкой (параллакс) fx.js дописывает прямо сюда — только у видимого мира */
    transform: translate3d(-50%, -50%, 0) scale(1.05);
}
.scene__zoom {
    position: absolute;
    inset: 0;
    transform-origin: 50% 35%;
    animation: kenBurns 46s ease-in-out infinite alternate;
    will-change: transform;
}
.scene__img {
    position: absolute;
    inset: 0;
    background: var(--img) center / 100% 100% no-repeat;
}
.scene__zoom > * { position: absolute; pointer-events: none; }
@keyframes kenBurns { from { transform: scale(1); } to { transform: scale(1.06); } }

/* Все места эффектов заданы в процентах картинки 2560×1441 (с 30.10.2026 — тема «Сакура», картинки владельца:
   озеро, ворота тории в воде, Фудзи; день и ночь — одна раскладка):
   ночь (data-theme="hell") — луна (48.9 %, 16.7 %), ворота (63.5…77 % × 42…62 %), фонари у их опор (66.2, 68.7,
   73.4, 76 % × 56…58 %), святилище справа (94.4 %, 56.8 %), огни острова (50 %, 56.8 %), лунная дорожка
   (51.2 %, 70.5 %), отражение ворот (71.2 %, 70 %); день (data-theme="heaven") — солнце у левого края (2 %, 36 %).
   Исходники и скрипт — исходники_фона\ (s1_upscale.py); прежние картинки — было_сакура_1\, ада и рая — было_ад_и_рай\ */

/* ===== НОЧЬ ===== */
/* сияние вокруг луны медленно «дышит» */
.sk-moon {
    left: 48.9%; top: 16.7%;
    width: 16%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 250, 235, .55) 0%, rgba(220, 225, 255, .22) 18%, rgba(160, 170, 255, .08) 38%, transparent 62%);
    mix-blend-mode: screen;
    animation: skBreath 7s ease-in-out infinite;
}
/* тёплые фонари у ворот, святилища и огни острова мерцают, как свечи */
.sk-lamp {
    width: 3.2%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 214, 140, .75) 0%, rgba(255, 150, 70, .32) 22%, rgba(255, 110, 60, .1) 45%, transparent 68%);
    mix-blend-mode: screen;
    animation: skFlicker 2.6s ease-in-out infinite alternate;
}
/* дорожка луны и отражение ворот на воде переливаются */
.sk-water {
    left: 51.2%; top: 70.5%;
    width: 5%;
    height: 21%;
    transform: translate(-50%, -50%);
    background: repeating-linear-gradient(180deg, rgba(255, 245, 220, .5) 0 2px, transparent 2px 9px);
    -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000 0%, transparent 100%);
            mask-image: radial-gradient(50% 50% at 50% 50%, #000 0%, transparent 100%);
    mix-blend-mode: screen;
    animation: skShimmer 3.2s ease-in-out infinite;
}

/* ===== ДЕНЬ ===== */
/* солнце светит из-за левого края: мягкое сияние */
.sk-sun {
    left: 2%; top: 36%;
    width: 60%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 252, 235, .55) 0%, rgba(255, 228, 220, .22) 25%, transparent 60%);
    mix-blend-mode: screen;
    animation: skBreath 9s ease-in-out infinite;
}
/* лучи света от солнца слева */
.sk-rays {
    left: 2%; top: 36%;
    width: 90%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .16) 0deg 4deg, transparent 4deg 16deg);
    -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 60%);
            mask-image: radial-gradient(circle, #000 0%, transparent 60%);
    mix-blend-mode: screen;
    animation: skRays 120s linear infinite;
}

/* ===== ОБА ===== */
/* дымка у подножия горы медленно плывёт (одна бесшовная текстура едет по кругу) */
.sk-mist {
    left: 0; top: 41%;
    width: 100%;
    height: 18%;
    overflow: hidden;
    opacity: .4;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%, #000 65%, transparent);
            mask-image: linear-gradient(180deg, transparent, #000 35%, #000 65%, transparent);
}
.sk-mist::before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 200%;
    height: 100%;
    background: var(--asset-fx-smoke, url("../img/fx-smoke.webp")) 0 0 / 50% 100% repeat-x;
    animation: skDrift 140s linear infinite;
}
.scene__world--hell .sk-mist { opacity: .22; filter: hue-rotate(200deg) brightness(.8); }
@keyframes skBreath { 0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(.97); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } }
@keyframes skFlicker { 0% { opacity: .65; } 40% { opacity: 1; } 55% { opacity: .8; } 100% { opacity: .95; } }
@keyframes skShimmer { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scaleX(.94); } 50% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.06); } }
@keyframes skRays { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes skDrift { to { transform: translateX(-50%); } }

/* Лёгкий фон (с 16.10.2026): на экране, который выше, чем шире (телефон, планшет «стоя»), видна только середина
   картинки — не больше 46 % её ширины (параллакс ±14 px — с запасом). Грузится середина (50 % ширины, вся высота,
   те же пиксели, WebP): bg-hell-m.webp (ночь), bg-heaven-m.webp (день) — с 30.10.2026 сакура: 0,55 → 0,15 МБ и 0,46 → 0,11.
   Она ложится ровно на свои 50 %, края картинки за экраном пустые. Тот же порог — sceneSrc() в fx.js.
   С 30.10.2026 (фоны владельца: ворота тории справа, на 63…77 % ширины) кусок — не середина, а 45…95 %, и весь фон со
   слоями сдвинут на 20 % влево: посередине «стоячего» экрана — ворота (иначе на телефоне было бы одно небо) */
@media (max-aspect-ratio: 17 / 20) {
    .scene__world--hell   { --img: url("bg-hell-m.webp"); }
    .scene__world--heaven { --img: url("bg-heaven-m.webp"); }
    .scene__zoom { inset: 0 20% 0 -20%; }
    .scene__img { background-size: 50% 100%; background-position: 90% 0; }
}
.scene__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Дымка / облака внизу */
.scene__fog {
    position: absolute;
    left: -50%;
    width: 200%;
    bottom: -6vh;
    height: 38vh;
    z-index: 4;
    background:
        radial-gradient(18% 60% at 10% 70%, rgba(var(--fog-color), .55), transparent 70%),
        radial-gradient(22% 50% at 32% 80%, rgba(var(--fog-color), .45), transparent 70%),
        radial-gradient(16% 60% at 55% 75%, rgba(var(--fog-color), .5), transparent 70%),
        radial-gradient(24% 55% at 78% 85%, rgba(var(--fog-color), .45), transparent 70%),
        radial-gradient(14% 50% at 95% 70%, rgba(var(--fog-color), .5), transparent 70%);
    animation: drift 60s linear infinite;
}
.scene__fog--front {
    z-index: 5;
    height: 26vh;
    opacity: .7;
    animation-duration: 38s;
    animation-direction: reverse;
    background:
        radial-gradient(20% 60% at 20% 90%, rgba(var(--fog-hi), .22), transparent 70%),
        radial-gradient(18% 50% at 60% 95%, rgba(var(--fog-color), .5), transparent 70%),
        radial-gradient(24% 60% at 88% 90%, rgba(var(--fog-hi), .18), transparent 70%);
}
:root[data-theme="heaven"] .scene__fog { opacity: .95; }
:root[data-theme="heaven"] .scene__fog--front { opacity: .85; }

.scene__vignette {
    position: absolute;
    inset: 0;
    z-index: 6;
}
:root[data-theme="hell"] .scene__vignette {
    background:
        radial-gradient(120% 90% at 50% 38%, transparent 50%, rgba(5, 3, 15, .65) 100%),
        linear-gradient(180deg, rgba(8, 6, 20, .35) 0%, transparent 14%, transparent 78%, rgba(13, 10, 28, .65) 100%);
}
:root[data-theme="heaven"] .scene__vignette {
    background:
        radial-gradient(120% 90% at 50% 40%, transparent 58%, rgba(160, 60, 100, .18) 100%),
        linear-gradient(180deg, rgba(255, 245, 247, .35) 0%, transparent 14%);
}

.front-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
    pointer-events: none;
}
.flash {
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    opacity: 0;
}
:root[data-theme="hell"] .flash { background: radial-gradient(120% 100% at 50% 20%, rgba(120, 90, 200, .5), rgba(10, 6, 30, .4)); }
:root[data-theme="heaven"] .flash { background: radial-gradient(120% 100% at 50% 30%, rgba(255, 255, 255, .95), rgba(255, 220, 232, .6)); }
.flash.is-on { animation: flash .7s ease-out; }

.toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 50;
    padding: 11px 18px;
    border-radius: 12px;
    background: var(--bubble-bg);
    border: 1px solid var(--bubble-border);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6);
    transform: translate(-50%, 20px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease, transform .4s var(--ease-out);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Плавная смена темы (круг от переключателя) */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 9999; }
/* Сам круг и есть переход: в момент смены мира «кругом» переходы CSS выключены (fx.js, applyTheme;
   15.10.2026). Иначе ~95 переходов цвета и скруглений (цвет текста у body наследуют все элементы,
   у панелей — скругление с размытием фона) каждый кадр пересчитывали стили и перерисовывали страницу,
   пока растёт круг, — смена мира подлагивала */
:root.is-switching,
:root.is-switching *,
:root.is-switching *::before,
:root.is-switching *::after { transition: none !important; }
@keyframes flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- 24. Облегчённый режим для слабых компьютеров (включается сам) ----------
   fx.js всё время следит за частотой кадров и, если не тянет, понижает уровень:
   .is-lite — без размытия панелей, без самых тяжёлых слоёв фона, частиц вдвое меньше;
   .is-min (вместе с .is-lite) — фон почти неподвижный, частиц вчетверо меньше.
   Уровень можно задать и вручную: адрес ?fx=0 (всё) … ?fx=3 (минимум) */
.is-lite :is(.panel, .chatline, .btn--ghost, .theme-switch, .modal, .menu-overlay, .subhead__back, .subnav, .field input, .field select) { -webkit-backdrop-filter: none; backdrop-filter: none; }
:root.is-lite[data-theme="hell"] { --panel-bg: linear-gradient(180deg, rgba(30, 23, 58, .92), rgba(16, 12, 34, .9)); }
:root.is-lite[data-theme="heaven"] { --panel-bg: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 246, 249, .88)); }
/* на слабых компьютерах — без самых тяжёлых слоёв фона */
.is-lite :is(.sk-mist, .sk-rays, .sk-water) { display: none; }
.is-min .scene__zoom > :not(.scene__img) { display: none; }
.is-min .scene__fog { animation: none; }
.is-min .panel::after { animation: none; }

/* ---------- 25. Для тех, у кого отключены анимации в системе ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

:root[data-theme="hell"]:not(.page-home) .scene__vignette {
    background: linear-gradient(90deg, rgba(14, 10, 30, .6) 0%, rgba(14, 10, 30, .28) 45%, rgba(14, 10, 30, .12) 100%),
                linear-gradient(180deg, rgba(14, 10, 30, .1) 0%, rgba(14, 10, 30, .3) 32%, rgba(14, 10, 30, .82) 70%, #0d0a1c 100%);
}
:root[data-theme="heaven"]:not(.page-home) .scene__vignette {
    background: linear-gradient(90deg, rgba(255, 244, 247, .62) 0%, rgba(255, 244, 247, .2) 50%, rgba(255, 244, 247, 0) 100%),
                linear-gradient(180deg, rgba(255, 244, 247, 0) 26%, rgba(255, 244, 247, .72) 62%, #fff5f7 100%);
}
:root:not(.page-home) .scene__fog { display: none; }
/* лучи из-за ворот днём — мягче */
.sk-rays { opacity: .55; }