/* Saisonale Header-Effekte (Aufgabe 51 v2)
   Fallender Schnee / Blätter / Konfetti, wachsende Blüten (Frühling),
   leises Glitzern (Sommer), fallende Ostereier (Ostern).
   Die Partikel werden per header-seasonal-fx.js in .fk-fx-layer erzeugt.
   prefers-reduced-motion: alles aus. */

.fk-fx-layer{
  position:absolute; inset:0; z-index:2;
  pointer-events:none; overflow:hidden;
}
.fk-fx-layer .fx-p{ position:absolute; top:0; will-change:transform,opacity; }
.fk-fx-layer .fx-p svg{ display:block; }

/* ---------- Schnee (Winter) ---------- */
.fx-snow{
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffffff, #cddfe3);
  opacity:.85;
  animation-name: fx-fall, fx-sway;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-direction: normal, alternate;
  animation-duration: var(--dur,9s), calc(var(--dur,9s) / 3);
  animation-delay: var(--delay,0s), var(--delay,0s);
}

/* ---------- Blätter (Herbst) / Ostereier (Ostern) ---------- */
.fx-leaf,
.fx-petal{
  opacity:.92;
  animation-name: fx-fall-spin, fx-sway;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-direction: normal, alternate;
  animation-duration: var(--dur,10s), calc(var(--dur,10s) / 2.5);
  animation-delay: var(--delay,0s), var(--delay,0s);
}

/* ---------- Konfetti (Fasnet) ---------- */
.fx-confetti{
  border-radius:1px; opacity:.92;
  animation-name: fx-fall-roll, fx-sway;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-direction: normal, alternate;
  animation-duration: var(--dur,7s), calc(var(--dur,7s) / 2);
  animation-delay: var(--delay,0s), var(--delay,0s);
}

/* ---------- wachsende Blüten (Frühling) ---------- */
.fk-fx-layer .fx-bloom{
  top:auto; bottom:-6px; transform-origin:bottom center;
  animation-name: fx-grow, fx-bob;
  animation-timing-function: ease-out, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-direction: normal, alternate;
  animation-fill-mode: forwards, none;
  animation-duration: var(--dur,4.5s), 3.4s;
  animation-delay: var(--delay,0s), calc(var(--delay,0s) + var(--dur,4.5s));
}

/* ---------- Glitzern (Sommer) ---------- */
.fx-glint{
  width:var(--sz,6px); height:var(--sz,6px); opacity:0;
  background:
    radial-gradient(circle, rgba(255,255,255,.95) 0 20%, transparent 32%),
    linear-gradient(0deg,  transparent 45%, rgba(255,255,255,.85) 45% 55%, transparent 55%),
    linear-gradient(90deg, transparent 45%, rgba(255,255,255,.85) 45% 55%, transparent 55%);
  animation: fx-twinkle ease-in-out infinite;
  animation-duration: var(--dur,3.5s);
  animation-delay: var(--delay,0s);
}

@keyframes fx-fall{
  from{ transform: translateY(-16px); }
  to  { transform: translateY(280px); }
}
@keyframes fx-fall-spin{
  from{ transform: translateY(-18px) rotate(0deg); }
  to  { transform: translateY(280px) rotate(340deg); }
}
@keyframes fx-fall-roll{
  from{ transform: translateY(-18px) rotate(0deg); }
  to  { transform: translateY(280px) rotate(var(--spin,540deg)); }
}
@keyframes fx-sway{
  from{ margin-left: calc(var(--sway,10px) * -1); }
  to  { margin-left: var(--sway,10px); }
}
@keyframes fx-grow{
  from{ transform: translateY(16px) scale(0);   opacity:0; }
  55% { opacity:1; }
  to  { transform: translateY(0)    scale(1);   opacity:1; }
}
@keyframes fx-bob{
  from{ transform: translateY(0)  rotate(-4deg); }
  to  { transform: translateY(-3px) rotate(4deg); }
}
@keyframes fx-twinkle{
  0%,100%{ opacity:0; transform: scale(.4); }
  50%    { opacity:.9; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .fk-fx-layer{ display:none; }
}