/**
 * Stage-Hintergrundeffekte — CSS-only, GPU-freundlich.
 * Effekt-Layer bleiben im DOM (mountCountdown aktualisiert nur Ziffern pro Tick).
 */

.event-countdown-host {
  --fx-opacity: 0.16;
  --fx-stripe: 40px;
}

.event-countdown-host[data-stage-effect-intensity="low"] {
  --fx-opacity: 0.1;
  --fx-stripe: 48px;
}

.event-countdown-host[data-stage-effect-intensity="high"] {
  --fx-opacity: 0.24;
  --fx-stripe: 32px;
}

/* Effekt aktiv: bestehende Countdown-Hintergrund-Animation aus */
.event-countdown-host[data-stage-effect]:not([data-stage-effect="none"]) .event-countdown-bg,
.event-countdown-host[data-stage-effect]:not([data-stage-effect="none"]) .event-countdown-bg--plain {
  animation: none !important;
}

.stage-effect {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  isolation: isolate;
}

.stage-effect__layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  backface-visibility: hidden;
}

.stage-effect__layer--a {
  opacity: var(--fx-opacity);
}

.stage-effect__layer--b {
  opacity: calc(var(--fx-opacity) * 0.75);
}

/* —— Sunrise: weicher Lichtkegel (alternate = kein Loop-Sprung) —— */
.stage-effect--sunrise .stage-effect__layer--a {
  inset: -20%;
  background: radial-gradient(
    ellipse 95% 60% at 50% 118%,
    rgba(255, 185, 90, 0.65) 0%,
    rgba(255, 130, 70, 0.32) 42%,
    transparent 72%
  );
  animation: stage-sunrise-a 20s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.stage-effect--sunrise .stage-effect__layer--b {
  inset: -15%;
  background: radial-gradient(
    ellipse 75% 45% at 50% 105%,
    rgba(255, 235, 160, 0.48) 0%,
    transparent 68%
  );
  animation: stage-sunrise-b 26s ease-in-out infinite alternate;
  animation-delay: -8s;
  will-change: transform, opacity;
}

@keyframes stage-sunrise-a {
  from {
    transform: translate3d(0, 5%, 0) scale(1);
    opacity: calc(var(--fx-opacity) * 0.7);
  }
  to {
    transform: translate3d(0, -3%, 0) scale(1.05);
    opacity: var(--fx-opacity);
  }
}

@keyframes stage-sunrise-b {
  from {
    transform: translate3d(-1%, 4%, 0) scale(1.02);
    opacity: calc(var(--fx-opacity) * 0.55);
  }
  to {
    transform: translate3d(1%, -2%, 0) scale(1.08);
    opacity: calc(var(--fx-opacity) * 0.85);
  }
}

/* —— Wasserfall: Tile scroll per translate3d (exakt eine Streifenperiode) —— */
.stage-effect--waterfall .stage-effect__layer::before {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  top: -120%;
  height: 240%;
  backface-visibility: hidden;
  will-change: transform;
}

.stage-effect--waterfall .stage-effect__layer--a::before {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--fx-stripe) - 5px),
    rgba(120, 205, 255, 0.55) calc(var(--fx-stripe) - 5px),
    rgba(120, 205, 255, 0.55) var(--fx-stripe)
  );
  animation: stage-waterfall-a 18s linear infinite;
}

.stage-effect--waterfall .stage-effect__layer--b::before {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--fx-stripe) * 0.6),
    rgba(70, 150, 220, 0.4) calc(var(--fx-stripe) * 0.6),
    rgba(70, 150, 220, 0.4) calc(var(--fx-stripe) * 0.95)
  );
  animation: stage-waterfall-b 24s linear infinite;
  animation-delay: -9s;
}

@keyframes stage-waterfall-a {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, var(--fx-stripe), 0);
  }
}

@keyframes stage-waterfall-b {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, calc(var(--fx-stripe) * 0.95), 0);
  }
}

/* —— Parallaxe: langsame Kreisbahn ohne Sprung am Loop —— */
.stage-effect--parallax .stage-effect__layer--a {
  width: 58%;
  height: 58%;
  top: 8%;
  left: -6%;
  inset: auto;
  border-radius: 45% 55% 60% 40%;
  background: radial-gradient(circle at 32% 28%, rgba(130, 90, 255, 0.5), transparent 72%);
  animation: stage-parallax-orbit-a 48s linear infinite;
  will-change: transform;
}

.stage-effect--parallax .stage-effect__layer--b {
  width: 52%;
  height: 52%;
  bottom: 4%;
  right: -8%;
  top: auto;
  left: auto;
  inset: auto;
  border-radius: 58% 42% 48% 52%;
  background: radial-gradient(circle at 68% 62%, rgba(0, 185, 205, 0.42), transparent 74%);
  animation: stage-parallax-orbit-b 62s linear infinite;
  will-change: transform;
}

@keyframes stage-parallax-orbit-a {
  from {
    transform: rotate(0deg) translate3d(7%, 0, 0) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate3d(7%, 0, 0) rotate(-360deg);
  }
}

@keyframes stage-parallax-orbit-b {
  from {
    transform: rotate(0deg) translate3d(-9%, 0, 0) rotate(0deg);
  }
  to {
    transform: rotate(-360deg) translate3d(-9%, 0, 0) rotate(360deg);
  }
}

/* Share-Modus und reduced-motion: statisch */
.view-stage[data-stage-mode="share"] .stage-effect__layer,
.view-stage[data-stage-mode="share"] .stage-effect__layer::before {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .stage-effect__layer,
  .stage-effect__layer::before {
    animation: none !important;
  }
}