/* Sunstroke Startseite – Weihnachtszeit, die jeden Tag ein Stück weihnachtlicher wird
   index.html setzt html.xm und --xp (0 am 01.11. … 1 an Heiligabend, bis 06.01. voll).
   xmas.js baut Schnee, Schneehauben, Lichterketten, Baum, Adventskranz und Schlitten je nach Fortschritt.
   Vorschau: ?xmasdate=2026-12-13, abschalten: ?xmas=0 */

html.xm{--xp:0;--xm-ice:#dfeaf2;--xm-red:#e5484d;--xm-warm:#ffd98a}

/* ===== Himmel: Sonnenuntergang kühlt Tag für Tag zur Winterdämmerung ab ===== */
.xm-sky{position:absolute;inset:0;pointer-events:none;opacity:calc(var(--xp) * .88);
  background:linear-gradient(180deg,#060b15 0%,#0c1a2e 18%,#16304c 36%,#2f5170 52%,#6e7f9c 64%,#c79a9a 74%,#f4c39a 82%,#f1e0cf 87%,#3a4256 100%)}
.gh-finale .xm-sky{background:linear-gradient(0deg,#0b141b 0%,#22344a 28%,#8a8fa8 48%,#f4c39a 56%,#6e7f9c 66%,#16304c 82%,#101c24 100%)}
html.xm .gh-sun{opacity:calc(1 - var(--xp) * .3);filter:blur(2px) saturate(calc(1 - var(--xp) * .45))}
html.xm .gh-rays{opacity:calc(1 - var(--xp) * .6)}
html.xm .gh-far{filter:saturate(calc(1 - var(--xp) * .7))}
html.xm .gh-hills{filter:saturate(calc(1 - var(--xp) * .75)) brightness(calc(1 - var(--xp) * .25))}
html.xm .gh-clouds{opacity:calc(1 - var(--xp) * .5)}

/* ===== Schneefall (Canvas, Menge wächst mit dem Datum) ===== */
.xm-snow{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}

/* ===== Schneehauben auf den Dächern ===== */
.xm-caps{fill:var(--xm-ice)}
.gh-far .xm-caps{fill:#b9c7d6}

/* ===== Lichterketten an den Stromleitungen und am Baum ===== */
.xm-bulb{animation:xmTwinkle 2.8s ease-in-out infinite}
.xm-bulb:nth-child(3n){animation-delay:-.9s}.xm-bulb:nth-child(3n+1){animation-delay:-1.8s}.xm-bulb:nth-child(5n){animation-duration:3.6s}
@keyframes xmTwinkle{0%,100%{opacity:1}50%{opacity:.35}}
.xm-tree-star{animation:xmStar 3s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes xmStar{50%{transform:scale(1.15);opacity:.85}}

/* ===== Schneewehe auf dem unteren Kinobalken ===== */
.xm-bank{position:absolute;z-index:5;left:0;right:0;bottom:calc(7vh - 2px);height:calc(4px + 12px * var(--bank,0));pointer-events:none}
.xm-bank svg{display:block;width:100%;height:100%}

/* ===== Schild im Hero (Countdown, Adventskranz, Feiertage) ===== */
.xm-badge{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;padding:7px 14px 7px 10px;border:1px solid rgba(223,234,242,.35);border-radius:2px;background:rgba(6,11,21,.55);backdrop-filter:blur(6px);
  font-family:var(--gh-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#e8f0f6}
.xm-badge b{color:var(--gh-gold);font-weight:500}
.xm-badge svg{width:30px;height:22px;flex:none}
.xm-badge .flake{width:16px;height:16px}
.xm-flame{animation:xmFlame 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.xm-flame:nth-of-type(2){animation-delay:-.4s}.xm-flame:nth-of-type(3){animation-delay:-.8s}.xm-flame:nth-of-type(4){animation-delay:-1.2s}
@keyframes xmFlame{50%{transform:scaleY(.8) scaleX(1.1);opacity:.85}}

/* ===== Schlitten (ab Mitte Dezember statt Hubschrauber) ===== */
html.xm.xm-sleigh-on .gh-heli{display:none}
.xm-sleigh{position:absolute;z-index:2;top:16%;left:-240px;width:220px;pointer-events:none;animation:xmSleigh 42s linear 3s infinite}
.xm-sleigh svg{display:block;width:100%;height:auto;overflow:visible}
@keyframes xmSleigh{0%{transform:translate(0,0)}50%{transform:translate(60vw,-4vh)}100%{transform:translate(calc(100vw + 480px),2vh)}}

/* ===== Schnee auf den Szenen-Karten ===== */
html.xm .gh-scene{position:relative}
html.xm.xm-frost .gh-scene::after{content:"";position:absolute;left:-2px;right:-2px;top:-2px;height:12px;z-index:2;pointer-events:none;opacity:.9;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath fill='%23dfeaf2' d='M0 0h200v4c-8 0-10 6-16 6s-8-5-14-5-6 7-12 7-8-6-14-6-10 4-16 4-6-5-12-5-8 6-14 6-8-3-14-3-6 5-12 5-10-6-16-6-8 4-14 4-10-4-16-4-8 5-14 5-8-6-16-6z'/%3E%3C/svg%3E") no-repeat top/100% 100%}

@media(max-width:640px){
  .xm-sleigh{width:150px}
}
@media(prefers-reduced-motion:reduce){
  .xm-bulb,.xm-tree-star,.xm-flame{animation:none}
  .xm-sleigh{display:none}
}