/* ============================================================
   СНТ «Черёмуха» — движок тем: СЕЗОН × ВРЕМЯ СУТОК
   Время суток задаёт атмосферу (небо, свет, бумагу/чернила).
   Сезон задаёт оттенки природы (листва, акцент, частицы).
   Всё на CSS-переменных + oklch для гармонии.
   ============================================================ */

:root {
  color-scheme: light;

  /* — нейтральная типографика/радиусы (не зависят от темы) — */
  --font-display: "Lora", Georgia, "Times New Roman", serif;
  --font-ui: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 26px;
  --r-xl: 38px;
  --r-pill: 999px;

  --maxw: 1180px;
  --gut: clamp(18px, 5vw, 56px);

  --ease: cubic-bezier(.22, 1, .36, .08);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);

  /* — значения по умолчанию (день / весна), переопределяются ниже — */
  --paper:      oklch(97.5% 0.018 95);
  --paper-2:    oklch(95% 0.03 95);
  --card:       oklch(99% 0.012 95);
  --card-2:     oklch(96.5% 0.02 100);
  --ink:        oklch(28% 0.03 60);
  --ink-soft:   oklch(45% 0.03 65);
  --ink-faint:  oklch(60% 0.025 70);
  --border:     oklch(88% 0.02 90);
  --border-2:   oklch(82% 0.03 90);

  --accent:     oklch(58% 0.13 145);
  --accent-ink: oklch(34% 0.10 150);
  --accent-soft:oklch(92% 0.06 145);
  --on-accent:  oklch(99% 0.01 145);

  --leaf:       oklch(62% 0.14 145);
  --foliage:    oklch(70% 0.15 140);
  --foliage-2:  oklch(60% 0.13 150);
  --ground:     oklch(72% 0.08 120);
  --bloom:      oklch(98% 0.02 350);   /* цвет соцветий черёмухи */

  --sky-top:    oklch(86% 0.07 230);
  --sky-mid:    oklch(93% 0.05 210);
  --sky-low:    oklch(97% 0.04 120);
  --celest:     oklch(96% 0.10 95);    /* солнце/луна */
  --celest-glow:oklch(92% 0.13 95 / .8);
  --celest-x:   78%;
  --celest-y:   30%;
  --cloud:      oklch(99% 0.012 240 / .92);

  --atmosphere: oklch(95% 0.04 90 / 0);  /* воздушная дымка-оверлей */
  --scene-bright: 1;
  --scene-sat: 1;

  --lamp:       oklch(85% 0.12 85 / 0);  /* «ламповое» свечение, видно ночью */
  --shadow:     0 1px 2px oklch(30% 0.04 80 / .06), 0 8px 24px oklch(30% 0.05 80 / .08);
  --shadow-lg:  0 2px 6px oklch(30% 0.04 80 / .08), 0 24px 60px oklch(30% 0.06 80 / .14);

  --particle: petal; /* подсказка для JS: petal | firefly | leaf | snow */
  --spark: oklch(88% 0.12 145); /* искры по контуру кнопок — по сезону */
}

/* ============================================================
   ВРЕМЯ СУТОК — атмосфера, небо, светило, бумага/чернила
   ============================================================ */

/* — РАССВЕТ — */
:root[data-time="dawn"] {
  --paper:    oklch(96% 0.03 50);
  --paper-2:  oklch(93% 0.05 45);
  --card:     oklch(98.5% 0.02 55);
  --card-2:   oklch(95% 0.035 50);
  --ink:      oklch(33% 0.05 40);
  --ink-soft: oklch(48% 0.05 45);
  --ink-faint:oklch(62% 0.04 50);
  --border:   oklch(89% 0.035 50);
  --border-2: oklch(83% 0.05 48);

  --sky-top:  oklch(72% 0.10 300);
  --sky-mid:  oklch(85% 0.10 30);
  --sky-low:  oklch(93% 0.09 60);
  --celest:   oklch(94% 0.09 60);
  --celest-glow: oklch(88% 0.14 45 / .85);
  --celest-x: 24%;
  --celest-y: 58%;
  --cloud: oklch(96% 0.035 40 / .85);

  --atmosphere: oklch(86% 0.09 35 / .22);
  --scene-bright: .98;
  --scene-sat: 1.02;
  --shadow:    0 1px 2px oklch(35% 0.05 40 / .07), 0 8px 24px oklch(35% 0.06 40 / .10);
}

/* — ДЕНЬ — */
:root[data-time="day"] {
  /* совпадает с :root по умолчанию, явно для надёжности */
  --paper:    oklch(97.8% 0.016 95);
  --ink:      oklch(27% 0.03 60);
  --sky-top:  oklch(70% 0.11 235);
  --sky-mid:  oklch(86% 0.07 225);
  --sky-low:  oklch(95% 0.05 200);
  --celest:   oklch(98% 0.08 100);
  --celest-glow: oklch(95% 0.12 100 / .7);
  --celest-x: 76%;
  --celest-y: 24%;
  --atmosphere: oklch(95% 0.05 200 / .04);
  --scene-bright: 1.03;
  --scene-sat: 1.05;
}

/* — ЗАКАТ — */
:root[data-time="dusk"] {
  --paper:    oklch(95% 0.035 65);
  --paper-2:  oklch(91% 0.055 55);
  --card:     oklch(97.5% 0.025 65);
  --card-2:   oklch(94% 0.04 60);
  --ink:      oklch(32% 0.045 45);
  --ink-soft: oklch(47% 0.045 50);
  --ink-faint:oklch(60% 0.04 55);
  --border:   oklch(87% 0.045 55);
  --border-2: oklch(80% 0.06 52);

  --sky-top:  oklch(55% 0.13 295);
  --sky-mid:  oklch(74% 0.14 35);
  --sky-low:  oklch(86% 0.13 65);
  --celest:   oklch(86% 0.15 55);
  --celest-glow: oklch(78% 0.17 45 / .9);
  --celest-x: 80%;
  --celest-y: 62%;
  --cloud: oklch(90% 0.06 45 / .82);

  --atmosphere: oklch(74% 0.14 45 / .28);
  --scene-bright: .95;
  --scene-sat: 1.08;
  --lamp: oklch(83% 0.13 80 / .35);
  --shadow:    0 1px 2px oklch(30% 0.06 40 / .10), 0 10px 30px oklch(28% 0.08 35 / .16);
}

/* — НОЧЬ — «ламповый» тёплый свет в тёмном мире — */
:root[data-time="night"] {
  color-scheme: dark;
  --paper:    oklch(22% 0.035 265);
  --paper-2:  oklch(26% 0.045 265);
  --card:     oklch(28% 0.04 265);
  --card-2:   oklch(32% 0.05 265);
  --ink:      oklch(93% 0.02 80);
  --ink-soft: oklch(80% 0.025 75);
  --ink-faint:oklch(66% 0.03 70);
  --border:   oklch(38% 0.04 265);
  --border-2: oklch(46% 0.05 265);
  --on-accent:   oklch(18% 0.03 265);

  --sky-top:  oklch(20% 0.06 270);
  --sky-mid:  oklch(28% 0.07 275);
  --sky-low:  oklch(36% 0.06 285);
  --celest:   oklch(94% 0.03 250);
  --celest-glow: oklch(90% 0.07 250 / .62);
  --celest-x: 26%;
  --celest-y: 165px;

  --atmosphere: oklch(22% 0.07 275 / .42);
  --scene-bright: .82;
  --scene-sat: .9;
  --lamp: oklch(82% 0.14 80 / .9);
  --shadow:    0 1px 2px oklch(10% 0.04 270 / .5), 0 16px 44px oklch(8% 0.05 270 / .55);
  --shadow-lg: 0 2px 8px oklch(10% 0.04 270 / .5), 0 30px 70px oklch(6% 0.05 270 / .6);
}

/* ============================================================
   СЕЗОН — оттенки природы, акцент, тип частиц
   (применяются поверх времени суток)
   ============================================================ */

/* — ВЕСНА: цветение черёмухи — */
:root[data-season="spring"] {
  --accent:     oklch(60% 0.13 145);
  --accent-ink: oklch(36% 0.10 150);
  --leaf:       oklch(66% 0.15 142);
  --foliage:    oklch(74% 0.13 138);
  --foliage-2:  oklch(64% 0.14 150);
  --ground:     oklch(74% 0.09 125);
  --bloom:      oklch(98% 0.015 350);
  --particle:   petal;
}
:root[data-season="spring"][data-time="night"] { --accent: oklch(72% 0.12 148); }

/* — ЛЕТО: густая зелень, тёплое солнце — */
:root[data-season="summer"] {
  --accent:     oklch(56% 0.15 155);
  --accent-ink: oklch(33% 0.11 158);
  --leaf:       oklch(58% 0.16 150);
  --foliage:    oklch(62% 0.16 148);
  --foliage-2:  oklch(52% 0.15 158);
  --ground:     oklch(70% 0.13 128);
  --bloom:      oklch(88% 0.10 130);
  --particle:   firefly;
  --spark: oklch(80% 0.18 145);
}
:root[data-season="summer"][data-time="night"] { --accent: oklch(74% 0.13 150); }

/* — ОСЕНЬ: золото и багрянец — */
:root[data-season="autumn"] {
  --accent:     oklch(58% 0.15 55);
  --accent-ink: oklch(40% 0.13 50);
  --leaf:       oklch(66% 0.15 60);
  --foliage:    oklch(68% 0.15 65);
  --foliage-2:  oklch(58% 0.16 40);
  --ground:     oklch(64% 0.11 70);
  --bloom:      oklch(72% 0.16 45);
  --particle:   leaf;
  --spark: oklch(88% 0.16 95);
}
:root[data-season="autumn"][data-time="night"] { --accent: oklch(74% 0.13 62); }

/* — ЗИМА: иней, тихий снег, тёплая лампа — */
:root[data-season="winter"] {
  --accent:     oklch(55% 0.10 240);
  --accent-ink: oklch(38% 0.09 245);
  --leaf:       oklch(72% 0.04 240);
  --foliage:    oklch(80% 0.03 235);
  --foliage-2:  oklch(70% 0.04 245);
  --ground:     oklch(94% 0.01 250);
  --bloom:      oklch(99% 0.005 250);
  --particle:   snow;
  --spark: oklch(99% 0.02 250);
}
:root[data-season="winter"][data-time="day"] {
  --sky-top: oklch(78% 0.05 235);
  --sky-mid: oklch(90% 0.03 230);
  --sky-low: oklch(96% 0.015 250);
}
:root[data-season="winter"][data-time="night"] { --accent: oklch(78% 0.10 235); }

/* Ночью: акцент-текст и подложки светлеют и держат сезонный оттенок.
   Двойной атрибут поднимает приоритет выше сезонных блоков. */
:root[data-time="night"][data-time="night"] {
  --accent-ink:  color-mix(in oklab, var(--accent), white 24%);
  --accent-soft: color-mix(in oklab, var(--accent) 26%, var(--card));
}

/* плавные межтемовые переходы (кроме тех, кто против движения) */
@media (prefers-reduced-motion: no-preference) {
  body, .surface, .card, .hero, .scene, .btn, .topbar {
    transition: background-color .9s var(--ease-soft),
                color .9s var(--ease-soft),
                border-color .9s var(--ease-soft);
  }
}

/* ============================================================
   СЦЕНА-ГЕРОЙ — слоистый пейзаж (небо, светило, холмы, черёмухи)
   ============================================================ */

.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  filter: brightness(var(--scene-bright)) saturate(var(--scene-sat));
  transition: filter .9s var(--ease-soft);
}

.scene__sky {
  position: absolute;
  inset: -3%;
  background:
    radial-gradient(120% 80% at var(--celest-x) var(--celest-y),
        var(--celest-glow), transparent 46%),
    linear-gradient(to bottom, var(--sky-top) 0%, var(--sky-mid) 52%, var(--sky-low) 100%);
  transition: background 1.2s var(--ease-soft);
}

/* мелкие звёзды — проявляются только ночью */
.scene__stars {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease-soft);
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, white, transparent),
    radial-gradient(1.2px 1.2px at 28% 32%, white, transparent),
    radial-gradient(1.6px 1.6px at 45% 12%, white, transparent),
    radial-gradient(1.1px 1.1px at 62% 26%, white, transparent),
    radial-gradient(1.5px 1.5px at 73% 9%, white, transparent),
    radial-gradient(1.2px 1.2px at 86% 22%, white, transparent),
    radial-gradient(1.3px 1.3px at 94% 38%, white, transparent),
    radial-gradient(1.1px 1.1px at 8% 42%, white, transparent),
    radial-gradient(1.4px 1.4px at 38% 44%, white, transparent),
    radial-gradient(1.2px 1.2px at 55% 40%, white, transparent);
}
:root[data-time="night"] .scene__stars { opacity: .9; animation: twinkle 5s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }

/* светило */
.scene__celest {
  position: absolute;
  left: var(--celest-x);
  top: var(--celest-y);
  width: clamp(64px, 11vw, 150px);
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(circle at 38% 36%, white, var(--celest) 62%, transparent 72%);
  filter: drop-shadow(0 0 16px var(--celest-glow)) drop-shadow(0 0 40px var(--celest-glow));
  transition: background 1.2s var(--ease-soft), filter 1.2s var(--ease-soft);
}
/* лунный серп ночью: маска «выкусывает» диск, а свечение через drop-shadow
   следует за формой серпа — никакого лишнего круга не остаётся */
:root[data-time="night"] .scene__celest {
  width: clamp(96px, 13vw, 180px);
  -webkit-mask: radial-gradient(circle at 72% 26%, transparent 0 40%, #000 41%);
  mask: radial-gradient(circle at 72% 26%, transparent 0 40%, #000 41%);
}

/* ---- облака (днём/на рассвете/закате; ночью прячутся) ---- */
.scene__clouds {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
}
/* прозрачностью облаков (день/ночь) управляет scene.js плавным lerp */
.cloud {
  position: absolute;
  width: 1px; height: 1px;
  will-change: transform;
  filter: drop-shadow(0 10px 12px oklch(55% 0.05 250 / .14));
}
.cloud .puff {
  position: absolute;
  border-radius: 50%;
  background: var(--cloud);
  transition: background 1.1s var(--ease-soft);
}

/* холмы */
.scene__hills { position: absolute; inset: 0; }
.scene__hill {
  position: absolute;
  left: -5%;
  right: -5%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.scene__hill--back {
  bottom: 18%;
  height: 34%;
  background: color-mix(in oklab, var(--foliage) 70%, var(--sky-low));
  filter: blur(1px);
}
.scene__hill--mid {
  bottom: 8%;
  height: 40%;
  left: -20%; right: 35%;
  background: color-mix(in oklab, var(--foliage-2) 84%, black 4%);
}
.scene__hill--front {
  bottom: 0;
  height: 30%;
  left: 28%; right: -20%;
  background: var(--ground);
}

/* атмосферная дымка поверх всего пейзажа */
.scene__haze {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, var(--atmosphere));
  mix-blend-mode: multiply;
  transition: background 1.2s var(--ease-soft);
}
:root[data-time="night"] .scene__haze { mix-blend-mode: screen; }

/* мягкое «приземление» сцены к контенту */
.scene__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 56%, var(--paper) 99%);
  transition: background .9s var(--ease-soft);
}

/* силуэты черёмух на переднем плане */
.scene__trees {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 56%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-inline: clamp(8px, 4vw, 60px);
  pointer-events: none;
}
.scene__trees svg { height: 100%; width: auto; opacity: .96; }
.tree-crown { fill: var(--foliage); }
.tree-crown-2 { fill: var(--foliage-2); }
.tree-trunk { fill: color-mix(in oklab, var(--ink) 55%, var(--ground)); }
.tree-bloom { fill: var(--bloom); }

/* ============================================================
   ЧАСТИЦЫ (лепестки / светлячки / листья / снег) — наполняет JS
   ============================================================ */
.particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.particle {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform, opacity;
}

/* лепесток черёмухи */
.p-petal {
  width: 11px; height: 8px;
  background: var(--bloom);
  border-radius: 60% 60% 60% 0;
  box-shadow: 0 0 0 1px oklch(90% 0.03 350 / .5) inset;
}
/* осенний лист */
.p-leaf {
  width: 13px; height: 13px;
  background: var(--foliage-2);
  border-radius: 0 60% 0 60%;
}
/* снежинка */
.p-snow {
  width: 8px; height: 8px;
  background: white;
  border-radius: 50%;
  filter: blur(.3px);
  box-shadow: 0 0 6px white;
}
/* светлячок (лето, ночь — особенно красиво) */
.p-firefly {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(95% 0.16 110), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .p-firefly { animation: glow 2.4s ease-in-out infinite; }
}
@keyframes glow { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }