/* ============================================================
   Ja'Dore – Saisonale Design-Tokens & Dekoration
   Die Basis-Gestaltung (index.html) verwendet ausschliesslich
   diese Variablen. Ein Saisonwechsel tauscht nur Werte aus.
   ============================================================ */

/* ---------- Herbst (Standard, aktuell aktiv) ---------- */
:root,
html[data-season="herbst"] {
  --bg:        #FBF6EF;   /* Creme */
  --bg2:       #F3E9DB;   /* Champagner */
  --bg3:       #EADBC8;   /* Beige */
  --ink:       #2A211C;   /* warmes Dunkelbraun */
  --ink2:      #6B5A4E;
  --ink3:      #A08C7C;
  --accent:    #B8784A;   /* Karamell */
  --accent-d:  #9A5F38;   /* Kupfer */
  --accent-l:  #E8CDB0;
  --gold:      #D6B88C;   /* Champagner-Gold */
  --dark:      #2A211C;
  --dark2:     #3A2C25;
  --brand:     #8ECFC3;   /* Ja'Dore Teal, dezenter Markenakzent */
  --line:      rgba(184,120,74,.22);
  --hero-tint-a: rgba(58,36,24,.62);
  --hero-tint-b: rgba(120,78,46,.28);
  --hero-tint-c: rgba(38,24,18,.78);
  --img-filter: saturate(.92) sepia(.12) contrast(1.02);
  --glow:      rgba(214,184,140,.35);
  --decor:     #B8784A;
  --p-opacity: .55;
}

/* ---------- Winter ---------- */
html[data-season="winter"] {
  --bg:        #FAF8F4;
  --bg2:       #F1ECE4;
  --bg3:       #E6DFD4;
  --ink:       #1F1E22;
  --ink2:      #5A5661;
  --ink3:      #9A959E;
  --accent:    #9C8A6C;   /* gedämpftes Champagner */
  --accent-d:  #6F6150;
  --accent-l:  #E3DBCB;
  --gold:      #D9CBB0;
  --dark:      #1C1B20;
  --dark2:     #2A2831;
  --brand:     #8ECFC3;
  --line:      rgba(156,138,108,.25);
  --hero-tint-a: rgba(22,24,32,.66);
  --hero-tint-b: rgba(90,86,97,.22);
  --hero-tint-c: rgba(16,16,22,.82);
  --img-filter: saturate(.85) contrast(1.04) brightness(1.02);
  --glow:      rgba(217,203,176,.4);
  --decor:     #D9CBB0;
  --p-opacity: .7;
}

/* ---------- Frühling ---------- */
html[data-season="fruehling"] {
  --bg:        #FCFAF7;
  --bg2:       #F6EFEA;
  --bg3:       #EFE3DE;
  --ink:       #27302E;
  --ink2:      #5E6B67;
  --ink3:      #9AA7A2;
  --accent:    #C98A8A;   /* zartes Rosé */
  --accent-d:  #A96D6D;
  --accent-l:  #F0D9D6;
  --gold:      #D8C5A3;
  --dark:      #22302C;
  --dark2:     #2F3F3A;
  --brand:     #8ECFC3;
  --line:      rgba(201,138,138,.25);
  --hero-tint-a: rgba(38,52,48,.55);
  --hero-tint-b: rgba(201,138,138,.18);
  --hero-tint-c: rgba(30,42,38,.72);
  --img-filter: saturate(1.02) brightness(1.04);
  --glow:      rgba(240,217,214,.45);
  --decor:     #D9A6A6;
  --p-opacity: .6;
}

/* ---------- Sommer ---------- */
html[data-season="sommer"] {
  --bg:        #FDFAF4;
  --bg2:       #F7EEDF;
  --bg3:       #EFE1CC;
  --ink:       #2B2622;
  --ink2:      #6B615A;
  --ink3:      #A89C92;
  --accent:    #C9A063;   /* Sand-Gold */
  --accent-d:  #A6804A;
  --accent-l:  #EEDFC2;
  --gold:      #E2C98F;
  --dark:      #2B2622;
  --dark2:     #3B342E;
  --brand:     #8ECFC3;
  --line:      rgba(201,160,99,.25);
  --hero-tint-a: rgba(60,46,30,.5);
  --hero-tint-b: rgba(226,201,143,.22);
  --hero-tint-c: rgba(40,30,22,.74);
  --img-filter: saturate(1.05) brightness(1.05) contrast(1.01);
  --glow:      rgba(226,201,143,.45);
  --decor:     #E2C98F;
  --p-opacity: .6;
}

/* ============================================================
   Dekorationselemente (vom season-engine.js erzeugt)
   ============================================================ */
.jd-decor {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden; pointer-events: none; contain: strict;
}
.jd-ornament {
  position: absolute; right: -40px; bottom: 90px;
  width: min(44vw, 520px); color: var(--gold); opacity: .22;
  mix-blend-mode: screen;
}
.jd-ornament svg { width: 100%; height: auto; display: block; }
html[data-season="fruehling"] .jd-ornament { right: auto; left: -30px; bottom: 120px; }
html[data-season="sommer"] .jd-ornament { right: 4vw; top: 10vh; bottom: auto; width: min(34vw, 420px); opacity: .18; }
html[data-season="winter"] .jd-ornament { right: 2vw; top: 14vh; bottom: auto; opacity: .2; }

.jd-p {
  position: absolute; top: -8%; left: var(--x, 50%);
  width: var(--s, 10px); height: var(--s, 10px);
  opacity: 0; color: var(--decor);
  animation: jd-drift var(--d, 24s) linear var(--delay, 0s) infinite;
  will-change: transform, opacity;
}
.jd-p svg { width: 100%; height: 100%; display: block; animation: jd-sway 7s ease-in-out infinite alternate; }

/* Bokeh / Licht / Lichtreflex: weiche runde Lichtpunkte */
.jd-decor--light .jd-p,
.jd-decor--sparkle .jd-p {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, var(--decor) 35%, transparent 70%);
  filter: blur(.6px);
  animation-name: jd-float;
  animation-duration: var(--d, 20s);
}
.jd-decor--sparkle .jd-p { box-shadow: 0 0 18px 4px var(--glow); }

.jd-decor.is-paused .jd-p, .jd-decor.is-paused .jd-p svg { animation-play-state: paused; }

@keyframes jd-drift {
  0%   { transform: translate3d(0,0,0) rotate(0deg); opacity: 0; }
  8%   { opacity: var(--p-opacity, .5); }
  85%  { opacity: calc(var(--p-opacity, .5) * .8); }
  100% { transform: translate3d(var(--dx, 40px), 115vh, 0) rotate(220deg); opacity: 0; }
}
@keyframes jd-float {
  0%   { transform: translate3d(0, 60vh, 0) scale(.6); opacity: 0; }
  15%  { opacity: var(--p-opacity, .5); }
  80%  { opacity: calc(var(--p-opacity, .5) * .7); }
  100% { transform: translate3d(var(--dx, 40px), -10vh, 0) scale(1.1); opacity: 0; }
}
@keyframes jd-sway {
  0%   { transform: translateX(-10px) rotate(-16deg); }
  100% { transform: translateX(10px) rotate(18deg); }
}

@media (max-width: 768px) {
  .jd-ornament { width: 70vw; right: -60px; bottom: 150px; opacity: .16; }
  .jd-p:nth-child(n+5) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .jd-p { display: none; }
}
@media print { .jd-decor { display: none !important; } }