/* =========================================================================
   Results-Scroll · scoped styles for #results (sticky stage of glass cards)
   + #results-chart (single floating glass chart card)
   ========================================================================= */

/* ---------- Stage container & sticky pin ---------- */
.results-stack {
  position: relative;
  min-height: 620vh;
  overflow: visible;
  background: #000000;
}
.results-pin-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: clip;
  isolation: isolate;
  background: #000000;
  perspective: 1500px;
  perspective-origin: center 55%;
}

/* ---------- Scene cards (z-stacked; outgoing card folds away on scroll) ---------- */
/* All three cards stack at the same center position. Card 1 is on top initially.
   As scroll-progress passes each card's hold-end, that card folds away (rotateX +
   scale + fade) revealing the one underneath. Pattern adapted from fourmula.ai. */
.results-scene {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1100px, 90vw);
  transform: translate(-50%, -50%);
  transform-origin: center 60%;
  opacity: 1;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(48px, 7vh, 88px) clamp(32px, 5vw, 80px);
  border-radius: 28px;
  /* Bg fully opaque so the card behind doesn't bleed through during the fold.
     Mesh-style: solid base + corner color blooms (purple top-left, cyan bottom-right)
     + subtle white sheen — gives the dark surface visual texture without losing solidity. */
  background:
    radial-gradient(at 22% 12%, rgba(160,107,255,0.10) 0%, transparent 55%),
    radial-gradient(at 82% 88%, rgba(0,224,255,0.07) 0%, transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 50%, rgba(255,255,255,0.03) 100%),
    rgb(13,14,21);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.40),
    inset 0 0 80px rgba(160,107,255,0.06),
    0 32px 80px rgba(0,0,0,0.55),
    0 -8px 80px rgba(0,224,255,0.10),
    0 24px 100px rgba(160,107,255,0.24),
    0 0 60px rgba(51,85,255,0.14);
  will-change: opacity, transform;
}
/* Reverse z-stacking: card 1 sits on top, card 3 at the bottom of the stack */
.results-scene[data-scene="1"] { z-index: 3; }
.results-scene[data-scene="2"] { z-index: 2; }
.results-scene[data-scene="3"] { z-index: 1; }

/* Specular highlight — soft inner top-light, like glass refracting */
.results-scene::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 60% at 28% 0%, rgba(255,255,255,0.13) 0%, transparent 55%),
    radial-gradient(80% 50% at 78% 100%, rgba(160,107,255,0.10) 0%, transparent 60%);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 0;
}
/* Card edge sheen — gradient ring around the border, brighter top-left, accent bottom-right */
.results-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.22),
    transparent 35%,
    transparent 65%,
    rgba(160,107,255,0.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1px;
  pointer-events: none;
}
.results-scene > * { position: relative; z-index: 1; }

/* ============================================================================
   Vertical glow spine running through #results (Tag1 → Tag2 → Tag3 → Chart).
   --rs-fill is a CSS variable (0–1) set by results-scroll.js. The fill grows
   from top→bottom as the user scrolls through the 620vh pin distance. The
   spine itself sits absolute inside #results, the fill is a child that
   scales vertically. Same Glow-Schema wie editorial-quote-hairline auf
   voice-agent. ========================================================== */
.results-spine {
  position: absolute;
  top: clamp(40px, 8vh, 96px);
  bottom: clamp(40px, 8vh, 96px);
  /* Rechts neben den Cards, nicht zentriert (sonst von Cards überdeckt). */
  right: clamp(12px, 4vw, 28px);
  width: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.05);
  overflow: hidden;
  pointer-events: none;
  z-index: 4; /* über den Cards damit Glow nicht von Card-Background verdeckt */
  /* Single drop-shadow (vorher 2 gestackt): gleicher Look, halbe Filter-Kosten beim Repaint. */
  filter: drop-shadow(0 0 18px rgba(108,140,255,0.42));
}
.results-spine-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.9) 0%,
    rgba(0,224,255,0.85) 30%,
    rgba(108,140,255,0.85) 65%,
    rgba(160,107,255,0.9) 100%);
  /* Boxshadow auf 2 Schatten reduziert (vorher 3) für ruhigeres Painting waehrend Scroll. */
  box-shadow:
    0 0 14px rgba(0,224,255,0.55),
    0 0 38px rgba(108,140,255,0.30);
  transform-origin: top center;
  /* translateZ erzwingt eigene GPU-Compositor-Layer → keine Repaint-Kette beim Wachsen. */
  transform: translateZ(0) scaleY(var(--rs-fill, 0));
  will-change: transform;
  backface-visibility: hidden;
  /* Keine CSS-Transition: JS aktualisiert --rs-fill / --rs-bridge-fill jeden
     requestAnimationFrame (60fps). Eine 120ms-Transition wuerde nur Lag zur
     Scroll-Position addieren — die Linie wirkt dann "schnappend" statt
     synchron zum Scroll. */
  transition: none;
}
/* Auf Mobile verbergen — sieht wie ein Browser-Scrollbar aus. */
@media (max-width: 768px) {
  .results-spine { display: none; }
}
/* Auf Desktop ist der spine subtiler (mehr "Atmosphäre" als "Indikator"). */
@media (min-width: 769px) {
  .results-spine {
    top: clamp(60px, 10vh, 120px);
    bottom: clamp(60px, 10vh, 120px);
    width: 2px;
  }
}

/* Bridge-Hairline #results → #results-chart. Connector im Section-Flow,
   wächst beim Scrollen. Bewusst lang gezogen, damit nach "Sie sind raus."
   ein echter Spannungsbogen aufgebaut wird, bevor "Vom Onboarding zum
   Autopilot." auftaucht. Mobile ist etwas kürzer damit die Page nicht
   unnötig wächst. */
.results-bridge-spine {
  position: relative;
  width: 3px;
  height: clamp(320px, 48vh, 560px);
  margin: clamp(-32px, -4vh, -16px) auto 0;
  background: rgba(255,255,255,0.04);
  border-radius: 2px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 0 18px rgba(108,140,255,0.45));
}
@media (max-width: 768px) {
  .results-bridge-spine { height: clamp(220px, 38vh, 360px); width: 2px; }
  /* drop-shadow blur ist auf Mobile global gekillt (mobile.css filter:none).
     Hier nur die Hoehen-Reduktion. */
}
.results-bridge-spine-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(160,107,255,0.9) 0%,
    rgba(108,140,255,0.85) 60%,
    rgba(0,224,255,0.85) 100%);
  transform-origin: top center;
  /* GPU-Layer + identische transition:none (siehe oben). */
  transform: translateZ(0) scaleY(var(--rs-bridge-fill, 0));
  will-change: transform;
  backface-visibility: hidden;
  /* Keine CSS-Transition: JS aktualisiert --rs-fill / --rs-bridge-fill jeden
     requestAnimationFrame (60fps). Eine 120ms-Transition wuerde nur Lag zur
     Scroll-Position addieren — die Linie wirkt dann "schnappend" statt
     synchron zum Scroll. */
  transition: none;
}

/* Eyebrow tag (small mono uppercase) above the number — pattern matches .bracket-label on the rest of the site */
.results-eyebrow {
  display: inline-block;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.55);
  margin-bottom: clamp(20px, 2.5vh, 36px);
  text-transform: uppercase;
}

/* Number with backlit glow halo — number floats with a soft purple-blue radial behind it */
.results-num {
  position: relative;
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  font-size: clamp(120px, 13vw, 220px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: rgba(255,255,255,0.85);
  margin-bottom: clamp(20px, 2.5vh, 36px);
  user-select: none;
  pointer-events: none;
  will-change: transform;
}
.results-num::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240%;
  height: 240%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(160,107,255,0.70) 0%, rgba(108,140,255,0.40) 30%, rgba(0,224,255,0.18) 55%, transparent 80%);
  filter: blur(48px);
  z-index: -1;
  pointer-events: none;
}

.results-statement {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 5.2vw, 88px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #ffffff;
  text-align: center;
  max-width: 900px;
  will-change: transform;
  /* Override site-wide h2 rules that don't fit this section */
  text-transform: none;
}
/* Site-wide JS auto-adds .has-glow-heading to every section h2 (core.html inline + assets/css/glow.css).
   Two pseudos are added: ::before (purple/accent radial) and ::after (white/blue spotlight ellipse).
   Both compete with our card treatment — suppress both on our statements. */
.results-statement.has-glow-heading::before,
.results-statement.has-glow-heading::after,
.results-chart-title.has-glow-heading::before,
.results-chart-title.has-glow-heading::after {
  display: none !important;
  content: none !important;
}
.results-chart-title { text-transform: none; }

.results-sub {
  margin: clamp(20px, 3vh, 36px) 0 0;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
  max-width: 560px;
}

/* ---------- Chart-Reveal section · single floating glass card ---------- */
.results-chart-section {
  position: relative;
  padding: 200px 24px 200px;
  background: #000000;
  overflow: hidden;
  perspective: 1500px;
  perspective-origin: center top;
}
.results-chart-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(40px, 5vh, 72px) clamp(32px, 4vw, 80px);
  text-align: center;
  border-radius: 28px;
  background:
    radial-gradient(at 22% 12%, rgba(160,107,255,0.10) 0%, transparent 55%),
    radial-gradient(at 82% 88%, rgba(0,224,255,0.07) 0%, transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 50%, rgba(255,255,255,0.03) 100%),
    rgb(13,14,21);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.40),
    inset 0 0 80px rgba(160,107,255,0.06),
    0 32px 80px rgba(0,0,0,0.55),
    0 -8px 80px rgba(0,224,255,0.10),
    0 24px 100px rgba(160,107,255,0.26),
    0 0 60px rgba(51,85,255,0.14);
  position: relative;
  /* Fold-in animation when entering viewport — same family as scene-card fold-out, reversed. */
  transform: translateY(60px) rotateX(-22deg) scale(0.92);
  transform-origin: center top;
  opacity: 0;
  transition:
    transform 1100ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.results-chart-inner.is-revealed {
  transform: translateY(0) rotateX(0) scale(1);
  opacity: 1;
}
/* Chart-card specular highlight — matches scene cards */
.results-chart-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 60% at 28% 0%, rgba(255,255,255,0.13) 0%, transparent 55%),
    radial-gradient(80% 50% at 78% 100%, rgba(160,107,255,0.10) 0%, transparent 60%);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 0;
}
.results-chart-inner > * { position: relative; z-index: 1; }
.results-chart-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.22),
    transparent 35%,
    transparent 65%,
    rgba(160,107,255,0.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1px;
  pointer-events: none;
}
.results-chart-title {
  margin: 16px 0 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 5vw, 72px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #ffffff;
}
.results-chart-subtitle {
  margin: 0 auto 56px;
  max-width: 560px;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.50);
}
.results-chart-stage {
  position: relative;
  margin: 0 auto;
  max-width: 880px;
}
.results-chart-svg {
  width: 100%;
  height: auto;
  display: block;
}
.results-chart-caveat {
  margin: 32px 0 0;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.35);
}

/* SVG curve animation — controlled via JS adding .is-drawn */
.results-chart-svg .chart-line-manual,
.results-chart-svg .chart-line-core {
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  transition: stroke-dashoffset 1500ms cubic-bezier(0.65, 0, 0.35, 1);
}
.results-chart-svg .chart-line-manual {
  transition-duration: 600ms;
  transition-delay: 0ms;
}
.results-chart-svg .chart-line-core {
  transition-duration: 1500ms;
  transition-delay: 200ms;
}
.results-chart-svg.is-drawn .chart-line-manual,
.results-chart-svg.is-drawn .chart-line-core {
  stroke-dashoffset: 0;
}

.results-chart-svg .chart-anchor,
.results-chart-svg .chart-axis-label,
.results-chart-svg .chart-axis-tick {
  opacity: 0;
  transition: opacity 400ms ease-out;
}
.results-chart-svg.is-drawn .chart-anchor { opacity: 1; }
.results-chart-svg.is-drawn .chart-axis-label,
.results-chart-svg.is-drawn .chart-axis-tick { opacity: 1; }
.results-chart-svg.is-drawn .chart-anchor[data-i="0"] { transition-delay: 1700ms; }
.results-chart-svg.is-drawn .chart-anchor[data-i="1"] { transition-delay: 1850ms; }
.results-chart-svg.is-drawn .chart-anchor[data-i="2"] { transition-delay: 2000ms; }
.results-chart-svg.is-drawn .chart-anchor[data-i="3"] { transition-delay: 2150ms; }
.results-chart-svg.is-drawn .chart-axis-label { transition-delay: 1700ms; }
.results-chart-svg.is-drawn .chart-axis-tick  { transition-delay: 1700ms; }

/* ---------- Mobile (V3 2026-05-13): Desktop sticky cross-fade Pattern aktiv.
   Die V2-Mobile-Fallback hat die scenes auf relative gesetzt und damit den
   195px-Right-Shift-Bug (left:50% blieb stehen, transform wurde gekillt)
   verursacht. Jetzt: sticky-pin bleibt, scenes absolute + translate(-50%,-50%),
   Card-Folds wie auf Desktop. Card-Größen + Type-Scale werden runtergetuned.
   ---------- */
@media (max-width: 768px) {
  .results-scene {
    width: min(88vw, 460px);
    padding: clamp(36px, 7vh, 56px) clamp(20px, 5vw, 36px);
  }
  .results-num {
    font-size: clamp(72px, 22vw, 110px);
    margin-bottom: 14px;
  }
  .results-statement {
    font-size: clamp(22px, 5.6vw, 32px);
    line-height: 1.15;
  }
  .results-chart-section { padding: 60px 16px 100px; }
  .results-chart-inner {
    padding: 40px 24px;
  }
}

/* ---------- Reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .results-stack { min-height: auto; }
  .results-pin-stage {
    position: static;
    height: auto;
    display: block;
    padding: 60px 16px;
  }
  .results-scene {
    position: static;
    transform: none !important;
    opacity: 1 !important;
    width: 100%;
    margin: 0 0 32px;
  }
  .results-num,
  .results-statement {
    transform: none !important;
  }
  .results-chart-svg .chart-line-manual,
  .results-chart-svg .chart-line-core {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  .results-chart-svg .chart-anchor,
  .results-chart-svg .chart-axis-label,
  .results-chart-svg .chart-axis-tick {
    opacity: 1 !important;
    transition: none !important;
  }
  .results-chart-inner {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ---------- Small mobile (<= 480px): drop the rotated y-axis label ---------- */
@media (max-width: 480px) {
  .results-chart-svg .chart-axis-label[transform*="rotate"] {
    display: none;
  }
}