/* =========================================================
   FÓRNOVA — Scroll-Prozess „So entsteht deine Pizza"
   Scroll-verknüpft (kein Hijacking). Alles unter #prozess / .fv-pizza.
   ========================================================= */

#prozess.fv-pizza {
  position: relative;
  height: 560vh;                 /* Scroll-Länge der Erzählung */
  background: var(--ink);
  color: var(--paper);
}

/* gepinnte Bühne */
.fv-pizza__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.fv-pizza__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  justify-items: center;
  padding-block: clamp(1.5rem, 4vh, 3rem);
  text-align: center;
}

.fv-pizza__head { z-index: 4; }
.fv-pizza__head .eyebrow { color: var(--gold); }
.fv-pizza__head .eyebrow::before { background: var(--gold); }

/* ---- Bühne / „Kamera" ---- */
.fv-pizza__scene {
  position: relative;
  width: min(70vmin, 540px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  will-change: transform;
  transform: translateZ(0);
}

/* Hitze-Glühen hinter der Pizza (Ofen) */
.fv-pizza__glow {
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 56%,
    rgba(255, 196, 92, 0.95) 0%,
    rgba(226, 122, 40, 0.7) 26%,
    rgba(193, 59, 43, 0.45) 46%,
    rgba(33, 26, 21, 0) 70%);
  opacity: 0;
  pointer-events: none;
  filter: blur(2px);
  z-index: 0;
}

.fv-pizza__svg {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: visible;
}

/* SVG-Gruppen: jeweils um ihr eigenes Zentrum transformieren */
.fv-pizza__svg g[id] {
  transform-box: fill-box;
  transform-origin: center;
}

/* Flammen am unteren Rand der Bühne */
.fv-pizza__flames {
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: 120%;
  height: 55%;
  transform: translateX(-50%);
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
}
.fv-pizza__flames svg { width: 100%; height: 100%; }
.fv-pizza__flame {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation-play-state: paused; /* nur in der Ofen-Phase aktiv (spart CPU + Repaint) */
}
.fv-pizza__flames.is-burning .fv-pizza__flame { animation-play-state: running; }
.fv-pizza__flame--a { animation: fv-flick 1.1s ease-in-out infinite; }
.fv-pizza__flame--b { animation: fv-flick 0.85s ease-in-out infinite 0.2s; }
.fv-pizza__flame--c { animation: fv-flick 1.3s ease-in-out infinite 0.45s; }
@keyframes fv-flick {
  0%, 100% { transform: scaleY(1) scaleX(1); opacity: .9; }
  50%      { transform: scaleY(1.18) scaleX(.94); opacity: 1; }
}

/* Ofen-Vignette: schließt sich wie eine Ofenöffnung um die Sicht */
.fv-pizza__arch {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(120% 120% at 50% 62%,
    rgba(33, 26, 21, 0) 38%,
    rgba(20, 13, 9, 0.55) 60%,
    rgba(12, 7, 4, 0.92) 82%);
}

/* ---- Untertitel je Stufe ---- */
.fv-pizza__captions {
  position: relative;
  z-index: 6;
  min-height: 4rem;
  display: grid;
  align-content: start;
  width: min(90%, 640px);
}
.fv-pizza__cap {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  pointer-events: none;
}
.fv-pizza__cap.is-active {
  opacity: 1;
  transform: none;
}
.fv-pizza__cap .kicker-num {
  display: block;
  color: var(--gold);
  font-size: 1.3rem;
  margin-bottom: .35rem;
}
.fv-pizza__cap h3 { color: var(--paper); margin-bottom: 0; }

/* CTA am Ende — im Fluss unter dem Untertitel (keine Überlappung) */
.fv-pizza__cta {
  margin-top: 1.4rem;
  opacity: 0;
  transform: translateY(14px);
  z-index: 7;
  pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.fv-pizza__cta.is-on { opacity: 1; transform: none; pointer-events: auto; }

/* Scroll-Hinweis */
.fv-pizza__hint {
  position: absolute;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(244, 238, 225, .5);
  z-index: 6;
  transition: opacity .4s var(--ease);
}
.fv-pizza__hint::after {
  content: "";
  display: block;
  width: 1px; height: 26px;
  margin: .6rem auto 0;
  background: linear-gradient(rgba(244,238,225,.6), transparent);
}

/* Fortschrittsbalken oben */
.fv-pizza__progress {
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--tomato), var(--gold));
  z-index: 8;
}

/* ---- Reduced Motion / kein JS: statische, lesbare Variante ---- */
#prozess.fv-pizza.is-static {
  height: auto;
  padding-block: var(--section-y);
}
.is-static .fv-pizza__sticky { position: static; height: auto; }
.is-static .fv-pizza__scene { transform: none !important; margin-inline: auto; }
.is-static .fv-pizza__svg g[id] { opacity: 1 !important; transform: none !important; }
.is-static .fv-pizza__glow { opacity: .5 !important; }
.is-static .fv-pizza__arch,
.is-static .fv-pizza__flames,
.is-static .fv-pizza__hint,
.is-static .fv-pizza__progress { display: none; }
.is-static .fv-pizza__captions {
  margin-top: 2.5rem;
  min-height: 0;
  gap: 1.5rem;
}
.is-static .fv-pizza__cap {
  grid-area: auto;
  opacity: 1 !important;
  transform: none !important;
}
.is-static .fv-pizza__cta {
  position: static;
  transform: none;
  opacity: 1;
  margin: 2rem auto 0;
}