/* ============================================================================
   STIG ROCK, BEWEGUNG
   ----------------------------------------------------------------------------
   Der Brand Guide erlaubt keine Verlaeufe, keine Schatten, keinen Glow.
   Bewegung entsteht deshalb ausschliesslich durch Position, Deckkraft und
   Haarlinien. Ruhig, langsam, ohne Blinken.

   Einblendreihenfolge auf jeder Folie:
   Eyebrow, Headline, Lead, Inhalt, Fussnote.

   Wichtig: die Einblendung nutzt die CSS-Eigenschaften translate und scale,
   nicht transform. So bleibt ein eigenes transform am Element erhalten
   (etwa translateX(-50%) zur Positionierung) und wird nicht ueberschrieben.
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  translate: 0 16px;
}

body.is-ready [data-reveal] {
  animation: revealUp var(--t-slow) var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 1ms);
}

@keyframes revealUp {
  from { opacity: 0; translate: 0 16px; }
  to   { opacity: 1; translate: 0 0; }
}

/* Staffelung der festen Zonen */
body.is-ready .slide-head .eyebrow { --d: 50; }
body.is-ready .slide-head h1,
body.is-ready .slide-head .h1 { --d: 150; }
body.is-ready .lead { --d: 250; }
body.is-ready .content { --d: 340; }
body.is-ready .foot { --d: 600; }

/* Kinder im Inhalt gestaffelt, style="--i:3" setzen */
body.is-ready [data-reveal-stagger] > * {
  opacity: 0;
  animation: revealUp var(--t-slow) var(--ease) forwards;
  animation-delay: calc(420ms + var(--i, 0) * 80ms);
}

/* ---- Feine Skalierung beim Erscheinen ----------------------------------- */

@keyframes revealScale {
  from { opacity: 0; scale: 0.985; }
  to   { opacity: 1; scale: 1; }
}

body.is-ready [data-reveal-scale] {
  opacity: 0;
  animation: revealScale 820ms var(--ease) forwards;
  animation-delay: 400ms;
}

/* ---- Buchstabenweise Titel (Folien 1, 22, 48) --------------------------- */

.letters { display: inline-block; }
.letters .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
}
.letters .ch--space { width: 0.30em; }

body.is-ready .letters .ch {
  animation: charIn 720ms var(--ease) forwards;
  animation-delay: calc(var(--base, 0ms) + var(--n, 0) * 28ms);
}

@keyframes charIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Haarlinie zeichnet sich -------------------------------------------- */

body.is-ready [data-draw] {
  transform-origin: left center;
  animation: drawLine 1000ms var(--ease-soft) backwards;
  animation-delay: 520ms;
}

@keyframes drawLine {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---- Balken wachsen ------------------------------------------------------ */

@keyframes barRise {
  from { transform: scaleY(0.03); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* ---- Ruhiges Atmen ------------------------------------------------------- */

@keyframes breathe {
  0%, 100% { opacity: 0.88; scale: 1; }
  50%      { opacity: 1; scale: 1.012; }
}
.breathe { animation: breathe 7s var(--ease-soft) infinite; }

/* ---- Sanftes Schweben ---------------------------------------------------- */

@keyframes floatSoft {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}
.float-soft { animation: floatSoft 10s var(--ease-soft) infinite; }
.float-soft--slow { animation-duration: 14s; }
.float-soft--delay { animation-delay: -5s; }

/* ---- Ken Burns, sehr zurueckhaltend -------------------------------------- */

@keyframes kenBurns {
  from { transform: scale(1.01); }
  to   { transform: scale(1.09); }
}
.ken-burns { animation: kenBurns 30s var(--ease-soft) alternate infinite; }

/* ---- Akzentkante statt Glanzverlauf --------------------------------------
   Ersetzt den frueheren Verlaufs-Sweep. Der Brand Guide erlaubt keine
   Verlaeufe, deshalb markiert eine Kupfer-Haarlinie die Hervorhebung.      */

.sheen { position: relative; }
.sheen::after {
  content: "";
  position: absolute;
  left: -1px; right: -1px; top: -1px;
  height: 2px;
  background: var(--accent);
  transform-origin: left center;
  animation: drawLine 900ms var(--ease-soft) backwards;
  animation-delay: 700ms;
  pointer-events: none;
}

/* ---- Zustand "complete" und Export-Standbild ------------------------------
   body.is-complete  die Folie steht in ihrer letzten Ansicht (Zustand aus
                     js/stage.js, dient Folien-CSS als Haken)
   body.is-static    PDF-Export: jede Bewegung sofort am Ende, Endlosschleifen
                     halten an. Gleiche Regeln wie bei reduzierter Bewegung. */

body.is-static *, body.is-static *::before, body.is-static *::after {
  animation-duration: 0.01ms !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0ms !important;
}
body.is-static [data-reveal],
body.is-static [data-reveal-stagger] > *,
body.is-static [data-reveal-scale],
body.is-static .letters .ch {
  opacity: 1 !important;
  translate: none !important;
  scale: none !important;
}
body.is-static .letters .ch { transform: none !important; }
body.is-static [data-draw] { transform: scaleX(1) !important; }

/* ---- Zugaenglichkeit ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal],
  body.is-ready [data-reveal-stagger] > *,
  .letters .ch {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
  }
  .letters .ch { transform: none !important; }
}