/* Слои сцены: статичная разметка в шаблоне (sky, sun, mountains, lighthouse,
 * sea), динамические частицы (stars, clouds, precipitation, wind) — JS-host'ы
 * с пустыми контейнерами, наполняемые scene/index.js.
 *
 * Все слои используют CSS-переменные из scene-palette.css. Видимость
 * управляется селекторами по [data-state] / [data-phase] на корневом
 * элементе [data-weather-scene]. */

/* ───────── базовый контейнер ───────── */

.scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg,
    var(--sky-top) 0%,
    var(--sky-mid) 55%,
    var(--sky-bot) 100%);
  transition: background 1.2s ease;
}

/* Поверх сцены живёт страница; интерактивные слои (море, маяк) поднимем
 * через pointer-events ниже. */

/* ───────── небесные тела ───────── */

.scene__sun {
  --sun-x: 72%;
  --sun-y: 18%;
  --sun-size: 110px;
  position: absolute;
  left: var(--sun-x);
  top: var(--sun-y);
  width: var(--sun-size);
  height: var(--sun-size);
  transform: translate(-50%, -50%) translate(
    calc(var(--parallax-x, 0) * 4px),
    calc(var(--parallax-y, 0) * 4px));
  transition: left 1.2s ease, top 1.2s ease, opacity 0.8s ease, filter 0.8s ease;
}

[data-weather-scene][data-phase="dawn"] .scene__sun {
  --sun-x: 18%; --sun-y: 40%; --sun-size: 90px;
}
[data-weather-scene][data-phase="day"] .scene__sun {
  --sun-x: 72%; --sun-y: 18%; --sun-size: 110px;
}
[data-weather-scene][data-phase="dusk"] .scene__sun {
  --sun-x: 82%; --sun-y: 55%; --sun-size: 120px;
}
[data-weather-scene][data-phase="night"] .scene__sun {
  --sun-x: 28%; --sun-y: 22%; --sun-size: 70px;
}

[data-weather-scene][data-state="fog"] .scene__sun,
[data-weather-scene][data-state="thunderstorm"] .scene__sun,
[data-weather-scene][data-state="snow"] .scene__sun {
  opacity: 0.25;
}

/* В прототипе при cloudy солнце получает blur — у нас это эквивалент
 * partly_cloudy + общая «не пасмурная» облачность. */
[data-weather-scene][data-state="partly_cloudy"] .scene__sun { filter: blur(4px); }

.sun__glow {
  position: absolute;
  inset: -80%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sun-glow) 0%, transparent 65%);
}

.sun__disk {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 40px var(--sun-glow);
}

.sun__crater {
  position: absolute;
  border-radius: 50%;
  background: rgba(180, 190, 220, 0.45);
  display: none;
}

[data-weather-scene][data-phase="night"] .sun__crater { display: block; }

.sun__crater--1 { left: 18%; top: 22%; width: 14px; height: 14px; opacity: 0.5; }
.sun__crater--2 { left: 55%; top: 60%; width: 10px; height: 10px; opacity: 0.4; }
.sun__crater--3 { left: 35%; top: 55%; width: 6px;  height: 6px;  opacity: 0.35; }

/* ───────── звёзды (JS-host) ───────── */

.scene__stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
  transform: translate(
    calc(var(--parallax-x, 0) * 8px),
    calc(var(--parallax-y, 0) * 8px));
}

[data-weather-scene][data-phase="night"] .scene__stars { opacity: 1; }

.scene__star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation:
    starTwinkle var(--twinkle-dur, 3s) ease-in-out var(--twinkle-delay, 0s) infinite,
    starDrift   var(--drift-dur, 30s) linear infinite;
}

.scene__shooting-star {
  position: absolute;
  top: 15%;
  left: -10%;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
  animation: shootingStar 11s linear infinite;
  transform: rotate(20deg);
}

/* ───────── облака (JS-host) ───────── */

.scene__clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.scene__cloud {
  position: absolute;
  animation: cloudDrift var(--cloud-speed, 100s) linear var(--cloud-delay, 0s) infinite;
  transition: opacity 1s ease;
  transform: translate(
    calc(var(--parallax-x, 0) * var(--cloud-depth, 1) * 10px),
    calc(var(--parallax-y, 0) * var(--cloud-depth, 1) * 4px));
}

.cloud__base {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  filter: blur(8px);
  background: radial-gradient(ellipse,
    rgba(var(--cloud-light-rgb), 0.9),
    rgba(var(--cloud-light-rgb), 0.4) 70%,
    transparent);
}

.cloud__hi {
  position: absolute;
  left: 20%; top: 20%; right: 10%; bottom: 10%;
  border-radius: 50%;
  filter: blur(6px);
  background: radial-gradient(ellipse,
    rgba(var(--cloud-light-hi-rgb), 0.95),
    transparent 70%);
}

/* «Тёмные» облака для дождя/грозы/пасмурно. */
[data-weather-scene][data-state="rain"] .cloud__base,
[data-weather-scene][data-state="thunderstorm"] .cloud__base,
[data-weather-scene][data-state="overcast"] .cloud__base {
  background: radial-gradient(ellipse,
    rgba(var(--cloud-dark-rgb), 0.8),
    rgba(var(--cloud-dark-rgb), 0.3) 70%,
    transparent);
}

[data-weather-scene][data-state="rain"] .cloud__hi,
[data-weather-scene][data-state="thunderstorm"] .cloud__hi,
[data-weather-scene][data-state="overcast"] .cloud__hi {
  background: radial-gradient(ellipse,
    rgba(var(--cloud-mid-rgb), 0.9),
    transparent 70%);
}

/* ───────── туман ───────── */

.scene__fog {
  position: absolute;
  left: 0; right: 0;
  bottom: 30%;
  height: 50%;
  pointer-events: none;
  filter: blur(6px);
  opacity: 0.25;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--fog) 30%,
    var(--fog) 70%,
    transparent 100%);
  transition: opacity 1s ease;
}

[data-weather-scene][data-state="fog"] .scene__fog { opacity: 0.9; }

/* ───────── мыс с городом и маяком ───────── */

.scene__cape {
  position: absolute;
  left: 0; right: 0;
  bottom: 28%;
  height: 90px;
  pointer-events: none;
  z-index: 6;
}

.cape__svg {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 100%;
}

.cape__silhouette       { fill: var(--silhouette); }
.cape__silhouette--far  { fill: var(--silhouette); opacity: 0.55; }
.cape__house            { fill: var(--silhouette); }
.cape__window           { fill: var(--accent); opacity: 0; }

/* Окна загораются вечером и ночью. */
[data-weather-scene][data-phase="dusk"]  .cape__window,
[data-weather-scene][data-phase="night"] .cape__window {
  animation: windowFlicker var(--window-dur, 4s) ease-in-out var(--window-delay, 0s) infinite;
}

/* ───────── маяк ───────── */

.lighthouse {
  position: absolute;
  right: 22%;
  bottom: 22px;
  width: 22px;
  height: 56px;
  cursor: pointer;
  pointer-events: auto;
  z-index: 5;
}

/* Луч маяка: треугольник через borders, точка вращения у фонаря. */
.lighthouse__beam-host {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 1400px;
  height: 1400px;
  transform: translate(-50%, -50%) scaleY(0.2);
  pointer-events: none;
  opacity: 0.15;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.lighthouse--pulse .lighthouse__beam-host { opacity: 0.22; }

.lighthouse__beam {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  border-left: 58px solid transparent;
  border-right: 58px solid transparent;
  border-bottom: 820px solid var(--light-beam);
  transform-origin: 50% 0%;
  filter: blur(6px);
  mix-blend-mode: screen;
  animation: lighthouseSpinDown 10s linear infinite;
}

.lighthouse--pulse .lighthouse__beam { filter: blur(4px); }

/* Lens flare на самом фонаре — два слоя. */
.lighthouse__flare,
.lighthouse__flare-bar {
  position: absolute;
  left: 50%;
  top: 10px;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: lighthouseFlare 10s ease-in-out infinite;
  z-index: 2;
}

.lighthouse__flare {
  width: 120px; height: 120px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent) 87%, transparent) 0%,
    var(--light-beam) 30%,
    transparent 65%);
}

.lighthouse__flare-bar {
  width: 180px; height: 3px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  filter: blur(1px);
}

.lighthouse__tower-svg {
  position: absolute;
  inset: 0;
}

.lighthouse__base    { fill: var(--silhouette); }
.lighthouse__shaft   { fill: #f4f1ea; opacity: 0.95; }
.lighthouse__stripe  { fill: #c94b3c; opacity: 0.9; }
.lighthouse__gallery { fill: var(--silhouette); }
.lighthouse__cabin   { fill: #f4f1ea; opacity: 0.9; }
.lighthouse__lantern { fill: var(--accent); animation: lanternIdle 1.8s ease-in-out infinite; }
.lighthouse__roof    { fill: var(--silhouette); }

.lighthouse--pulse .lighthouse__lantern {
  animation: lanternIdle 0.4s ease-in-out infinite;
}

/* Вспышка по тапу. */
.lighthouse__pulse {
  position: absolute;
  left: 50%; top: 8px;
  width: 60px; height: 60px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent), transparent 70%);
  pointer-events: none;
  animation: lighthousePulse 0.6s ease-out;
}

/* ───────── море ───────── */

.scene__sea {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 28%;
  background: linear-gradient(180deg, var(--sea-2) 0%, var(--sea-1) 100%);
  overflow: hidden;
  pointer-events: auto;
  cursor: pointer;
  z-index: 4;
}

.sea__shine {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 40%;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--sun) 15%, transparent) 0%,
    transparent 100%);
  mix-blend-mode: screen;
  opacity: 0.7;
}

.sea__waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sea__foam {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  height: 6px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.35));
  /* Интенсивность пены растёт с ветром (var --scene-wind 0..1). */
  opacity: calc(0.5 + var(--scene-wind, 0) * 1);
  pointer-events: none;
}

.sea__beam-track {
  position: absolute;
  right: 22%;
  top: -10px;
  width: 200px;
  height: 120%;
  transform: translateX(calc(50% - 14px));
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  mix-blend-mode: screen;
  animation: seaGlimmer 10s ease-in-out infinite;
}

.sea__glimmer-dash {
  position: absolute;
  height: 2px;
  border-radius: 2px;
  filter: blur(1px);
  background: linear-gradient(90deg,
    transparent,
    var(--light-beam),
    var(--accent),
    var(--light-beam),
    transparent);
  animation: glimmerDash 1.8s ease-in-out var(--dash-delay, 0s) infinite;
}

/* Рябь от тапов (JS добавляет элементы). */
.sea__ripple {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.9);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: rippleExpand 1.8s ease-out forwards;
}

/* ───────── осадки (JS-host) ───────── */

.scene__precipitation {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.precip__drop {
  position: absolute;
  top: -20px;
  width: 1px;
  height: 18px;
  background: linear-gradient(180deg, transparent, rgba(200,220,255, var(--drop-opacity, 0.6)));
  animation: rainfall var(--drop-dur, 0.8s) linear var(--drop-delay, 0s) infinite;
}

.precip__flake {
  position: absolute;
  top: -20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 3px rgba(255,255,255,0.7);
  animation:
    snowfall var(--flake-fall-dur, 10s) linear var(--flake-delay, 0s) infinite,
    snowSway var(--flake-sway-dur, 7s) ease-in-out infinite;
}

/* ───────── молния ───────── */

.scene__lightning {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

[data-weather-scene][data-state="thunderstorm"] .scene__lightning {
  animation: lightningFlash 7s linear infinite;
}

/* ───────── частицы ветра (JS-host) ───────── */

.scene__wind {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

.wind__streak {
  position: absolute;
  left: -10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: windBlow var(--wind-dur, 2s) linear var(--wind-delay, 0s) infinite;
}