/* =========================================================================
   lechweb — Reel 02 · Migration · cinematic dark hero (auto-play reel)
   Aesthetik: deep navy + cream, editorial Fraunces italic, JetBrains Mono.
   ========================================================================= */

/* Local fonts — kein Google-CDN, DSGVO-konform */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url('fonts/fraunces-latin-wght-normal.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-display: swap;
  font-weight: 300 700;
  src: url('fonts/fraunces-latin-wght-italic.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url('fonts/geist-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/geist-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('fonts/geist-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('fonts/geist-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2');
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: #0A1224;
  color: #F4ECDF;
  font-family: 'Geist', system-ui, sans-serif;
  font-feature-settings: 'ss01', 'cv11';
  overflow: hidden;       /* reel = single viewport, no scroll */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  --bg:        #0A1224;
  --bg-deep:   #060A18;
  --ink:       #F4ECDF;
  --ink-soft:  #C8BFA9;
  --ink-mute:  #6F6855;
  --line:      rgba(244,236,223,.12);
  --line-hot:  rgba(77,196,255,.35);
  --cyan:      #4DC4FF;
  --shopware:  #189EFF;
  --violet:    #8B5CF6;
  --gold:      #C8A35A;
  --rose:      #E25D7E;

  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-ui:      'Geist', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

/* ----- atmospheric layers ----------------------------------------------- */
.grain {
  position: fixed; inset: 0; z-index: 100; pointer-events: none;
  opacity: .08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
}
.vignette {
  position: fixed; inset: 0; z-index: 99; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, transparent 50%, rgba(0,0,0,.55) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.4) 0%, transparent 8%, transparent 92%, rgba(0,0,0,.5) 100%);
}
.aurora {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(60vmax 40vmax at 18% 12%, rgba(77,196,255,.18), transparent 60%),
    radial-gradient(50vmax 35vmax at 86% 78%, rgba(139,92,246,.15), transparent 60%),
    radial-gradient(40vmax 30vmax at 50% 110%, rgba(24,158,255,.12), transparent 60%);
  filter: blur(14px) saturate(1.1);
  opacity: .9;
}

/* ----- topbar ----------------------------------------------------------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 36px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.brand { display: flex; align-items: baseline; gap: 11px; }
.brand__mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  line-height: 1;
  color: var(--ink);
  font-variation-settings: "opsz" 144;
}
.brand__word {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .22em;
  color: var(--ink-soft);
}
.topbar__nav { display: flex; gap: 12px; align-items: center; }
.timecode { color: var(--cyan); font-variant-numeric: tabular-nums; }
.topbar__sep { opacity: .35; }

/* tiny pulsing REC dot — reads as "playing" rather than scroll-driven */
.rec-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 8px rgba(226,93,126,.7);
  margin-right: 4px;
  animation: recPulse 1.6s ease-in-out infinite;
}
@keyframes recPulse {
  0%, 100% { opacity: .35; transform: scale(.9); }
  50%      { opacity: 1;   transform: scale(1.05); }
}
/* rec-dot pulses continuously while the reel loops */

/* ----- hero section ----------------------------------------------------- */
.hero {
  position: fixed; inset: 0;
  width: 100%; height: 100vh;
  overflow: hidden;
}
/* soft cross-fade between loops so the restart doesn't snap-cut */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 30;
  background: var(--bg);
  opacity: var(--reel-fade, 0);
  pointer-events: none;
  transition: opacity .12s linear;
}
#scene {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 2;
  transition: filter .28s ease;
}

/* aberration during shatter — subtle chromatic edge */
.is-aberrating #scene {
  filter:
    drop-shadow(1.5px 0 0 rgba(226,93,126,.5))
    drop-shadow(-1.5px 0 0 rgba(77,196,255,.5));
}

.overlay {
  position: absolute; inset: 0;
  z-index: 5;
  pointer-events: none;
  display: grid;
  grid-template-columns: 76px 1fr 1fr 76px;
  grid-template-rows: 96px minmax(0, 1fr) auto 96px;
  column-gap: 0;
}

/* left rail — film slate */
.overlay__rail {
  grid-column: 1; grid-row: 2 / 4;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  padding: 24px 0;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .22em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.rail__num { color: var(--cyan); }
.rail__line {
  width: 1px; flex: 1; min-height: 80px;
  background: linear-gradient(to bottom, var(--line), transparent 75%);
}
.rail__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: .3em;
}

/* code stream — sits half over the laptop, half spilling off the right edge.
   mix-blend-mode: screen lets the bright tokens fuse with the screen below. */
.overlay__code {
  position: absolute;
  top: 7vh;
  left: 54%;
  width: min(58vw, 820px);
  height: clamp(320px, 62vh, 600px);
  pointer-events: none;
  overflow: hidden;
  z-index: 6;
  mix-blend-mode: screen;
  /* fade top, bottom AND right so the spill-off is soft, not chopped */
  -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%),
      linear-gradient(to right,  #000 0%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
      linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%),
      linear-gradient(to right,  #000 0%, #000 78%, transparent 100%);
          mask-composite: intersect;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink);
  letter-spacing: .005em;
  font-feature-settings: 'calt', 'liga';
}

.code-stream {
  margin: 0;
  padding: 0;
  white-space: pre;
  word-break: keep-all;
  text-shadow: 0 0 14px rgba(77,196,255,.18);
  will-change: transform;
}

/* token colors — muted cinematic, projection-friendly */
.code-stream .tok-c   { color: rgba(244,236,223,.42); font-style: italic; }
.code-stream .tok-c .tok-ok { color: #9BD888; font-style: normal; }
.code-stream .tok-c .tok-n  { color: rgba(244,236,223,.42); }
.code-stream .tok-k   { color: #80C8E8; }
.code-stream .tok-s   { color: #D4BD7E; }
.code-stream .tok-n   { color: #B5A3DA; }
.code-stream .tok-fn  { color: #E8B57A; }
.code-stream .tok-h   { color: rgba(244,236,223,.55); letter-spacing: .04em; }

/* caption — bottom left, lots of breathing room */
.overlay__caption {
  grid-column: 2 / 4; grid-row: 3;
  align-self: end;
  padding: 0 32px 12px 32px;
  max-width: 740px;
  pointer-events: auto;
}
.caption__kicker {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 16px 0;
  display: flex; align-items: center; gap: 10px;
}
.caption__kicker::before {
  content: ""; width: 24px; height: 1px; background: var(--cyan);
}
.caption__title {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(36px, 4.8vw, 76px);
  line-height: .98;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 20px 0;
  font-variation-settings: "opsz" 144;
}
.caption__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--cyan);
  font-variation-settings: "opsz" 144;
}
.caption__title .swap-in,
.caption__sub   .swap-in {
  display: inline-block;
  animation: swapIn .55s cubic-bezier(.2,.8,.2,1);
}
@keyframes swapIn {
  from { opacity: 0; transform: translateY(8px) }
  to   { opacity: 1; transform: translateY(0) }
}

/* ----- Akt 3 + 4 · golden hour — bigger, warm yellow, glowing -------- */
:root {
  --gold-hot:   #FFD86B;   /* warm sun yellow */
  --gold-glare: #FFF1B0;   /* highlight inside the shimmer */
  --gold-bleed: #FF8A4C;   /* coral counter-channel for glitch */
}

body[data-act="2"] .caption__title,
body[data-act="3"] .caption__title {
  font-size: clamp(48px, 6.4vw, 108px);
  letter-spacing: -.025em;
  line-height: .94;
  color: var(--gold-hot);
  margin-bottom: 24px;
}
body[data-act="2"] .caption__title em,
body[data-act="3"] .caption__title em {
  color: var(--gold-glare);
}
body[data-act="2"] .caption__sub,
body[data-act="3"] .caption__sub {
  font-size: clamp(16px, 1.4vw, 21px);
  color: rgba(255,241,176,.78);
}

/* ----- Akt 3 · Schwebezustand · floating + gold glitch --------------- */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@keyframes floatYSlow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes emGlitch {
  /* Most of the cycle: pulsing gold aura.
     Two short windows per cycle: hot RGB shear (the "twitch"). */
  0%, 100% {
    text-shadow:
      0 0 22px rgba(255,216,107,.6),
      0 0 56px rgba(255,216,107,.25);
    transform: translate(0, 0);
  }
  46% {
    text-shadow:
      0 0 28px rgba(255,216,107,.78),
      0 0 70px rgba(255,216,107,.35);
    transform: translate(0, 0);
  }
  47% {
    text-shadow:
      -3px 0 0 rgba(255,138,76,.95),
       3px 0 0 rgba(255,241,176,.95),
       0 0 26px rgba(255,216,107,.7);
    transform: translate(2px, 0);
  }
  49% {
    text-shadow:
       2px 1px 0 rgba(255,138,76,.88),
      -2px -1px 0 rgba(255,241,176,.88),
       0 0 26px rgba(255,216,107,.7);
    transform: translate(-2px, 1px);
  }
  50% {
    text-shadow:
      0 0 28px rgba(255,216,107,.78),
      0 0 70px rgba(255,216,107,.35);
    transform: translate(0, 0);
  }
  84% {
    text-shadow:
      0 0 28px rgba(255,216,107,.78),
      0 0 70px rgba(255,216,107,.35);
    transform: translate(0, 0);
  }
  85% {
    text-shadow:
       4px 0 0 rgba(255,138,76,.98),
      -4px 0 0 rgba(255,241,176,.98),
       0 0 32px rgba(255,216,107,.8);
    transform: translate(0, 0);
  }
  87% {
    text-shadow:
      -3px 1px 0 rgba(255,138,76,.88),
       3px -1px 0 rgba(255,241,176,.88),
       0 0 32px rgba(255,216,107,.8);
    transform: translate(1px, 0);
  }
  88% {
    text-shadow:
      0 0 28px rgba(255,216,107,.78),
      0 0 70px rgba(255,216,107,.35);
    transform: translate(0, 0);
  }
}
@keyframes subBreathe {
  0%, 100% { opacity: .78; }
  50%      { opacity: 1; }
}

body[data-act="2"] .caption__title {
  animation: floatY 4.2s cubic-bezier(.45,0,.55,1) infinite;
  text-shadow:
    0 0 32px rgba(255,216,107,.35),
    0 0 90px rgba(255,216,107,.18);
  will-change: transform;
}
body[data-act="2"] .caption__title em {
  display: inline-block;
  animation: emGlitch 3.4s linear infinite;
  will-change: transform, text-shadow;
}
body[data-act="2"] .caption__sub {
  animation:
    floatYSlow 5.6s cubic-bezier(.45,0,.55,1) infinite,
    subBreathe 3.4s ease-in-out infinite;
  animation-delay: -1.4s, 0s;
  will-change: transform, opacity;
}
/* tiny scanline-shimmer running across the kicker chip */
body[data-act="2"] .caption__kicker::after,
body[data-act="3"] .caption__kicker::after {
  content: "";
  display: inline-block;
  width: 18px; height: 1px;
  margin-left: 10px;
  background: linear-gradient(to right, transparent, var(--gold-hot), transparent);
  animation: kickerScan 1.6s linear infinite;
}
body[data-act="2"] .caption__kicker,
body[data-act="3"] .caption__kicker { color: var(--gold-hot); }
body[data-act="2"] .caption__kicker::before,
body[data-act="3"] .caption__kicker::before { background: var(--gold-hot); }
@keyframes kickerScan {
  0%   { opacity: 0; transform: translateX(-6px); }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(14px); }
}

/* ----- Akt 4 · Neuaufbau · WOW reveal + shimmer-sweep --------------- */
@keyframes wowReveal {
  /* one-shot cinematic entry: blurry + spread → sharp + tight */
  0%   { opacity: 0; transform: scale(.78) translateY(-10px); filter: blur(10px); letter-spacing: .14em; }
  35%  { opacity: 1;                                           filter: blur(0);   }
  60%  {                transform: scale(1.04) translateY(0);                       letter-spacing: -.012em; }
  100% { opacity: 1; transform: scale(1)   translateY(0); filter: blur(0);   letter-spacing: -.025em; }
}
@keyframes auraPulse {
  0%, 100% {
    text-shadow:
      0 0 38px rgba(255,216,107,.45),
      0 0 110px rgba(255,216,107,.22);
  }
  50% {
    text-shadow:
      0 0 56px rgba(255,216,107,.78),
      0 0 160px rgba(255,216,107,.42),
      0 0 240px rgba(255,216,107,.18);
  }
}
@keyframes shimmerSweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

body[data-act="3"] .caption__title {
  animation: auraPulse 3.4s ease-in-out infinite;
  will-change: text-shadow;
}
body[data-act="3"] .caption__title .swap-in {
  animation: wowReveal 1.3s cubic-bezier(.2,.8,.2,1);
}
body[data-act="3"] .caption__title em {
  display: inline-block;
  background: linear-gradient(110deg,
      var(--gold-hot)   0%,
      var(--gold-glare) 42%,
      #FFFFFF           50%,
      var(--gold-glare) 58%,
      var(--gold-hot)   100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmerSweep 3.2s cubic-bezier(.5,0,.5,1) infinite;
  filter: drop-shadow(0 0 22px rgba(255,216,107,.65));
  will-change: background-position, filter;
}
/* a soft golden halo "behind" the headline — fakes a stage spotlight */
body[data-act="3"] .overlay__caption {
  position: relative;
}
body[data-act="3"] .overlay__caption::before {
  content: "";
  position: absolute;
  left: -8%; right: -8%; bottom: -10%; top: -20%;
  background: radial-gradient(ellipse 60% 50% at 30% 60%,
      rgba(255,216,107,.18) 0%,
      rgba(255,216,107,.08) 35%,
      transparent 70%);
  pointer-events: none;
  z-index: -1;
  animation: auraPulse 3.4s ease-in-out infinite;
}
.caption__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 540px;
  margin: 0 0 22px 0;
  font-variation-settings: "opsz" 36;
}

.caption__chips {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase;
}
.chip {
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink-soft);
  transition: color .35s, border-color .35s, background .35s, opacity .35s, transform .35s;
  background: rgba(244,236,223,.02);
}
.chip.is-active   { color: var(--cyan);    border-color: var(--line-hot); background: rgba(77,196,255,.08); }
.chip.is-fading   { color: var(--ink-mute); opacity: .45; }
.chip.is-broken   { color: var(--rose);    border-color: rgba(226,93,126,.4); text-decoration: line-through; opacity: .5; }
.chip.is-target.is-active {
  color: var(--shopware);
  border-color: var(--shopware);
  background: rgba(24,158,255,.12);
  box-shadow: 0 0 24px rgba(24,158,255,.25);
}
.chip--target { opacity: .25; transform: translateY(2px); }
.chip--target.is-active { opacity: 1; transform: translateY(0); }

/* progress bar — doubles as a video-style scrub timeline */
.overlay__progress {
  grid-column: 2 / 4; grid-row: 4;
  align-self: end;
  padding: 0 32px 18px 32px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .2em;
  color: var(--ink-mute);
  text-transform: uppercase;
  pointer-events: auto;
}
.progress__bar {
  height: 16px;          /* enlarged hit area */
  background: transparent;
  position: relative;
  cursor: pointer;
}
.progress__bar::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 8px;
  height: 1px;
  background: var(--line);
}
.progress__fill {
  position: absolute; left: 0; top: 7px; height: 3px;
  background: linear-gradient(to right, var(--cyan), var(--shopware));
  box-shadow: 0 0 12px rgba(77,196,255,.5);
  width: 0%;
  transition: width .14s linear;
  pointer-events: none;
}
.progress__fill::after {
  content: "";
  position: absolute; right: -4px; top: -3px;
  width: 8px; height: 9px;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(77,196,255,.8);
  opacity: 0;
  transition: opacity .25s ease;
}
.progress__bar:hover .progress__fill::after { opacity: 1; }

/* replay — appears once the reel finishes */
.replay {
  grid-column: 4; grid-row: 4;
  align-self: end; justify-self: end;
  margin: 0 36px 22px 0;
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
  padding: 9px 14px;
  border-radius: 2px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s ease, transform .45s ease, color .25s, border-color .25s, background .25s;
}
.replay:hover {
  color: var(--cyan);
  border-color: var(--line-hot);
  background: rgba(77,196,255,.06);
}
.replay__icon {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0;
  display: inline-block;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.replay:hover .replay__icon { transform: rotate(-180deg); }

/* (replay-button stays hidden; the reel loops automatically) */

/* ----- mobile ----------------------------------------------------------- */
@media (max-width: 880px) {
  .topbar { padding: 16px 18px; font-size: 10px; }
  .overlay {
    grid-template-columns: 36px 1fr 36px;
    grid-template-rows: 80px minmax(0, 1fr) auto 70px;
  }
  .overlay__rail { grid-column: 1; grid-row: 2 / 4; padding: 12px 0; }
  .overlay__code {
    top: 12vh;
    width: min(86vw, 420px);
    height: 28vh;
    font-size: 11px;
  }
  .overlay__caption { grid-column: 2; grid-row: 3; padding: 16px; }
  .caption__title { font-size: clamp(30px, 7vw, 52px); }
  .overlay__progress { grid-column: 2; grid-row: 4; padding: 0 16px 12px; font-size: 9px; letter-spacing: .14em; }
  .replay { grid-column: 3; grid-row: 4; margin: 0 12px 12px 0; padding: 7px 10px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .rec-dot { animation: none; }
  .caption__title .swap-in,
  .caption__sub   .swap-in { animation: none; }
  body[data-act="2"] .caption__title,
  body[data-act="2"] .caption__title em,
  body[data-act="2"] .caption__sub,
  body[data-act="2"] .caption__kicker::after,
  body[data-act="3"] .caption__title,
  body[data-act="3"] .caption__title em,
  body[data-act="3"] .caption__title .swap-in,
  body[data-act="3"] .caption__kicker::after,
  body[data-act="3"] .overlay__caption::before { animation: none; }
}