/* No Cheats Studio – Scroll-Teaser
   Alles ist unter .nct-* gekapselt, damit nichts mit style.css der App kollidiert.
   Farben, Radien, Schatten und Schriften folgen dem Design System "No Cheats" (tokens.css). */

.nct-scroll {
  --nct-bg: #101216;
  --nct-panel: #181b21;
  --nct-panel-elevated: #20242b;
  --nct-surface-3: #2a2f37;
  --nct-panel-deep: #0b0d10;
  --nct-border: #323741;
  --nct-text: #f1f3f6;
  --nct-text-2: #b6bcc7;
  --nct-text-dim: #8e95a2;
  --nct-accent: #6aa8ff;
  --nct-accent-fill: #2262d6;
  --nct-teal: #22d3ee;
  --nct-success: #3ccf6e;
  --nct-display: "Space Grotesk", "Segoe UI Variable Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --nct-sans: "Inter", "Segoe UI Variable Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --nct-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  position: relative;
  /* Hoehe setzt teaser.js aus data-vh-per-second (Fallback hier) */
  height: 880vh;
  background: var(--nct-bg);
}

.nct-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--nct-bg);
}

.nct-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.nct-stage-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.nct-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Buehne: feste 1920x1080, per transform eingepasst ---------- */
.nct-stage {
  position: absolute;
  left: 0; top: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  color: var(--nct-text);
  font-family: var(--nct-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.nct-stage *, .nct-stage *::before, .nct-stage *::after { box-sizing: border-box; }
.nct-scene { position: absolute; inset: 0; visibility: hidden; }
.nct-scene.is-on { visibility: visible; }

.nct-stage .ground { position: absolute; inset: 0; overflow: hidden; }
.nct-stage .words { position: absolute; margin: 0; display: flex; flex-direction: column; gap: 24px; }
.nct-stage .words > * { margin: 0; }
.nct-stage .line { font-family: var(--nct-display); font-size: 112px; line-height: 1.1; font-weight: 700; letter-spacing: -0.022em; white-space: nowrap; }
.nct-stage .line .nct-w { display: inline-block; white-space: pre; }
.nct-stage .sub { font-size: 40px; line-height: 1.4; color: var(--nct-text-2); }
.nct-stage .panel {
  position: absolute;
  background: var(--nct-panel);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .06), 0 8px 24px rgba(0, 0, 0, .32), 0 2px 6px rgba(0, 0, 0, .24);
}
.nct-stage .meta { font-family: var(--nct-mono); font-size: 22px; color: var(--nct-text-dim); font-variant-numeric: tabular-nums; }
.nct-stage .name { font-family: var(--nct-sans); font-size: 26px; font-weight: 600; color: var(--nct-text); }
.nct-stage .well { position: absolute; background: var(--nct-panel-deep); border-radius: 8px; }
.nct-stage .bar { position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(to top, #17c1f5, var(--nct-teal)); transform-origin: 50% 100%; }
.nct-stage .clip { position: absolute; height: 84px; border-radius: 12px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 16%, #181b21); }
.nct-stage .clip svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.nct-stage .clip b { position: absolute; left: 14px; top: 8px; font-size: 18px; font-weight: 600; color: var(--nct-text); }
.nct-stage .head { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--nct-accent); }
.nct-stage .badge { display: inline-block; padding: 4px 14px; border-radius: 999px; font-size: 20px; font-weight: 600; background: var(--nct-accent-fill); color: #fff; }

/* Kein Ruckeln durch Layout: die Buehne wird nur transformiert */
.nct-stage, .nct-stage * { transition: none !important; animation: none !important; }