/* ============================================================
   WorldLens — Cinematic scroll experience
   ============================================================ */

/* Match the base-page treatment used by about.css / features.css so
   navigating between pages feels seamless with no color shift. */
body { background: #000000; color: #FFFFFF; }
main { background: #000000; }

/* ============================================================
   Performance — GPU compositing + paint containment.
   Every animated element is promoted to its own layer so scroll
   redraws stay on the compositor thread (no layout, no paint).
   ============================================================ */
#cinematic-stage {
  contain: layout paint;
  will-change: transform;
  transform: translateZ(0);
}

#cinematic-stage .act {
  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

#bg-layer > [id^="orb"] {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

#particle-canvas {
  will-change: transform;
  transform: translateZ(0);
}

/* Progress dots — drive state via .active class instead of per-frame inline styles.
   !important here beats the inline background on the dot markup. */
.prog-dot {
  background: #333333 !important;
  transition: background-color 0.25s ease, transform 0.25s ease !important;
  transform: translateZ(0);
}
.prog-dot.active {
  background: #EF9F27 !important;
  transform: scale(1.5) translateZ(0);
}

/* Scroll-hint vertical line pulse */
@keyframes scrollPulse {
  0%, 100% { opacity: 1;   transform: scaleY(1); }
  50%      { opacity: 0.3; transform: scaleY(0.6); }
}

@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Globe background rotates slowly behind act 5 */
@keyframes globeSpin {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

#globe-bg {
  animation: globeSpin 20s linear infinite;
}

/* CTA form email input focus state — amber border (inline can't do :focus) */
#cta-form input[type="email"]:focus {
  border-color: #EF9F27 !important;
}

/* Impact card hover — amber rail + glow. Uses !important on transition so it
   beats the global `#cinematic-stage * { transition: none }` rule. */
.icard-cin {
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.icard-cin:hover {
  border-color: rgba(239, 159, 39, 0.4) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(239, 159, 39, 0.12) !important;
}


/* Inside the cinematic stage, JS drives every property per frame —
   CSS transitions would fight and cause stutter. */
#cinematic-stage * {
  transition: none;
}

/* Acts themselves get a tiny opacity transition so they don't hard-pop */
#cinematic-stage .act {
  transition: opacity 0.05s linear;
}

/* Deep-space gradient backdrop behind the cinematic stage.
   JS per-act updateBackground() writes inline background on act transitions only. */
#bg-layer {
  background: radial-gradient(ellipse at 50% 0%, #0a0500 0%, #000000 60%);
  transition: background 1.2s ease;
  will-change: background;
}

/* Ambient pulsing for background orbs */
@keyframes bgPulse1 {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.1); }
}

@keyframes bgPulse2 {
  0%, 100% { opacity: 0.3; transform: scale(1.1); }
  50%      { opacity: 0.6; transform: scale(1); }
}

/* Subtle noise grain across the whole stage for filmic texture */
#cinematic-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
  opacity: 0.4;
}

/* Orbs need to sit above the bg gradient but below stage content */
#bg-layer > [id^="orb"] {
  z-index: 1;
}

/* Keep the nav (injected by shared.js) above the fixed cinematic stage */
#wl-nav {
  position: relative;
  z-index: 200;
}

/* Scroll container drives 7 viewports of scroll; cinematic stage sticks
   to the viewport WHILE the container is in view, then releases so FAQ appears. */
#scroll-container {
  height: 700vh;
  position: relative;
  z-index: 5;
}

#cinematic-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 10;
}

/* Legacy ticker between scroll-container and FAQ is no longer part of the flow */
.ticker-wrap {
  display: none !important;
}

/* ============================================================
   FAQ — premium cinematic styling (full-width section, 800px content)
   ============================================================ */
.faq-section {
  position: relative;
  z-index: 20;
  background: #000000 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 80px 40px !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: center;
}

/* Gradient wash above the FAQ so the transition from the last act feels seamless */
.faq-section::before {
  content: '';
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(180deg, transparent, #000000);
  pointer-events: none;
}

/* Inner wrapper holds the 800px content column */
.faq-section .container-narrow {
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.faq-section .section-header {
  text-align: center !important;
  margin-bottom: 60px !important;
}

.faq-section .section-label {
  display: block !important;
  color: #EF9F27 !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin-bottom: 12px !important;
}

.faq-section .section-header h2 {
  color: #FFFFFF !important;
  font-size: 42px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  margin: 0 0 16px !important;
  font-family: 'Cormorant Garamond', serif !important;
}

.faq-section .faq-sub {
  color: #888888;
  font-size: 15px;
  margin: 0;
  line-height: 1.6;
}

.faq-list {
  margin-top: 0 !important;
  text-align: left;
}

.faq-item {
  border: none !important;
  border-top: none !important;
  border-bottom: 1px solid #1a1a1a !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Give the very first item a top border so the rail closes on both ends */
.faq-item:first-child {
  border-top: 1px solid #1a1a1a !important;
}

.faq-item.open {
  border-left: none !important;
  box-shadow: none !important;
}

.faq-q {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 24px 0 !important;
  cursor: pointer !important;
  gap: 1rem !important;
  transition: color 0.2s ease;
}

.faq-q span:first-child {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 17px !important;
  color: #FFFFFF !important;
  font-weight: 400 !important;
  text-align: left !important;
  line-height: 1.4 !important;
  transition: color 0.2s ease;
}

/* Questions stay white in every state — only the + icon is amber.
   Kill any stray amber rules from the inline <style> block or cached CSS. */
.faq-q span:first-child,
.faq-q:hover span:first-child,
.faq-item.open .faq-q span:first-child {
  color: #FFFFFF !important;
}

.faq-a {
  padding: 0 !important;
  color: #888888 !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  text-align: left !important;
}

.faq-a p {
  color: #888888 !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  padding: 0 0 24px 0 !important;
  margin: 0 !important;
}

.faq-icon {
  color: #EF9F27 !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

/* ============================================================
   Final CTA banner between FAQ and footer
   ============================================================ */
.faq-cta-banner a:hover {
  background: #ffb347 !important;
}

/* ============================================================
   Footer — cinematic dark theme
   ============================================================ */
.site-footer {
  background: #000000 !important;
  border-top: 1px solid #1a1a1a !important;
  color: #555555 !important;
  position: relative;
  z-index: 20;
}

.site-footer .footer-links a,
.site-footer .footer-domain,
.site-footer .footer-bottom {
  color: #555555 !important;
  transition: color 0.2s ease;
}

.site-footer .footer-links a:hover {
  color: #EF9F27 !important;
}

.site-footer .footer-copy {
  color: #333333 !important;
}

/* Hide every legacy section replaced by the cinematic experience.
   FAQ, the bottom CTA form (#waitlist-form), and the injected footer stay visible. */
#product-tour,
#tour-indicator,
.hero-section,
.mockup-section,
.sources-section,
.features-preview,
.built-for-section,
.audience-section,
.story-section,
.how-section {
  display: none !important;
}

/* The old .cta-section is un-hidden and retagged as the bottom waitlist form */
#waitlist-form {
  position: relative;
  z-index: 20;
  background: #000000;
  padding: 80px 20px;
  border-top: 1px solid #1a1a1a;
}

#waitlist-form .cta-glow,
#waitlist-form .container-narrow {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

#waitlist-form h2.cta-headline {
  color: #FFFFFF !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  font-weight: 600 !important;
  margin: 0 0 16px !important;
  font-family: 'Cormorant Garamond', serif !important;
}

#waitlist-form .cta-sub {
  color: #888888 !important;
  font-size: 16px !important;
  margin: 0 0 32px !important;
  line-height: 1.6 !important;
}

/* ============================================================
   MOBILE — the sticky 700vh cinematic experience doesn't work on
   small screens (iOS Safari sticky quirks + absolute-positioned acts
   that use fixed pixel layouts). On <=768px, we collapse the stage
   into normal stacked sections that flow with the page. All acts
   become visible (no scroll-driven opacity), each gets its own
   padded section, and fixed-width mockups shrink to fit.
   ============================================================ */
@media (max-width: 768px) {

  /* Kill the 700vh container + sticky positioning. Stage becomes normal flow. */
  #scroll-container {
    height: auto !important;
    position: static !important;
  }
  #cinematic-stage {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    contain: none !important;
    display: flex;
    flex-direction: column;
  }

  /* Hide the global background/particle layer on mobile — it overlaps each
     stacked section and the per-act gradients cause visual noise while
     scrolling through the flow layout. */
  #bg-layer,
  #particle-canvas {
    display: none !important;
  }

  /* Every act becomes a normal stacked section — force opacity:1 and drop
     absolute positioning set by inline styles. */
  #cinematic-stage .act {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    padding: 80px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 32px !important;
    box-sizing: border-box;
  }

  /* Every nested element that the desktop animation hides via opacity:0 +
     transform must be forced visible on mobile. */
  #cinematic-stage .act > *,
  #cinematic-stage .act > * > *,
  #hero-logo, #hero-tag, #hero-sub, #hero-ticker, #grid-bg,
  #prob-1, #prob-2, #prob-3, #a2-phone,
  #feed-mockup, #feed-text, .feed-card,
  #a4-phone, #a4-text, #a4-bottom, .a4-actor,
  #impact-title, #ic1, #ic2, #ic3, #ic4, #impact-lines,
  #pe-label, #pe-before-col, #pe-phone-col, #pe-after-col, #pe-headline-bottom,
  #cta-logo, #cta-tag, #cta-headline, #cta-sub, #cta-button, #cta-founder {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Hide purely-decorative chrome that doesn't belong on mobile */
  .prog-dot,
  #tour-indicator,
  #scroll-hint {
    display: none !important;
  }

  /* Hide the absolute-positioned corner brackets + status bars in Act 1 -
     they assume a 100vh viewport. */
  #act-1 > div[style*="position:absolute"][style*="border-top"],
  #act-1 > div[style*="position:absolute"][style*="border-bottom"],
  #act-1 > div[style*="top:50px"] {
    display: none !important;
  }

  /* ===== ACT 1: Hero — scale the boot terminal ===== */
  #act-1 {
    padding: 80px 20px 60px !important;
  }
  #hero-logo { font-size: 48px !important; line-height: 1.05 !important; }
  #hero-tag { font-size: 10px !important; margin-bottom: 20px !important; }
  #hero-sub { font-size: 15px !important; max-width: 100% !important; margin-bottom: 28px !important; }
  #hero-ticker {
    position: static !important;
    width: 100% !important;
    margin-top: 16px;
  }
  #grid-bg { display: none !important; }

  /* ===== ACT 2: Problem — stack text + phone vertically ===== */
  #act-2 {
    display: flex !important;
    grid-template-columns: none !important;
    padding: 60px 20px !important;
  }
  #prob-1 div[style*="font-size:56px"] { font-size: 40px !important; line-height: 1.05 !important; }
  #prob-1 div[style*="font-size:18px"] { font-size: 15px !important; }
  #prob-2 div[style*="font-size:32px"] { font-size: 26px !important; min-width: 56px !important; }
  #prob-2 div[style*="font-size:13px"] { font-size: 12px !important; }
  #a2-phone .phone-frame {
    width: 240px !important;
    border-width: 8px !important;
    border-radius: 40px !important;
  }
  #a2-phone .phone-frame > div[style*="border-radius:40px"] {
    border-radius: 32px !important;
  }

  /* ===== ACT 3: Feed ===== */
  #act-3 {
    display: flex !important;
    grid-template-columns: none !important;
    padding: 60px 20px !important;
  }
  #feed-mockup { width: 100% !important; max-width: 360px !important; }
  #feed-text div[style*="font-size:42px"] { font-size: 30px !important; line-height: 1.15 !important; }
  #feed-text div[style*="font-size:17px"] { font-size: 14px !important; }

  /* ===== ACT 4: Intel Brief — stack phone + text ===== */
  #act-4 {
    display: flex !important;
    grid-template-columns: none !important;
    padding: 60px 20px !important;
  }
  #a4-phone .phone-frame {
    width: 260px !important;
    border-width: 8px !important;
    border-radius: 40px !important;
  }
  #a4-phone .phone-frame > div[style*="border-radius:40px"] {
    border-radius: 32px !important;
  }
  #a4-text div[style*="font-size:48px"],
  #a4-text div[style*="font-size:42px"] {
    font-size: 30px !important;
    line-height: 1.15 !important;
  }
  #a4-text { max-width: 100% !important; }

  /* ===== ACT 5: Impact — 4 cards stack ===== */
  #act-5 {
    padding: 60px 20px !important;
  }
  #act-5 [style*="grid-template-columns:repeat(4,1fr)"],
  #act-5 [style*="grid-template-columns:repeat(2,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  #impact-title,
  #act-5 h2,
  #act-5 div[style*="font-size:48px"],
  #act-5 div[style*="font-size:58px"],
  #act-5 div[style*="font-size:42px"] {
    font-size: 30px !important;
    line-height: 1.15 !important;
  }
  #impact-lines { display: none !important; }
  .icard-cin { padding: 18px !important; }

  /* ===== ACT 6: Plain English — Before / Phone / After stacks ===== */
  #act-6 {
    display: flex !important;
    grid-template-columns: none !important;
    padding: 60px 20px !important;
  }
  /* Inner 3-col grid (Before | Phone | After) collapses to vertical stack */
  #act-6 > div[style*="grid-template-columns:1fr auto 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
    max-width: 100% !important;
  }
  #pe-before-col, #pe-after-col, #pe-phone-col {
    width: 100% !important;
    max-width: 340px !important;
  }
  #pe-phone-col .phone-frame,
  #pe-phone-col > div {
    width: 100% !important;
    max-width: 260px !important;
    margin: 0 auto !important;
  }
  #pe-headline-bottom div,
  #pe-headline-bottom {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }

  /* ===== ACT 7: CTA ===== */
  #act-7 {
    padding: 80px 20px !important;
  }
  #cta-logo { font-size: 44px !important; }
  #cta-tag { font-size: 10px !important; margin-bottom: 24px !important; letter-spacing: 0.18em !important; }
  #cta-headline { font-size: 40px !important; line-height: 1.1 !important; }
  #cta-sub { font-size: 15px !important; margin-bottom: 28px !important; }
  #cta-button {
    padding: 16px 28px !important;
    font-size: 14px !important;
    min-height: 48px !important;
  }
  #cta-founder { font-size: 12px !important; max-width: 280px; line-height: 1.5 !important; }

  /* ===== FAQ section — comfy taps, smaller headings ===== */
  .faq-section { padding: 60px 20px !important; }
  .faq-section .section-header h2 { font-size: 32px !important; }
  .faq-section .faq-sub { font-size: 14px !important; }
  .faq-q {
    padding: 20px 0 !important;
    min-height: 56px;
  }
  .faq-q span:first-child { font-size: 16px !important; }
  .faq-a p { font-size: 14px !important; padding-bottom: 20px !important; }

  /* ===== Bottom waitlist CTA ===== */
  #waitlist-form {
    padding: 60px 20px !important;
  }
  #waitlist-form h2.cta-headline {
    font-size: 28px !important;
  }

  /* FAQ CTA banner link — full width touch target */
  .faq-cta-banner a {
    display: inline-block;
    padding: 14px 28px !important;
    font-size: 14px !important;
    min-height: 48px;
    box-sizing: border-box;
  }
}

/* Very small phones (iPhone SE / 13 mini — 375px wide) */
@media (max-width: 400px) {
  #hero-logo { font-size: 40px !important; }
  #cta-logo { font-size: 36px !important; }
  #cta-headline { font-size: 34px !important; }
  #prob-1 div[style*="font-size:56px"] { font-size: 34px !important; }
  #a2-phone .phone-frame,
  #a4-phone .phone-frame {
    width: 220px !important;
  }
}