/* ---------------------------------------------------------------------------
 * Glutpartikel
 * ------------------------------------------------------------------------ */

.embers span {
  position: absolute;
  bottom: 4%;
  left: var(--x);
  width: 0.26rem;
  height: 0.26rem;
  border-radius: 50%;
  background: #ffd75d;
  box-shadow:
    0 0 0.7rem #ff9a22,
    0 0 1.2rem #ff4215;
  opacity: 0;
  animation: ember-rise var(--duration) cubic-bezier(0.18, 0.55, 0.36, 1) var(--delay) infinite;
}

@keyframes ember-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.55);
  }

  8% {
    opacity: 0.95;
  }

  42% {
    opacity: 0.68;
    transform: translate3d(0.8rem, -30vh, 0) scale(0.85);
  }

  100% {
    opacity: 0;
    transform: translate3d(3.5rem, -74vh, 0) scale(0.08);
  }
}

/* ---------------------------------------------------------------------------
 * CSS-Flammen-Fallback (ohne WebGL oder bei reduzierter Bewegung)
 * ------------------------------------------------------------------------ */

.fire-fallback {
  position: absolute;
  inset: auto 0 0;
  display: none;
  height: 100%;
  overflow: hidden;
}

.fire-fallback-active .fire-fallback {
  display: block;
}

.fire-fallback::before {
  position: absolute;
  right: -10%;
  bottom: -55%;
  left: -10%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 100%,
    rgb(255 233 176 / 55%) 0%,
    rgb(255 138 11 / 45%) 28%,
    rgb(233 50 20 / 32%) 55%,
    transparent 78%
  );
  content: "";
  filter: blur(2rem);
}

.fire-fallback__tongue {
  --fx: 50%;
  --fw: 30%;
  --fh: 72%;
  --frot: 0deg;
  --fdur: 2s;
  --fdel: 0s;

  position: absolute;
  bottom: -6%;
  left: var(--fx);
  width: var(--fw);
  height: var(--fh);
  border-radius: 48% 52% 40% 60% / 82% 76% 24% 18%;
  background: radial-gradient(
    ellipse at 50% 94%,
    #fff5c8 0 6%,
    #ffd84b 20%,
    #ff8a0b 46%,
    #e93214 72%,
    transparent 100%
  );
  filter: blur(0.35rem);
  mix-blend-mode: screen;
  opacity: 0.8;
  transform: translateX(-50%) rotate(var(--frot));
  transform-origin: 50% 100%;
  animation: flame-lick var(--fdur) ease-in-out var(--fdel) infinite alternate;
}

.fire-fallback__tongue:nth-child(1) {
  --fx: 22%;
  --fw: 34%;
  --fh: 52%;
  --frot: -8deg;
  --fdur: 1.7s;
  --fdel: -0.6s;

  opacity: 0.55;
}

.fire-fallback__tongue:nth-child(2) {
  --fx: 50%;
  --fw: 42%;
  --fh: 78%;
  --fdur: 1.5s;
  --fdel: -0.2s;
}

.fire-fallback__tongue:nth-child(3) {
  --fx: 78%;
  --fw: 34%;
  --fh: 56%;
  --frot: 8deg;
  --fdur: 1.9s;
  --fdel: -1.1s;

  opacity: 0.55;
}

@keyframes flame-lick {
  0% {
    border-radius: 43% 57% 35% 65% / 84% 71% 29% 16%;
    transform: translateX(-50%) rotate(calc(var(--frot) - 3deg)) scale(0.94, 1.04);
  }

  50% {
    border-radius: 55% 45% 48% 52% / 76% 87% 13% 24%;
    transform: translateX(-50%) rotate(var(--frot)) scale(1.05, 0.95);
  }

  100% {
    border-radius: 58% 42% 43% 57% / 72% 86% 14% 28%;
    transform: translateX(-50%) rotate(calc(var(--frot) + 3deg)) scale(0.96, 1.08);
  }
}

/* ---------------------------------------------------------------------------
 * Kleinere Bewegungen
 * ------------------------------------------------------------------------ */

.live-dot {
  animation: live-pulse 2.2s ease-out infinite;
}

@keyframes live-pulse {
  0% {
    box-shadow: 0 0 0 0 rgb(255 173 34 / 30%);
  }

  70%,
  100% {
    box-shadow: 0 0 0 0.42rem rgb(255 173 34 / 0%);
  }
}

.hero__logo {
  animation: logo-float 5.2s ease-in-out infinite;
}

@keyframes logo-float {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateY(-0.4rem) rotate(1deg);
  }
}

.marquee__track {
  animation: marquee-scroll 26s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ---------------------------------------------------------------------------
 * Scroll-Reveal
 * ------------------------------------------------------------------------ */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity 700ms cubic-bezier(0.2, 0.75, 0.3, 1) var(--reveal-delay, 0ms),
    transform 700ms cubic-bezier(0.2, 0.75, 0.3, 1) var(--reveal-delay, 0ms);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------------------------------
 * Reduzierte Bewegung
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .live-dot,
  .hero__logo,
  .marquee__track,
  .fire-fallback__tongue {
    animation: none;
  }

  .embers {
    display: none;
  }

  .fire-fallback__tongue {
    filter: blur(1.2rem);
    opacity: 0.45;
  }
}