/* Get Lost Labs — minimal styles. The video carries the page; CSS just
   pins, positions, and fades. ~3kb, no framework. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: #000;
  color: #fff;
  font-family: "Space Mono", ui-monospace, monospace;
  -webkit-font-smoothing: antialiased;
}

html { overflow-x: clip; }
body { min-height: 100vh; }

/* ---------- INTRO ---------- */

.intro {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 24px;
  background: #000;
}

.intro .eyebrow {
  font-size: 10px;
  letter-spacing: 0.35em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 24px;
}

.intro .title {
  font-family: "Instrument Serif", "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(72px, 14vw, 180px);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.intro .hint {
  margin-top: 32px;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  animation: bob 2.4s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50%      { transform: translateY(6px); opacity: 0.8; }
}

/* ---------- JOURNEY (the pinned section) ---------- */

.journey {
  /* 800vh = 1 viewport (the pinned video) + 7 viewports (the scrub
     rail). The sticky pin has 7 viewports of room to stick while the
     user scrolls. */
  height: 800vh;
  position: relative;
}

.journey-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #000;
}

#journey-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Edge darkening so text always reads */
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.20) 25%,
      rgba(0,0,0,0.20) 70%,
      rgba(0,0,0,0.85) 100%);
  z-index: 1;
}

.overlays {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: center;
  padding: 0 8vw;
}

.line {
  position: absolute;
  font-family: "Instrument Serif", "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(36px, 6vw, 84px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.4s ease-out;
  max-width: 80vw;
}

.line[data-pos="center"] {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  max-width: 90vw;
  padding: 0 5vw;
}

.line[data-pos="left"] {
  left: 10vw;
  top: 50%;
  transform: translateY(-50%);
  text-align: left;
  max-width: 45vw;
  padding: 0 2vw;
}

.line[data-pos="right"] {
  right: 10vw;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
  max-width: 45vw;
  padding: 0 2vw;
}

.line.is-visible {
  opacity: 1;
}

/* Exit animation: in the last 1s before a line's time expires, it
   translates up off-screen + fades out. When scrolling backward,
   the line smoothly animates back in (reverse of the exit).
   Once past a line's time, it stays hidden until you scroll back
   into its time window. */
.line {
  opacity: 0;
  transition: opacity 1s ease-out, transform 1s cubic-bezier(0.55, 0, 0.45, 1);
}
.line.is-visible {
  opacity: 1;
}
.line.is-exiting {
  opacity: 0;
  transform: translateY(-220px);
}

/* Lines with data-font="geist" use Geist to match the hero title.
   Clean, modern, tech-forward — same font as "Get lost." */
.line[data-font="geist"] {
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Neon highlight for individual words — matches the "Get lost." title glow.
   White text with pink/magenta glow around the edges. */
.neon {
  color: #fff;
  text-shadow: 0 0 12px rgba(255, 92, 223, 0.8), 0 0 24px rgba(255, 92, 223, 0.6), 0 0 48px rgba(255, 92, 223, 0.4), 0 0 96px rgba(255, 92, 223, 0.3);
  animation: neon-flicker 4.7s infinite, neon-run 2.3s infinite;
}

@keyframes neon-flicker {
  0%, 100% { opacity: 1; }
  2% { opacity: 0.4; }
  4% { opacity: 1; }
  6% { opacity: 0.3; }
  8% { opacity: 1; }
  15% { opacity: 1; }
  25% { opacity: 0.5; }
  30% { opacity: 1; }
  50% { opacity: 1; }
  55% { opacity: 0.4; }
  60% { opacity: 1; }
  75% { opacity: 1; }
}

@keyframes neon-run {
  0%, 100% { text-shadow: 0 0 12px rgba(255, 92, 223, 0.8), 0 0 24px rgba(255, 92, 223, 0.6), 0 0 48px rgba(255, 92, 223, 0.4), 0 0 96px rgba(255, 92, 223, 0.3); }
  25% { text-shadow: 0 0 14px rgba(255, 92, 223, 0.9), 0 0 28px rgba(255, 92, 223, 0.7), 0 0 56px rgba(255, 92, 223, 0.5), 0 0 112px rgba(255, 92, 223, 0.4); }
  50% { text-shadow: 0 0 10px rgba(255, 92, 223, 0.7), 0 0 20px rgba(255, 92, 223, 0.5), 0 0 40px rgba(255, 92, 223, 0.3), 0 0 80px rgba(255, 92, 223, 0.2); }
  75% { text-shadow: 0 0 13px rgba(255, 92, 223, 0.85), 0 0 26px rgba(255, 92, 223, 0.65), 0 0 52px rgba(255, 92, 223, 0.45), 0 0 104px rgba(255, 92, 223, 0.35); }
}

/* The opening title — same scale as the original intro's "Get lost."
   Bigger than the body lines, holds the viewport as you start scrolling.
   Glass effect carries over from .line; this just bumps the size. */
.line-title {
  font-size: clamp(72px, 14vw, 180px);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

/* Smaller title variant — for the closing "Get Lost Labs." stamp.
   Big enough to read, not as loud as the opener. */
.line-title.line-small {
  font-size: clamp(48px, 8vw, 110px);
}

/* Subtitle sits just under the title. Body font, bigger and bolder than
   the previous version, since this is the "what we do" line — has to
   be readable, not a vibe piece. */
.line.line-subtitle {
  font-family: "Barlow", "Helvetica Neue", system-ui, sans-serif;
  font-size: clamp(16px, 1.8vw, 24px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.85);
  max-width: 480px;
  text-align: right;
  /* Subtitle sits just below the title with minimal breathing room. */
  left: auto !important;
  right: 5vw !important;
  top: 64% !important;
  transform: none !important;
}
.line.line-title[data-pos="center"] {
  /* When the title sits inside .line-group, the group handles outer
     positioning. The inner p inherits its size from .line-title but
     has no positioning of its own. */
  font-size: clamp(72px, 14vw, 180px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  transform: none !important;
  text-align: right;
  margin: 0;
}

/* The opening group: title + subtitle as a single right-anchored block.
   flex column so the gap between title and subtitle is consistent
   regardless of font size. Right-anchored to the right side of the
   viewport with a 5vw gutter. */
.line-group {
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4em;
  max-width: 90vw;
  text-align: right;
  /* Right-anchored, vertically centered in the viewport */
  left: auto !important;
  right: 5vw !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
}
.line-group .line-title {
  /* The opening title. Geist (Vercel's modern UI font) — clean, geometric,
     reads as "modern tech studio". Carries the neon glow well because
     the strokes are even and the letterforms are open. */
  font-family: "Geist", "Inter", -apple-system, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(64px, 12vw, 160px);
  line-height: 0.95;
  letter-spacing: -0.05em;
  /* NEON. A stack of text-shadows at increasing blur radii, hot pink
     core fading to magenta halo. The trick to a convincing neon tube:
     - tight bright core (the "filament")
     - mid-radius glow in the same hue (the "glass")
     - wide soft halo in a related hue (the "spill")
     - dark drop shadow grounds the text against bright video */
  color: #fff;
  text-shadow:
    0 0 4px #fff,
    0 0 8px #ff2bd6,
    0 0 16px #ff2bd6,
    0 0 28px #ff2bd6,
    0 0 48px #c41a9a,
    0 0 80px #6e0a5a,
    0 2px 12px rgba(0, 0, 0, 0.5);
  opacity: 1;
  transition: none;
  position: static !important;
  max-width: none;
  /* Neon animation. Two layered effects:
     - neon-flicker: irregular brightness drops, like a faulty tube
     - neon-run: the glow radiates outward in waves, like electricity
       running through the tube
     Both run on infinite loops with different durations so they
     desync and never look mechanical. */
  animation:
    neon-flicker 4.7s infinite steps(1, end),
    neon-run 2.3s infinite ease-in-out;
}

/* Flicker: a real neon tube has voltage drops that make it briefly
   dim or skip. The animation mimics this with random-feeling opacity
   drops. The steps() timing function makes the changes instant rather
   than smooth — that harshness is what reads as "flicker". */
@keyframes neon-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    opacity: 1;
  }
  20%, 24%, 55% {
    opacity: 0.4;
  }
  70% {
    opacity: 0.85;
  }
  72% {
    opacity: 0.5;
  }
}

/* Run: the neon "runs" along the tube. We do this by cycling through
   a few preset shadow stacks that have the bright core in different
   positions, so the eye reads the highlight as moving. The base
   shadow stack is preserved by always including the same outer halos
   — only the inner core shifts. */
@keyframes neon-run {
  0% {
    text-shadow:
      0 0 4px #fff,
      0 0 8px #ff2bd6,
      0 0 16px #ff2bd6,
      0 0 28px #ff2bd6,
      0 0 48px #c41a9a,
      0 0 80px #6e0a5a,
      0 2px 12px rgba(0, 0, 0, 0.5);
  }
  25% {
    text-shadow:
      -1px 0 6px #fff,
      0 0 10px #ff5cdf,
      0 0 18px #ff2bd6,
      0 0 32px #ff2bd6,
      0 0 52px #c41a9a,
      0 0 84px #6e0a5a,
      0 2px 12px rgba(0, 0, 0, 0.5);
  }
  50% {
    text-shadow:
      0 0 5px #fff,
      0 0 12px #ff2bd6,
      1px 0 20px #ff2bd6,
      0 0 34px #ff2bd6,
      0 0 56px #c41a9a,
      0 0 88px #6e0a5a,
      0 2px 12px rgba(0, 0, 0, 0.5);
  }
  75% {
    text-shadow:
      1px 0 6px #fff,
      0 0 10px #ff5cdf,
      0 0 18px #ff2bd6,
      0 0 30px #ff2bd6,
      0 0 50px #c41a9a,
      0 0 82px #6e0a5a,
      0 2px 12px rgba(0, 0, 0, 0.5);
  }
  100% {
    text-shadow:
      0 0 4px #fff,
      0 0 8px #ff2bd6,
      0 0 16px #ff2bd6,
      0 0 28px #ff2bd6,
      0 0 48px #c41a9a,
      0 0 80px #6e0a5a,
      0 2px 12px rgba(0, 0, 0, 0.5);
  }
}
.line-group .line-subtitle {
  font-family: "Barlow", "Helvetica Neue", system-ui, sans-serif;
  font-size: clamp(16px, 1.8vw, 24px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.85);
  max-width: 480px;
  text-align: right;
  position: static !important;
  opacity: 1;
  transition: none;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* Smaller line variant — for "Scroll. The world is watching." and
   other direct-address lines that should feel more conversational. */
.line-small {
  font-size: clamp(28px, 4.5vw, 64px);
  font-weight: 300;
}

/* Chrome (chapter + timestamp) */
.chrome {
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  pointer-events: none;
}

.chrome-time { font-variant-numeric: tabular-nums; }

/* Scroll hint indicator - pulses at the start to tell users to scroll */
.scroll-hint {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 92, 223, 0.8);
  opacity: 0;
  pointer-events: none;
  animation: hint-fade-in 0.8s ease-out 1.5s forwards, hint-pulse 2s ease-in-out 2.3s infinite;
}
.scroll-hint svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  filter: drop-shadow(0 0 8px rgba(255, 92, 223, 0.6));
}
.scroll-hint span {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 92, 223, 0.7);
}
@keyframes hint-fade-in {
  to { opacity: 1; }
}
@keyframes hint-pulse {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
  50% { transform: translateX(-50%) translateY(8px); opacity: 0.5; }
}
/* Hide hint once user starts scrolling */
.scroll-hint.is-hidden {
  opacity: 0 !important;
  animation: none;
  transition: opacity 0.4s ease-out;
}

/* ---------- MUSIC SWITCHER ---------- */
/* The scrub rail lives INSIDE the journey section, after the sticky
   pin. It's the empty space the user scrolls through while the pin
   stays stuck to the top of the viewport. 700vh = 7 viewports of
   scroll, which maps to 7x viewport of progress through the video. */
.scrub-rail {
  height: 700vh;
  background: transparent;
  pointer-events: none;
}

.music-switcher {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  display: flex;
  gap: 8px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 6px;
}

.music-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  position: relative;
}

/* The running neon border. We need the line itself to travel along
   the button's outline path — not a rotating conic gradient (which
   reads as "spinning", not "tracing"). To do this we add an SVG
   circle as a child element of each button and animate its
   stroke-dashoffset. The stroke is drawn with a large gap so only a
   small visible segment remains, and offsetting it moves that segment
   around the circle — which is the visual of a line tracing the
   outline. */
.music-btn svg.music-trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.music-btn svg.music-trace circle {
  fill: none;
  stroke: #ff5cdf;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 70 1000;
  stroke-dashoffset: 0;
  animation: trace-path 3.2s linear infinite;
  filter: drop-shadow(0 0 4px #ff2bd6) drop-shadow(0 0 10px rgba(255, 43, 214, 0.8)) drop-shadow(0 0 18px rgba(255, 43, 214, 0.4));
}

@keyframes trace-path {
  to { stroke-dashoffset: -1070; }
}

/* Active button: brighter, faster, slightly thicker stroke. The
   moving segment is more visible, confirming the selection. */
.music-btn.is-active svg.music-trace circle {
  stroke: #fff;
  stroke-width: 2;
  stroke-dasharray: 100 1000;
  animation-duration: 2s;
  filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 12px #ff2bd6) drop-shadow(0 0 22px rgba(255, 43, 214, 0.6));
}

.music-btn[data-missing="true"] svg.music-trace circle {
  stroke: rgba(255, 92, 223, 0.7);
  animation-duration: 6s;
  filter: drop-shadow(0 0 3px rgba(255, 43, 214, 0.5));
}

/* Song name display — hidden by default, shown when button is active */
.music-btn .music-song {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(255, 92, 223, 0.5);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: none;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 0 4px 20px rgba(255, 92, 223, 0.3);
}
.music-btn.is-active .music-song {
  opacity: 1;
  transform: translateX(-50%) translateY(-8px);
}

/* Button pop animation when activated */
@keyframes button-pop {
  0% { transform: scale(1) translateY(0); }
  40% { transform: scale(1.08) translateY(-6px); }
  100% { transform: scale(1) translateY(0); }
}
.music-btn.is-active {
  animation: button-pop 0.35s ease-out;
}

.music-btn:hover { color: rgba(255, 255, 255, 0.9); }

.music-btn.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.music-btn[data-missing="true"] {
  color: rgba(255, 255, 255, 0.2);
  cursor: not-allowed;
}

.music-num {
  font-weight: 700;
  font-size: 10px;
}

/* ---------- OUTRO ---------- */

.outro {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 24px;
  background: #000;
  gap: 24px;
}

.outro-mark {
  font-size: 10px;
  letter-spacing: 0.4em;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
}

.outro-line {
  font-family: "Instrument Serif", "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.8);
}