/* =========================================================
   Fragments™ Academy — Waitlist
   Coordinate system: 1rem = 16px-at-design (1920x1080 frame).
   Root font-size = min(100vw/120, 100vh/67.5) → frame fits.
   Animations are driven by GSAP (movement only, no opacity
   on the sliding layers). Smooth scroll via Lenis.
   ========================================================= */

:root {
  --blue: #1d74f6;
  --card: #f0f0f3;
  --frame-w: 120rem;
  --frame-h: 67.5rem;
  --cream: #f2eed8;
}

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

html { font-size: min(calc(100vw / 120), calc(100vh / 67.5)); -webkit-text-size-adjust: 100%; background: #0a0a0a; }

/* Gentle page fade-in on land (over a black backdrop, JS-independent) */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

/* Anti-flicker: while the window is actively being resized, freeze all
   transitions/animations and drop the heavy blur filters so the browser
   isn't re-rasterizing transitioned text + filters on every resize tick. */
body.is-resizing *,
body.is-resizing *::before,
body.is-resizing *::after { transition: none !important; animation: none !important; }
body.is-resizing .bg-radial-center,
body.is-resizing .col-glow,
body.is-resizing .video-frame { filter: none !important; }

body {
  background: #0a0a0a;
  color: #fff;
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  animation: pageIn .9s ease both;
  /* No text can be selected / highlighted */
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}

/* the email field is the one place selection / editing must work */
input, textarea { -webkit-user-select: text; user-select: text; }

/* Images & SVGs can never be dragged */
img, svg, .video-el {
  -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; user-drag: none;
  -webkit-touch-callout: none;
}

#scroll-spacer { height: 320vh; width: 1px; pointer-events: none; }
img { display: block; }

/* ===================== Background layer ===================== */
/* Full-bleed: use viewport units so the canvas also covers the scrollbar gutter */
#bg-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; overflow: hidden; background: #0a0a0a; }
.bg-image {
  position: absolute; inset: 0;
  background: url("./assets/waitlist/BG.png") center center / cover no-repeat;
}
/* Unicorn Studio shader renders into this — full-bleed, above the poster fallback */
.bg-canvas { position: absolute; inset: 0; z-index: 1; opacity: 0; overflow: hidden; transition: opacity .8s ease, filter .6s ease; will-change: filter; }
.bg-canvas.ready { opacity: 1; }
/* Force the Unicorn Studio render to fully cover the viewport (the scene is 1:1,
   so without this it letterboxes and leaves black padding on a wide screen). */
.bg-canvas > div { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
.bg-canvas canvas {
  display: block;
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important; height: 100% !important;
  min-width: 100% !important; min-height: 100% !important;
  object-fit: cover !important;
}
/* Waitlist submit celebration: a short rainbow colour shuffle, then settle back to default */
@keyframes bgRainbow {
  0%   { filter: hue-rotate(0deg)   saturate(1)    brightness(1);    transform: scale(1); }
  18%  { filter: hue-rotate(70deg)  saturate(1.55) brightness(1.18); transform: scale(1.012); }
  40%  { filter: hue-rotate(170deg) saturate(1.65) brightness(1.12); transform: scale(1.02); }
  62%  { filter: hue-rotate(260deg) saturate(1.5)  brightness(1.16); transform: scale(1.012); }
  82%  { filter: hue-rotate(330deg) saturate(1.3)  brightness(1.08); transform: scale(1.004); }
  100% { filter: hue-rotate(360deg) saturate(1)    brightness(1);    transform: scale(1); }
}
.bg-canvas.celebrate { animation: bgRainbow 1.5s ease-in-out both; }
/* Hidden MediaPipe input — present in the DOM, never visible */
#mp-video { position: fixed; width: 2px; height: 2px; top: -10px; left: -10px; opacity: 0; pointer-events: none; }
.bg-radial { position: absolute; z-index: 2; border-radius: 50%; background: #000; filter: blur(120px); }
.bg-radial-center { left: 24%; top: 6%; width: 52%; height: 88%; opacity: .55; filter: blur(180px); }
.bg-bottom-gradient {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 28%;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 100%);
}

/* ===================== Top bar (anchored top:0) ===================== */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 6.6rem; z-index: 40;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.logo { position: absolute; left: 4.0625rem; top: 3.05rem; width: 8.5rem; will-change: transform; }
.logo img { width: 100%; }

.flexbox {
  position: absolute; left: 41.625rem; top: 3.57rem;
  width: 41.375rem; height: 2.103rem;
  display: flex; justify-content: space-between; align-items: center;
  will-change: transform;
}
.feature { display: flex; align-items: center; gap: .85rem; }
.feature-icon { width: 2.103rem; height: 2.103rem; }
.feature-label { font-size: .961rem; font-weight: 500; letter-spacing: -0.03em; color: #fff; white-space: nowrap; }

/* ===================== Frame (centered) ===================== */
.frame {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%) translateZ(0);
  width: var(--frame-w); height: var(--frame-h);
  z-index: 10; pointer-events: none;
  backface-visibility: hidden;
}
.frame > * { pointer-events: auto; }

/* ===================== Scrolling columns ===================== */
.col { position: absolute; top: 0; height: var(--frame-h); width: 40rem; overflow: visible; will-change: transform; }
.col-left { left: 3.5625rem; }
.col-right { right: 7rem; width: 26.5rem; }
.col-track { will-change: transform; transform: translateZ(0); }
.col-section { height: var(--frame-h); display: flex; align-items: center; position: relative; }

/* Radial black glow attached behind the text — lives inside the track so it scrolls with it */
.col-glow {
  position: absolute; z-index: -1; pointer-events: none;
  width: 42rem; height: 34rem; top: 50%; transform: translateY(-50%);
  /* ~50% lighter than before — much less visible while scrolling */
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.46) 0%, rgba(0,0,0,0.34) 32%, rgba(0,0,0,0) 70%);
  filter: blur(20px);
}
.col-glow-left { left: -8rem; }
.col-glow-right { right: -8rem; }

.left-inner { display: flex; flex-direction: column; gap: 1.75rem; align-items: flex-start; width: 31.25rem; position: relative; }
.eyebrow { height: 1.9375rem; }
.eyebrow img { height: 100%; width: auto; }
.h1 { font-size: 2.926rem; line-height: 1.04; font-weight: 500; letter-spacing: -0.03em; }
.h1 .dim { color: rgba(255,255,255,0.8); }
.h1 .bright { color: #fff; }
.faq-heading { font-size: 3.6rem; line-height: 1.0; letter-spacing: -0.035em; }

.right-inner { width: 21.9375rem; margin-left: auto; position: relative; }
.right-text { font-size: 1.125rem; line-height: 1.33; font-weight: 500; letter-spacing: -0.02em; }
.right-text .bright { color: rgba(255,255,255,0.92); }
.right-text .dim { color: rgba(255,255,255,0.6); }

/* ===================== FAQ accordion (right column, section 2) ===================== */
.faq-inner { width: 26rem; margin-left: auto; position: relative; }
.faq { width: 100%; }
.faq-item { position: relative; }
.faq-head {
  display: flex; align-items: flex-start; gap: .625rem; width: 100%;
  background: none; border: none; padding: 1.1rem 0 .85rem; cursor: pointer; text-align: left;
}
.faq-item:first-child .faq-head { padding-top: 0; }
.faq-dot { width: 1.016rem; height: 1.016rem; margin-top: .1rem; flex: none; }
.faq-q {
  font-family: "Inter", system-ui, sans-serif;
  color: #fff; font-size: 1.283rem; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em;
}
.faq-q u { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: from-font; }
/* Dashed subdivider under every question */
.faq-line { height: 0; width: 100%; border: none; border-top: 1px dashed rgba(255,255,255,0.32); }
.faq-a-wrap {
  display: grid; grid-template-rows: 0fr; margin-left: 1.64rem;
  transition: grid-template-rows .55s cubic-bezier(0.16,1,0.3,1);
}
.faq-item.is-open .faq-a-wrap { grid-template-rows: 1fr; }
.faq-a { overflow: hidden; }
.faq-a p {
  font-family: "Inter", system-ui, sans-serif;
  color: rgba(255,255,255,0.6); font-size: 1.07rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em;
  padding: 1rem 0 .2rem;
}

/* ===================== Waitlist card ===================== */
.waitlist { position: absolute; left: 42.6875rem; top: 11.6875rem; width: 34.637rem; height: 44.125rem; will-change: transform; }
.waitlist-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wl-head { position: absolute; left: 1.4375rem; top: 2.1875rem; width: 24.4375rem; }
.slogan { display: flex; align-items: center; gap: .75rem; height: 3.875rem; }
.slogan-dot { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #000; flex: none; }
.slogan-text { color: #000; font-size: 1.125rem; font-weight: 600; line-height: 1.04; letter-spacing: -0.02em; }
.wl-title-group { margin-top: 3.125rem; }
.be-first { color: rgba(0,0,0,0.7); font-size: 1.196rem; font-weight: 500; letter-spacing: -0.04em; }
.join-title { color: #000; font-size: 3.5rem; font-weight: 500; letter-spacing: -0.04em; line-height: 1.02; margin-top: .19rem; }
.powered { position: absolute; left: 27.31rem; top: 2.1875rem; width: 4.94rem; }
.powered img { width: 100%; }
.wl-body { position: absolute; left: 1.4375rem; top: 18.06rem; width: 30.5625rem; }
.wl-copy { width: 24.6875rem; }

/* Success state: form & copy fade out, confirmation fades in */
.wl-success[hidden] { display: none; }
.wl-success { width: 27.5rem; opacity: 0; transform: translateY(.5rem); animation: wlSuccessIn .55s ease .05s forwards; }
@keyframes wlSuccessIn { to { opacity: 1; transform: translateY(0); } }
.wl-success-title { color: #000; font-size: 3.5rem; font-weight: 500; letter-spacing: -0.04em; line-height: 1.02; }
.wl-success-sub { margin-top: .7rem; color: #151515; font-size: 1.125rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.32; }
.waitlist.wl-done .wl-copy, .waitlist.wl-done .wl-form { display: none; }
.wl-disclaimer { color: #151515; font-size: 1.125rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; }
.wl-limited { color: #151515; font-size: .8125rem; font-weight: 500; letter-spacing: -0.02em; margin-top: 1.375rem; }
.wl-limited u { text-decoration: underline; }
.wl-form { margin-top: 2.5rem; }
.form-row { display: flex; gap: .625rem; height: 4rem; }
.input-field {
  width: 23.5rem; height: 3.875rem; border-radius: .625rem; background: #fff;
  display: flex; align-items: center; padding: 0 .75rem 0 1.25rem;
  border: 1.5px solid #6a80ff; box-shadow: inset 0 0 0 1px rgba(86,92,202,0.25);
}
.input-field input { border: none; outline: none; background: transparent; width: 100%; font-family: inherit; font-size: 1.125rem; font-weight: 500; color: #111; letter-spacing: -0.02em; }
.input-field input::placeholder { color: #9a9a9a; }
.cta { width: 6.4375rem; height: 4rem; border: none; background: none; cursor: pointer; padding: 0; transition: transform .15s ease, filter .15s ease; }
.cta img { width: 100%; height: 100%; }
.cta:hover { transform: translateY(-1px); filter: brightness(1.08); }
.cta:active { transform: translateY(0); }
.consent { display: flex; gap: .8125rem; margin-top: 1.5rem; align-items: flex-start; }
.checkmark { width: 1.4375rem; height: 1.4375rem; border-radius: 2px; background: #fff; border: 1px solid rgba(0,0,0,0.3); flex: none; cursor: pointer; position: relative; }
.checkmark.checked { background: var(--blue); border-color: var(--blue); }
.checkmark.checked::after { content: ""; position: absolute; left: 30%; top: 14%; width: 28%; height: 55%; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cl-disc { color: #151515; font-size: .6875rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; width: 24.6875rem; }
.cl-disc u { text-decoration: underline; }
.disc { position: absolute; left: 1.9375rem; top: 40.56rem; width: 22.9375rem; color: rgba(0,0,0,0.55); font-size: .5rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1.25; }

/* ===================== Cinema footer ===================== */
.cinema-footer {
  position: fixed; left: 50%; bottom: 1.6rem; width: 30rem; margin-left: -15rem;
  transform: translateY(220%); /* parked below the fold; GSAP slides it up */
  text-align: center; color: #dbdbdb; font-size: .625rem; font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.7; z-index: 45; pointer-events: none;
}

/* End-of-scroll disclaimer — fades in at the very bottom of the page */
.scroll-footer {
  position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  max-width: 45vw; width: 45vw; text-align: center;
  color: rgba(219,219,219,0.7); font-size: .625rem; font-weight: 500;
  letter-spacing: 0.01em; line-height: 1.4; z-index: 44; pointer-events: none;
  opacity: 0; transition: opacity .5s ease;
}

/* ===================== Video (thumbnail → cinema) ===================== */
.video {
  position: fixed;
  left: 1.9375rem; bottom: 1.5rem;
  width: 19.875rem; height: 10.875rem;
  z-index: 100; /* video mask always above everything */
  cursor: pointer;
}
.video-frame {
  position: relative; width: 100%; height: 100%;
  border-radius: 1rem; overflow: hidden;
  border: .5px solid rgba(255,255,255,0.9);
  background: #181818; padding: 2.2%;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45);
  container-type: size;
  transition: border-radius .65s cubic-bezier(0.16,1,0.3,1), padding .65s cubic-bezier(0.16,1,0.3,1);
}
.video-el {
  position: absolute; inset: 2.2%; width: 95.6%; height: 95.6%;
  object-fit: cover; border-radius: .8rem; background: #202020;
  border: .5px solid rgba(255,255,255,0.85);
}
.video-overlay {
  position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 1.25rem;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0) 55%);
  transition: opacity .35s ease; z-index: 3;
}
.play-row { display: flex; align-items: center; gap: .6rem; }
.play-text { font-size: .711rem; font-weight: 800; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; }
.video.previewing .video-overlay { opacity: 0; }

.video-close {
  position: absolute; top: 1.4cqw; right: 1.6cqw; width: 3.4cqw; height: 3.4cqw; min-width: 34px; min-height: 34px;
  border-radius: 50%; border: none; background: rgba(0,0,0,0.45); color: #fff;
  font-size: 2cqw; line-height: 1; cursor: pointer; display: none;
  align-items: center; justify-content: center; backdrop-filter: blur(6px); z-index: 5;
}

/* ---------- Custom controls (visible only in cinema) ---------- */
.video-controls {
  position: absolute; left: 50%; bottom: 5cqw; transform: translateX(-50%);
  width: 82cqw; display: none; align-items: flex-end; gap: 1.6cqw; z-index: 4;
}
.vc-btn { border: none; background: none; padding: 0; cursor: pointer; display: block; position: relative; flex: none; }
.vc-playpause { width: 4cqw; height: 4cqw; min-width: 40px; min-height: 40px; }
.vc-playpause img { width: 100%; height: 100%; }
.vc-playpause .ic-pause { display: block; }
.vc-playpause .ic-play { display: none; position: absolute; inset: 0; }
body.paused .vc-playpause .ic-pause { display: none; }
body.paused .vc-playpause .ic-play { display: block; }

.vc-scrubber { flex: 1; display: flex; align-items: center; height: 4cqw; cursor: pointer; }
.vc-track {
  position: relative; width: 100%; height: 3.4cqw; border-radius: 999px;
  background: rgba(255,255,255,0.16); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.22); overflow: visible;
}
.vc-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; border-radius: 999px; background: rgba(242,238,216,0.85); }
.vc-tick { position: absolute; left: 0%; top: 50%; height: 5.4cqw; width: auto; transform: translate(-50%, -50%); pointer-events: none; }
.vc-time { position: absolute; left: 1.4cqw; top: 50%; transform: translateY(-50%); font-size: 1.06cqw; min-font-size: 11px; font-weight: 600; color: #1a1a1a; letter-spacing: -0.02em; }

.vc-sound { width: 3.2cqw; height: 3.2cqw; min-width: 32px; min-height: 32px; align-self: center; }
.vc-sound img { width: 100%; height: 100%; }
.vc-muted-slash { position: absolute; left: 50%; top: 50%; width: 120%; height: 2px; background: var(--cream); transform: translate(-50%,-50%) rotate(-45deg); display: none; }
body.muted .vc-sound .vc-muted-slash { display: block; }

/* ===================== FX debug GUI ===================== */
/* ===== CINEMA MODE (geometry handled by GSAP; static styling here) ===== */
body.cinema .bg-image { opacity: .12; transition: opacity .65s ease; }
body.cinema .bg-canvas { opacity: .12 !important; }
body.cinema .video { cursor: default; }
body.cinema .video-frame { border-radius: 3.5cqw; }
body.cinema .video-overlay { display: none; }
body.cinema .video-el { object-fit: cover; }
body.cinema .video-close { display: flex; }
body.cinema .video-controls { display: flex; }

@media (max-aspect-ratio: 13/10) {
  html { font-size: min(calc(100vw / 120), calc(100vh / 90)); }
}