/* =====================================================================
   ANIMATION
   Grundsatz: Ohne JavaScript ist alles sichtbar. Die Startzustände
   werden nur gesetzt, wenn JS läuft (html.js) UND der Nutzer keine
   reduzierte Bewegung verlangt. Sonst steht der Endzustand sofort.
   ===================================================================== */

/* --- Startzustände für Scroll-Reveals ------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}

.js [data-reveal='mask'] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
}

.js [data-reveal='fade'] {
  transform: none;
}

/* Hero-Bausteine werden von der Ladesequenz gesteuert */
.js .hero__line > span {
  transform: translate3d(0, 105%, 0);
}

.js .hero__sub,
.js .hero__actions,
.js .hero__place,
.js .hero__status,
.js .hero__foot {
  opacity: 0;
}

.js .nav__inner {
  opacity: 0;
}

/* Bis die Ladesequenz startet, liegt eine dunkle Fläche über dem Bild */
.js .hero__media {
  clip-path: inset(0 0 100% 0);
}

/* --- Glut-Animationen ------------------------------------------------ */

@keyframes ember-drift {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

.ember-bar--live {
  animation: ember-drift 14s linear infinite;
}

@keyframes pulse-dot {
  0% {
    box-shadow: 0 0 0 0 rgb(111 191 94 / 0.5);
  }
  70% {
    box-shadow: 0 0 0 9px rgb(111 191 94 / 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgb(111 191 94 / 0);
  }
}

/* --- Hitzeflimmern über dem Grill ------------------------------------
   Sehr zurückhaltend: verschiebt nur eine halbtransparente Kopie des
   oberen Bildbereichs. Liegt unter dem Scrim, damit Text lesbar bleibt.
   -------------------------------------------------------------------- */

@keyframes heat-haze {
  0% {
    transform: translate3d(0, 0, 0) scaleY(1);
    opacity: 0.5;
  }
  50% {
    transform: translate3d(0, -6px, 0) scaleY(1.012);
    opacity: 0.28;
  }
  100% {
    transform: translate3d(0, 0, 0) scaleY(1);
    opacity: 0.5;
  }
}

.hero__haze {
  position: absolute;
  left: 0;
  right: 0;
  top: 18%;
  height: 34%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgb(238 123 45 / 0.1) 0%,
    rgb(238 123 45 / 0.04) 45%,
    transparent 100%
  );
  filter: blur(14px);
  animation: heat-haze 7.5s var(--ease-in-out) infinite;
  will-change: transform, opacity;
}

/* --- Scroll-Hinweis --------------------------------------------------- */

@keyframes scroll-nudge {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.6;
  }
  50% {
    transform: translateY(4px);
    opacity: 1;
  }
}

.hero__scroll svg {
  animation: scroll-nudge 2.4s var(--ease-in-out) infinite;
}

/* =====================================================================
   REDUZIERTE BEWEGUNG
   Die Seite bleibt vollwertig – sie hört nur auf, sich zu bewegen.
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js .hero__sub,
  .js .hero__actions,
  .js .hero__place,
  .js .hero__status,
  .js .hero__foot,
  .js .nav__inner {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .js .hero__line > span {
    transform: none !important;
  }

  .js .hero__media {
    clip-path: none !important;
  }

  .js .hero__img {
    transform: none !important;
  }

  .hero__haze,
  .ember-bar--live,
  .hero__scroll svg,
  .status[data-open='true'] .status__dot {
    animation: none !important;
  }

  .hero__haze {
    opacity: 0.32;
  }

  .frame--zoom:hover > img,
  .gallery__item:hover img {
    transform: none;
  }
}