/* ───────────────────────────────────────────────────────────────────
   Pitch deck animation layer.

   Hooks onto <deck-stage>'s [data-deck-active] mechanism without
   touching the engine. Adds:
     • Slide-to-slide transitions (direction-aware via .deck-dir-prev/next)
     • Universal staggered reveal of slide content on enter
     • Special-case animations per slide (bridge SVG, donut, cards)
     • Counter-up via .count-up [data-count-to]
   ─────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   SLIDE-LEVEL entry transition (incoming slide only)
   The engine flips visibility binary, so we can't fade out the
   outgoing slide — but we CAN slide the new one in.
   ═══════════════════════════════════════════════════════════════════ */

.slide.deck-enter {
  animation: deck-slide-enter 540ms cubic-bezier(.2,.65,.25,1) both;
}
deck-stage[data-deck-dir="prev"] .slide.deck-enter {
  animation-name: deck-slide-enter-back;
}
@keyframes deck-slide-enter {
  0%   { opacity: 0; transform: translateX(4%); filter: blur(3px); }
  100% { opacity: 1; transform: translateX(0);  filter: blur(0); }
}
@keyframes deck-slide-enter-back {
  0%   { opacity: 0; transform: translateX(-4%); filter: blur(3px); }
  100% { opacity: 1; transform: translateX(0);   filter: blur(0); }
}

/* ═══════════════════════════════════════════════════════════════════
   CONTENT REVEAL (stagger on slide enter)
   When a slide gets .deck-enter we animate its key children in.
   We target by structural selectors so no markup changes are needed.
   ═══════════════════════════════════════════════════════════════════ */

@keyframes deck-rise {
  0%   { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes deck-rise-strong {
  0%   { opacity: 0; transform: translateY(48px) scale(.985); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes deck-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes deck-pop {
  0%   { opacity: 0; transform: translateY(18px) scale(.92); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Default: bring in eyebrow → h1 → lede paragraph → body sections */
.slide.deck-enter .eyebrow {
  animation: deck-rise 620ms cubic-bezier(.2,.65,.25,1) both;
  animation-delay: 80ms;
}
.slide.deck-enter h1,
.slide.deck-enter h2 {
  animation: deck-rise-strong 720ms cubic-bezier(.2,.65,.25,1) both;
  animation-delay: 160ms;
}
.slide.deck-enter > div > p,
.slide.deck-enter > p {
  animation: deck-rise 620ms cubic-bezier(.2,.65,.25,1) both;
  animation-delay: 260ms;
}

/* Body sections (two-column / three-column blocks) */
.slide.deck-enter .body > * {
  animation: deck-rise 660ms cubic-bezier(.2,.65,.25,1) both;
}
.slide.deck-enter .body > *:nth-child(1) { animation-delay: 340ms; }
.slide.deck-enter .body > *:nth-child(2) { animation-delay: 440ms; }
.slide.deck-enter .body > *:nth-child(3) { animation-delay: 540ms; }

/* Step row (Slide 06) — cascade 4 steps */
.slide.deck-enter .step-row > * {
  animation: deck-rise 600ms cubic-bezier(.2,.65,.25,1) both;
}
.slide.deck-enter .step-row > *:nth-child(1) { animation-delay: 280ms; }
.slide.deck-enter .step-row > *:nth-child(2) { animation-delay: 380ms; }
.slide.deck-enter .step-row > *:nth-child(3) { animation-delay: 480ms; }
.slide.deck-enter .step-row > *:nth-child(4) { animation-delay: 580ms; }

/* Cards (Slide 01 decorative, Slide 05 medium) */
.slide.deck-enter .card2 {
  animation: deck-card-in 820ms cubic-bezier(.2,.65,.25,1) both;
  animation-delay: 380ms;
}
.slide.deck-enter .card2.back {
  animation-delay: 280ms;
}
@keyframes deck-card-in {
  0%   { opacity: 0; transform: translateY(40px) rotate(0deg) scale(.92); }
  100% { opacity: 1; }
}
/* preserve the rotation transforms that are inline-set on parent */
.slide.deck-enter .cards-stage > * {
  animation: deck-fade 800ms cubic-bezier(.2,.65,.25,1) both;
}
.slide.deck-enter .cards-stage > *:nth-child(1) { animation-delay: 280ms; }
.slide.deck-enter .cards-stage > *:nth-child(2) { animation-delay: 460ms; }

/* Stats grids (Slide 05) */
.slide.deck-enter .stat {
  animation: deck-pop 560ms cubic-bezier(.2,.65,.25,1) both;
}
.slide.deck-enter .stat:nth-child(1) { animation-delay: 480ms; }
.slide.deck-enter .stat:nth-child(2) { animation-delay: 560ms; }
.slide.deck-enter .stat:nth-child(3) { animation-delay: 640ms; }
.slide.deck-enter .stat:nth-child(4) { animation-delay: 720ms; }

/* Pills/Eyebrow chips */
.slide.deck-enter .pill {
  animation: deck-rise 500ms cubic-bezier(.2,.65,.25,1) both;
  animation-delay: 240ms;
}

/* Three-up cost cards (Slide 13) — stagger left-to-right */
.slide.deck-enter [style*="grid-template-columns: repeat(3, 1fr)"] > *,
.slide.deck-enter [style*="grid-template-columns:repeat(3, 1fr)"] > * {
  animation: deck-rise-strong 700ms cubic-bezier(.2,.65,.25,1) both;
}
.slide.deck-enter [style*="grid-template-columns: repeat(3, 1fr)"] > *:nth-child(1),
.slide.deck-enter [style*="grid-template-columns:repeat(3, 1fr)"] > *:nth-child(1) { animation-delay: 320ms; }
.slide.deck-enter [style*="grid-template-columns: repeat(3, 1fr)"] > *:nth-child(2),
.slide.deck-enter [style*="grid-template-columns:repeat(3, 1fr)"] > *:nth-child(2) { animation-delay: 440ms; }
.slide.deck-enter [style*="grid-template-columns: repeat(3, 1fr)"] > *:nth-child(3),
.slide.deck-enter [style*="grid-template-columns:repeat(3, 1fr)"] > *:nth-child(3) { animation-delay: 560ms; }

/* ═══════════════════════════════════════════════════════════════════
   SPECIAL: bridge SVG draw (Slide 03 Insight)
   The dashed bridge path draws itself in.
   ═══════════════════════════════════════════════════════════════════ */
.slide.deck-enter svg path[stroke-dasharray="8 10"] {
  animation: deck-bridge-draw 1400ms cubic-bezier(.2,.65,.25,1) both;
  animation-delay: 500ms;
}
@keyframes deck-bridge-draw {
  0%   { stroke-dashoffset: 1000; opacity: 0; }
  20%  { opacity: 1; }
  100% { stroke-dashoffset: 0;    opacity: 1; }
}
.slide svg path[stroke-dasharray="8 10"] {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
}

/* Bridge endpoint circles pop in */
.slide.deck-enter svg circle[r="22"] {
  animation: deck-pop 500ms cubic-bezier(.2,.65,.25,1) both;
  transform-origin: center;
  transform-box: fill-box;
}
.slide.deck-enter svg circle[r="22"]:nth-of-type(1) { animation-delay: 380ms; }
.slide.deck-enter svg circle[r="22"]:nth-of-type(2) { animation-delay: 1500ms; }

/* ═══════════════════════════════════════════════════════════════════
   SPECIAL: donut chart sweep (Slide 12 Stock)
   The big 99% ring draws itself. We use stroke-dashoffset animation.
   ═══════════════════════════════════════════════════════════════════ */
.slide.deck-enter svg circle[stroke-dasharray="471.24"] {
  animation: deck-donut-fill 1600ms cubic-bezier(.2,.65,.25,1) both;
  animation-delay: 500ms;
}
@keyframes deck-donut-fill {
  0%   { stroke-dashoffset: 471.24; }
  100% { stroke-dashoffset: 4.71; }
}

/* ═══════════════════════════════════════════════════════════════════
   SPECIAL: floating cards (loop while slide is active)
   ═══════════════════════════════════════════════════════════════════ */
@keyframes deck-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
/* Slide 01 corner card breathes gently — but only after entrance done.
   We trigger via a parent class on the rotated wrapper. The inline rotate
   stays on the wrapper, our anim is on the inner .card2. */
.slide.deck-enter[data-screen-label*="Title" i] .card2 {
  /* card-in finishes at 1200ms (380ms delay + 820ms duration) */
}

/* ═══════════════════════════════════════════════════════════════════
   SPECIAL: QR code subtle scan-line (loop)
   ═══════════════════════════════════════════════════════════════════ */
.c-qr {
  position: relative;
  overflow: hidden;
}
.c-qr::after {
  content: '';
  position: absolute;
  inset: 0 0 100% 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(184,150,90,0.55) 45%,
    rgba(184,150,90,0.95) 50%,
    rgba(184,150,90,0.55) 55%,
    transparent 100%);
  animation: deck-scan 3.4s cubic-bezier(.4,0,.6,1) infinite;
  pointer-events: none;
  opacity: 0;
}
.slide[data-deck-active] .c-qr::after {
  opacity: 0.7;
}
@keyframes deck-scan {
  0%    { inset: -8% 0 100% 0; opacity: 0; }
  8%    { opacity: 0.7; }
  92%   { opacity: 0.7; }
  100%  { inset: 100% 0 -8% 0; opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   SPECIAL: italic accent words (the "automatisch.", "staubig", etc.)
   Subtle underline-draw on slide enter
   ═══════════════════════════════════════════════════════════════════ */
.slide h1 span[style*="font-style: italic"] {
  position: relative;
  display: inline-block;
}
.slide h1 span[style*="font-style: italic"]::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0.04em;
  height: 0.06em;
  background: currentColor;
  opacity: 0.35;
  transition: right 900ms cubic-bezier(.2,.65,.25,1);
}
.slide.deck-enter h1 span[style*="font-style: italic"]::after {
  right: 0;
  transition-delay: 800ms;
}

/* ═══════════════════════════════════════════════════════════════════
   COUNT-UP zahlen (Slide 12 "990", Slide 13 prices)
   The JS sets data-count-from / data-count-to and animates innerText.
   We just make sure tabular-nums so widths don't jitter.
   ═══════════════════════════════════════════════════════════════════ */
.count-up,
[data-count-to] {
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════
   PROGRESS BAR (top of every slide while it's active)
   ═══════════════════════════════════════════════════════════════════ */
deck-stage .slide::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--q-blue) 0%, var(--p-brass) 100%);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 10;
  pointer-events: none;
}
.slide.deck-enter::before {
  animation: deck-progress 720ms cubic-bezier(.2,.65,.25,1) both;
  animation-delay: 40ms;
}
@keyframes deck-progress {
  0%   { transform: scaleX(0); opacity: 0.9; }
  100% { transform: scaleX(1); opacity: 0.9; }
}

/* ═══════════════════════════════════════════════════════════════════
   HINT-OVERLAY (custom hint for first-time visitors)
   ═══════════════════════════════════════════════════════════════════ */
.deck-hint {
  position: fixed;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 22px;
  background: rgba(15,16,20,0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(255,255,255,0.92);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  z-index: 2147482999;
  opacity: 0;
  pointer-events: none;
  animation: deck-hint-show 5400ms ease-out both;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.deck-hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 5px;
  font-family: inherit;
  font-size: 11px;
  background: rgba(255,255,255,0.14);
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.18);
}
@keyframes deck-hint-show {
  0%    { opacity: 0; transform: translate(-50%, 10px); }
  8%    { opacity: 1; transform: translate(-50%, 0); }
  82%   { opacity: 1; transform: translate(-50%, 0); }
  100%  { opacity: 0; transform: translate(-50%, -6px); }
}

/* ═══════════════════════════════════════════════════════════════════
   ACCESSIBILITY — honor prefers-reduced-motion
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .slide, .slide *, .slide::before {
    animation: none !important;
    transition: opacity 200ms ease !important;
  }
  .c-qr::after { display: none; }
  .deck-hint { animation: none; opacity: 0; }
}