/* ============================================================
   Yakuko Ramen: Editionen
   Die Website kennt drei Kleider. Umgeschaltet wird ueber
   data-edition am html-Element. "normal" braucht keine Regeln,
   das ist das Grundkleid aus style.css.
   ============================================================ */

/* ------------------------------------------------------------
   WINTER: kuehlere Farben, Frost, Schneefall
   ------------------------------------------------------------ */
html[data-edition="winter"] {
  --navy: #041838;
  --navy-2: #0B2050;
  --navy-3: #1B2C63;
  --rose: #E9B8BA;          /* Blassrosé als Frostton */
  --rose-deep: #D89EA2;
  --noren: #931725;         /* der Vorhang bleibt rot, bekommt aber Schnee */
  --ink: #FDF9F9;
  --ink-dim: #B7BCD2;
}

/* Frostiger Schimmer ueber dem Kopfbereich */
html[data-edition="winter"] .site-head {
  background: linear-gradient(to bottom, rgba(10,20,48,0.96), rgba(10,20,48,0));
  box-shadow: inset 0 1px 0 rgba(200,235,255,0.14);
}

/* Der Noren bekommt Schnee auf den Bahnen */
html[data-edition="winter"] .np-blatt {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.35) 5%, transparent 11%),
    linear-gradient(100deg, rgba(0,0,0,0.2) 0%, transparent 22%, transparent 78%, rgba(0,0,0,0.16) 100%),
    linear-gradient(180deg, #A93344 0%, var(--noren) 44%, #611527 100%);
}
html[data-edition="winter"] .noren-rod {
  background: linear-gradient(#F3E4E5, #C4AFB6 55%, #7C6470);
}

/* Eiszapfen unter der Stange */
html[data-edition="winter"] .noren-rod::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 100%; height: 22px;
  background: repeating-linear-gradient(90deg,
    transparent 0 26px,
    rgba(226,244,255,0.85) 26px 29px,
    transparent 29px 34px);
  -webkit-mask-image: linear-gradient(#000 0%, transparent 92%);
  mask-image: linear-gradient(#000 0%, transparent 92%);
  pointer-events: none;
}

/* Feiner Frostrand an den Bildern */
html[data-edition="winter"] .ph::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(200,235,255,0.16), transparent 42%);
}

/* Kachelwand wird zur Eiswand */
html[data-edition="winter"] .kachelwand {
  background-color: #00112B;
  background-image:
    repeating-linear-gradient(150deg, rgba(210,240,255,0.06) 0 2px, rgba(210,240,255,0.012) 2px 22%, transparent 22% 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.5) 0 1px, rgba(200,230,255,0.32) 1px 3px, rgba(0,0,0,0.3) 3px 4px, transparent 4px var(--kachel)),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.5) 0 1px, rgba(200,230,255,0.32) 1px 3px, rgba(0,0,0,0.3) 3px 4px, transparent 4px var(--kachel)),
    linear-gradient(165deg, #16264E 0%, #00112B 55%, #070E22 100%);
}

/* ------------------------------------------------------------
   WEIHNACHTEN: warmes Rot und Tannengruen, Lichterkette, Schnee
   ------------------------------------------------------------ */
/* Der Grund kippt vom kuehlen Navy ins Warme: ueberall dieselben zwei
   Unternehmensfarben, nur anders gemischt. Winter geht kaelter (Navy plus
   Blau), Weihnachten geht waermer (Navy plus Noren-Rot). Dadurch sind die
   drei Kleider auf einen Blick auseinanderzuhalten, ohne dass eine Farbe
   dazukommt, die nicht im Handbuch steht. */
html[data-edition="weihnachten"] {
  --navy: #23122A;          /* Navy + 24 % Noren-Rot, tiefes Weinrot-Dunkel */
  --navy-2: #291836;        /* Navy-2 + 24 % Noren-Rot */
  --navy-3: #332047;        /* Navy-3 + 24 % Noren-Rot */
  --rose: #E9B8BA;          /* Blassrosé, das Licht der Kerzen */
  --rose-deep: #B9475B;     /* Noren-Rot + 45 % Rosé, warmes Beerenrot */
  --noren: #931725;         /* sattes Weihnachtsrot, unveraendert */
  --ink: #FDF9F9;
  --ink-dim: #B0A7B5;       /* Ink + 38 % des neuen Grundes, warm gebrochen */
}

html[data-edition="weihnachten"] .site-head {
  background: linear-gradient(to bottom, rgba(35,18,42,0.96), rgba(35,18,42,0));
  box-shadow: inset 0 1px 0 rgba(233,184,186,0.14);
}

html[data-edition="weihnachten"] .np-blatt {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.3) 4%, transparent 10%),
    linear-gradient(100deg, rgba(0,0,0,0.24) 0%, transparent 22%, transparent 78%, rgba(0,0,0,0.2) 100%),
    linear-gradient(180deg, #A93344 0%, var(--noren) 44%, #611527 100%);
}
html[data-edition="weihnachten"] .noren-rod {
  background: linear-gradient(#F3E4E5, #C4AFB6 55%, #7C6470);
}

/* Lichterkette unter der Stange */
html[data-edition="weihnachten"] .noren-rod::after {
  content: "";
  position: absolute; left: -1%; right: -1%; top: 100%; height: 16px;
  background:
    radial-gradient(circle at 20px 8px, #E9B8BA 0 4px, transparent 5px),
    radial-gradient(circle at 60px 11px, #C4AFB6 0 4px, transparent 5px),
    radial-gradient(circle at 100px 8px, #E8829D 0 4px, transparent 5px),
    radial-gradient(circle at 140px 11px, #E9B8BA 0 4px, transparent 5px);
  background-size: 160px 16px;
  background-repeat: repeat-x;
  pointer-events: none;
  filter: drop-shadow(0 0 5px rgba(233,184,186,0.7));
}
@media (prefers-reduced-motion: no-preference) {
  html[data-edition="weihnachten"] .noren-rod::after { animation: lichter 3.2s ease-in-out infinite; }
}
@keyframes lichter { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

html[data-edition="weihnachten"] .kachelwand {
  background-color: #23122A;
  background-image:
    repeating-linear-gradient(150deg, rgba(233,184,186,0.06) 0 2px, rgba(233,184,186,0.012) 2px 22%, transparent 22% 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.5) 0 1px, rgba(233,184,186,0.3) 1px 3px, rgba(0,0,0,0.3) 3px 4px, transparent 4px var(--kachel)),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.5) 0 1px, rgba(233,184,186,0.3) 1px 3px, rgba(0,0,0,0.3) 3px 4px, transparent 4px var(--kachel)),
    linear-gradient(165deg, #3B1E3C 0%, #23122A 55%, #180C1E 100%);
}

/* Das Neonschild leuchtet weihnachtlich */
html[data-edition="weihnachten"] .neon-sign::before {
  border-color: #E9B8BA;
  box-shadow: 0 0 8px rgba(233,184,186,0.85), 0 0 30px rgba(233,184,186,0.45),
              0 0 80px rgba(233,184,186,0.18),
              inset 0 0 8px rgba(233,184,186,0.7), inset 0 0 34px rgba(233,184,186,0.2);
}
html[data-edition="weihnachten"] .neon-sign ul {
  color: #F3E4E5;
  text-shadow: 0 0 5px rgba(253,249,249,0.95), 0 0 16px rgba(233,184,186,0.8),
               0 0 42px rgba(233,184,186,0.5), 0 0 90px rgba(233,184,186,0.28);
}

/* ------------------------------------------------------------
   Schneefall, gemeinsam fuer Winter und Weihnachten
   ------------------------------------------------------------ */
.schnee {
  position: fixed; inset: 0; z-index: 3;
  pointer-events: none; overflow: hidden;
  display: none;
}
html[data-edition="winter"] .schnee,
html[data-edition="weihnachten"] .schnee { display: block; }

.flocke {
  position: absolute; top: -6vh;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .flocke { animation: fallen linear infinite; }
}
@keyframes fallen {
  0%   { transform: translate3d(0, -6vh, 0); opacity: 0; }
  8%   { opacity: var(--deck, 0.8); }
  92%  { opacity: var(--deck, 0.8); }
  100% { transform: translate3d(var(--drift, 20px), 106vh, 0); opacity: 0; }
}

/* Bei reduzierter Bewegung liegt der Schnee einfach still */
@media (prefers-reduced-motion: reduce) {
  .schnee { display: none !important; }
}



/* ------------------------------------------------------------
   Der Weihnachtsbaum in der Geschichte

   Sechs gefuellte, geschwungene Etagen, die sich ueberlappen — ein
   voller Baum, kein Strichwerk. Gruen kennt das Handbuch nicht, also
   zeichnet der Schnee den Baum: auf jedem Etagensaum liegt ein Zug
   Blassrosé. Der Koerper traegt zwei dunkle Violett-Toene aus der
   Weihnachtsmischung, damit die Etagen sich gegenseitig absetzen.

   Gleiche Stelle, gleiche Grundlinie wie der Kirschbaum; in der
   Weihnachtsfassung tritt der eine zurueck und der andere vor. Beim
   Hereinscrollen faellt der Baum Etage fuer Etage von oben ein, dann
   legt sich der Schnee, die Kugeln gehen an, zuletzt der Stern.
   ------------------------------------------------------------ */
.tannenbaum { display: none; }

html[data-edition="weihnachten"] .sakura-holz,
html[data-edition="weihnachten"] .sakura-krone { display: none; }
html[data-edition="weihnachten"] .tannenbaum { display: block; }

/* Die Tanne rueckt vom Rand weg in die Flaeche. Verschoben wird das
   ganze Baum-SVG, aber nur in dieser Edition — im Normal- und
   Winterkleid zeigt es den Kirschbaum, und der bleibt, wo er ist.
   Prozent statt Pixel, damit der Abstand mit der Abschnittsbreite
   waechst; die Klammer haelt ihn auf schmalen Schirmen im Zaum. */
html[data-edition="weihnachten"] .story-baum { right: clamp(16px, 5.5%, 80px); }

/* Die Blueten fallen weiter — als Schnee */
html[data-edition="weihnachten"] .sakura-fall circle { fill: #F3E4E5; }

html[data-edition="weihnachten"] .tb-stamm { fill: #7A4A5E; }

/* Zwei Toene im Wechsel: so setzt sich jede Etage von der darunter ab */
html[data-edition="weihnachten"] .tb-schicht { fill: #3A2456; }
html[data-edition="weihnachten"] .tb-schicht:nth-child(even) { fill: #452B66; }

/* Einfall der Etagen: von oben herab, unterste zuerst — so waechst der
   Baum sichtbar in die Hoehe. transform-box, damit scale/translate am
   eigenen Kasten rechnen und nicht am SVG-Ursprung. */
html[data-edition="weihnachten"] .tb-schicht,
html[data-edition="weihnachten"] .tb-stamm {
  opacity: 0;
  transform-box: fill-box; transform-origin: 50% 0%;
  transform: translateY(-16px) scale(0.94);
}
html[data-edition="weihnachten"] .story-baum.in .tb-schicht,
html[data-edition="weihnachten"] .story-baum.in .tb-stamm {
  animation: tb-fall 0.55s var(--ease) both;
}
html[data-edition="weihnachten"] .story-baum.in .tb-stamm { animation-delay: 0.1s; }
html[data-edition="weihnachten"] .story-baum.in .tb-schicht:nth-child(1) { animation-delay: 0.25s; }
html[data-edition="weihnachten"] .story-baum.in .tb-schicht:nth-child(2) { animation-delay: 0.42s; }
html[data-edition="weihnachten"] .story-baum.in .tb-schicht:nth-child(3) { animation-delay: 0.59s; }
html[data-edition="weihnachten"] .story-baum.in .tb-schicht:nth-child(4) { animation-delay: 0.76s; }
html[data-edition="weihnachten"] .story-baum.in .tb-schicht:nth-child(5) { animation-delay: 0.93s; }
html[data-edition="weihnachten"] .story-baum.in .tb-schicht:nth-child(6) { animation-delay: 1.1s; }
@keyframes tb-fall { to { opacity: 1; transform: none; } }

/* Der Schnee legt sich als gezogener Strich auf jeden Saum
   (@keyframes holz-wachsen steht in style.css) */
html[data-edition="weihnachten"] .tb-schnee path {
  stroke: var(--blass);
  stroke-dasharray: 460; stroke-dashoffset: 460;
}
html[data-edition="weihnachten"] .story-baum.in .tb-schnee path {
  animation: holz-wachsen 0.9s var(--ease) both;
}
html[data-edition="weihnachten"] .story-baum.in .tb-schnee path:nth-child(1) { animation-delay: 1.5s; }
html[data-edition="weihnachten"] .story-baum.in .tb-schnee path:nth-child(2) { animation-delay: 1.65s; }
html[data-edition="weihnachten"] .story-baum.in .tb-schnee path:nth-child(3) { animation-delay: 1.8s; }
html[data-edition="weihnachten"] .story-baum.in .tb-schnee path:nth-child(4) { animation-delay: 1.95s; }
html[data-edition="weihnachten"] .story-baum.in .tb-schnee path:nth-child(5) { animation-delay: 2.1s; }
html[data-edition="weihnachten"] .story-baum.in .tb-schnee path:nth-child(6) { animation-delay: 2.25s; }

/* Die Kugeln gehen nacheinander an wie eine Lichterkette. Der feine
   helle Rand hebt sie vom dunklen Koerper ab. */
html[data-edition="weihnachten"] .tb-kugeln circle {
  fill: var(--noren);
  stroke: rgba(233,184,186,0.55); stroke-width: 1.6;
  opacity: 0;
}
html[data-edition="weihnachten"] .story-baum.in .tb-kugeln circle {
  animation: tb-kugel 0.45s var(--ease) both;
}
html[data-edition="weihnachten"] .story-baum.in .tb-kugeln circle:nth-child(1)  { animation-delay: 2.5s; }
html[data-edition="weihnachten"] .story-baum.in .tb-kugeln circle:nth-child(2)  { animation-delay: 2.62s; }
html[data-edition="weihnachten"] .story-baum.in .tb-kugeln circle:nth-child(3)  { animation-delay: 2.74s; }
html[data-edition="weihnachten"] .story-baum.in .tb-kugeln circle:nth-child(4)  { animation-delay: 2.86s; }
html[data-edition="weihnachten"] .story-baum.in .tb-kugeln circle:nth-child(5)  { animation-delay: 2.98s; }
html[data-edition="weihnachten"] .story-baum.in .tb-kugeln circle:nth-child(6)  { animation-delay: 3.1s; }
html[data-edition="weihnachten"] .story-baum.in .tb-kugeln circle:nth-child(7)  { animation-delay: 3.22s; }
html[data-edition="weihnachten"] .story-baum.in .tb-kugeln circle:nth-child(8)  { animation-delay: 3.34s; }
html[data-edition="weihnachten"] .story-baum.in .tb-kugeln circle:nth-child(9)  { animation-delay: 3.46s; }
html[data-edition="weihnachten"] .story-baum.in .tb-kugeln circle:nth-child(10) { animation-delay: 3.58s; }
html[data-edition="weihnachten"] .story-baum.in .tb-kugeln circle:nth-child(11) { animation-delay: 3.7s; }
@keyframes tb-kugel { to { opacity: 1; } }

/* Der Stern zuletzt, wie beim echten Schmuecken */
html[data-edition="weihnachten"] .tb-stern {
  fill: #E8829D; opacity: 0;
  transform-box: fill-box; transform-origin: 50% 60%;
  filter: drop-shadow(0 0 12px rgba(232,130,157,0.65));
}
html[data-edition="weihnachten"] .story-baum.in .tb-stern {
  animation: tb-stern 0.8s var(--ease) 4s both;
}
@keyframes tb-stern {
  from { opacity: 0; transform: scale(0.4) rotate(-18deg); }
  to   { opacity: 1; transform: none; }
}

/* Ohne Bewegung steht der Baum fertig geschmueckt da */
@media (prefers-reduced-motion: reduce) {
  html[data-edition="weihnachten"] .tb-schicht,
  html[data-edition="weihnachten"] .tb-stamm { opacity: 1; transform: none; animation: none !important; }
  html[data-edition="weihnachten"] .tb-schnee path { stroke-dashoffset: 0; animation: none !important; }
  html[data-edition="weihnachten"] .tb-kugeln circle { opacity: 1; animation: none !important; }
  html[data-edition="weihnachten"] .tb-stern { opacity: 1; transform: none; animation: none !important; }
}