/* ============================================================
   site-v50.css — homepage v50 module reveal
   --------------------------------------------------------------
   Additive styles for:
   1. Platform section moved up (now Section 2, was Section 4)
   2. 2-column scrollytelling layout (chips left, orb center)
   3. Wingman as the 4th chip (X360 icon + pink dot — C3)
   4. Scroll-driven module activation (driven by site.js)

   Loads AFTER site.css so these rules win on conflict.
   Component extraction in Phase 2 will absorb these into per-component files.
   ============================================================ */


/* ============================================================
   OPERATOR BYLINE — sits between hero and platform.
   One quiet line + link. Hairlines top/bottom give it "section beat"
   weight without being a full section. Centered on desktop, stacks
   on mobile.
   ============================================================ */

.operator-byline {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin: 0 auto;
  padding: 36px 24px 40px;
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.operator-byline-line {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-muted);
  letter-spacing: 0.005em;
  margin: 0;
}

.operator-byline-tag {
  font-style: italic;
  font-weight: 400;
  color: var(--text);
  margin-right: 6px;
}

.operator-byline-text {
  margin-right: 16px;
}

.operator-byline-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-soft);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.operator-byline-link:hover {
  color: var(--text);
}

@media (max-width: 880px) {
  .operator-byline {
    padding: 28px 16px 32px;
  }
  .operator-byline-line {
    font-size: 14px;
  }
  .operator-byline-text {
    display: block;
    margin: 4px 0 12px;
  }
  .operator-byline-link {
    display: inline-block;
  }
}


/* ============================================================
   PLATFORM REVEAL — sticky 2-column layout
   ============================================================ */

.platform-reveal {
  position: relative;
  margin-top: 24px;
}

.platform-pinned {
  position: sticky;
  top: 96px;
  height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 24px;
  z-index: 2;
}

/* v51: chip strip hidden but kept in DOM. The setupLoopCarousel() in
   site.js reads icon srcs from the chip <img> tags (base64 PNGs for
   Horizon/Tower/Hangar). Keeping the markup avoids extracting all
   the base64 to separate files just to support the orb's center icon.

   ID selector for higher specificity — beats the .module-strip-vertical
   { display: flex !important } rule that appears later in this file. */
#moduleStrip {
  display: none !important;
}

/* The spacer creates scroll runway. Inner pinned content stays glued
   to the top of the viewport while the spacer scrolls past underneath.
   3 extra viewport-heights = 3 additional modules' worth of scroll
   beyond the first (which is the sticky default). */
.platform-scroll-spacer {
  height: 300vh;
  pointer-events: none;
}

/* Mobile: fall back to stacked layout, no sticky pinning */
@media (max-width: 880px) {
  .platform-pinned {
    position: static;
    height: auto;
    display: block;
  }
  .platform-scroll-spacer {
    display: none;
  }
}


/* ============================================================
   VERTICAL CHIP STRIP
   Override the horizontal .module-strip layout from site.css.
   ============================================================ */

.module-strip-vertical {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  align-self: stretch;
  align-items: stretch;
  justify-content: center;
}

.module-strip-vertical .module-chip {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  text-align: left;
  width: 100%;
  transition: all 0.3s ease;
  position: relative;
}

.module-strip-vertical .module-chip:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-strong);
}

.module-strip-vertical .module-chip.is-active {
  background: rgba(79, 180, 241, 0.08);
  border-color: rgba(79, 180, 241, 0.35);
  box-shadow: 0 8px 32px rgba(79, 180, 241, 0.12);
}

.module-strip-vertical .module-chip .chip-icon {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.module-strip-vertical .module-chip .chip-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.module-strip-vertical .module-chip .chip-body {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.module-strip-vertical .module-chip .chip-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.module-strip-vertical .module-chip .chip-phase {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
}

.module-strip-vertical .module-chip.is-active .chip-phase {
  color: var(--text-muted);
}

/* Vertical strip dividers — thin horizontal hairlines between chips */
.module-strip-vertical .module-strip-divider {
  display: block;
  height: 1px;
  width: 60%;
  margin: 0 auto;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--border) 30%,
    var(--border) 70%,
    transparent 100%);
}


/* v50.4: Wingman chip CSS removed — the Wingman chip was removed
   from the strip; Big Unveiling at scroll bottom is the discovery
   pattern. The wingman-related orb/over-arc CSS lives below and is
   driven by .platform-pinned.is-wingman-active (set in JS). */


/* ============================================================
   ORB STATE — when wingman is active
   The 3 phase arcs (anticipate / recover / learn) all dim slightly
   and the pink U-aura beneath intensifies + pulses. Visually says
   "Wingman threads through all phases."
   ============================================================ */

/* v50.1: Hide the legacy U-aura entirely. Replaced by The Stitch
   (above-orb threading strands). Communicates "overarching" instead
   of "underlying." Old aura kept in DOM for now in case we want it
   back as a fallback, but visually retired. */
.loop-stage .wingman-aura {
  opacity: 0 !important;
  display: none;
}

/* ============================================================
   THE BIG UNVEILING — when Wingman is the active module
   --------------------------------------------------------------
   The 3 phase arcs (anticipate/recover/learn) fade out entirely.
   A pink radial gradient fill emerges inside the orb, and a full
   pink ring takes over the perimeter. Visually says: "Wingman
   supersedes the 3 phases — they all live within Wingman's space."
   The over-arc remains as the canopy, now reading as part of one
   unified pink presence.
   ============================================================ */

/* Phase arcs and labels FADE OUT during Wingman's reveal */
.platform-pinned.is-wingman-active .loop-arc {
  opacity: 0 !important;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.platform-pinned.is-wingman-active .loop-phase-label {
  opacity: 0.12 !important;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Wingman fill + ring — invisible by default, take over when active */
.wingman-fill,
.wingman-ring {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.platform-pinned.is-wingman-active .wingman-fill {
  opacity: 1;
}

.platform-pinned.is-wingman-active .wingman-ring {
  opacity: 1;
  filter:
    drop-shadow(0 0 10px rgba(249, 153, 255, 0.6))
    drop-shadow(0 0 24px rgba(249, 153, 255, 0.3));
  animation: wingman-ring-pulse 4s ease-in-out infinite;
}

@keyframes wingman-ring-pulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 10px rgba(249, 153, 255, 0.55))
      drop-shadow(0 0 24px rgba(249, 153, 255, 0.30));
  }
  50% {
    filter:
      drop-shadow(0 0 16px rgba(249, 153, 255, 0.80))
      drop-shadow(0 0 36px rgba(249, 153, 255, 0.45));
  }
}


/* ============================================================
   THE OVER-ARC — Wingman as canopy arching OVER the orb
   --------------------------------------------------------------
   Single pink arc at radius 320 (outside the 3 phase arcs at 280),
   spanning 9 o'clock → 12 → 3 o'clock. Communicates that Wingman
   is the overarching presence above the system. Sits inside the
   existing loop-svg → same coordinate system as the 3 phase arcs,
   no alignment problems.

   Default: subtle pink with soft glow.
   Wingman active: bright + larger glow + slow pulse.
   ============================================================ */

.over-arc {
  opacity: 0.25;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              stroke-width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 0 4px rgba(249, 153, 255, 0.4));
}

/* Wingman active — full canopy presence */
.platform-pinned.is-wingman-active .over-arc {
  opacity: 1;
  stroke-width: 3.5;
  filter:
    drop-shadow(0 0 8px rgba(249, 153, 255, 0.85))
    drop-shadow(0 0 18px rgba(249, 153, 255, 0.5))
    drop-shadow(0 0 36px rgba(249, 153, 255, 0.25));
  animation: over-arc-pulse 4s ease-in-out infinite;
}

@keyframes over-arc-pulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 8px rgba(249, 153, 255, 0.75))
      drop-shadow(0 0 18px rgba(249, 153, 255, 0.45))
      drop-shadow(0 0 36px rgba(249, 153, 255, 0.20));
  }
  50% {
    filter:
      drop-shadow(0 0 12px rgba(249, 153, 255, 1))
      drop-shadow(0 0 26px rgba(249, 153, 255, 0.6))
      drop-shadow(0 0 48px rgba(249, 153, 255, 0.32));
  }
}

/* Card icon when wingman active — pink halo around the HUD logo
   (no dot needed; the logo is the mark) */
.loop-stage[data-active="wingman"] .card-icon img {
  filter:
    drop-shadow(0 0 12px rgba(249, 153, 255, 0.8))
    drop-shadow(0 0 28px rgba(249, 153, 255, 0.4));
  animation: wingman-card-icon-pulse 2.4s ease-in-out infinite;
}

@keyframes wingman-card-icon-pulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 10px rgba(249, 153, 255, 0.7))
      drop-shadow(0 0 22px rgba(249, 153, 255, 0.35));
  }
  50% {
    filter:
      drop-shadow(0 0 14px rgba(249, 153, 255, 1))
      drop-shadow(0 0 32px rgba(249, 153, 255, 0.55));
  }
}

/* Card name color shifts to pink when wingman active */
.loop-stage[data-active="wingman"] .card-name {
  background: linear-gradient(135deg, var(--pink) 0%, #FFD7F8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* ============================================================
   ORB SIZE TWEAK — reduce slightly so it sits comfortably in
   the right column of the 2-column grid (vs full-width old layout).
   ============================================================ */

.platform-pinned .loop-stage {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 22px;
  padding: 8px 0;
}

.platform-pinned .loop-frame {
  width: 100%;
  max-width: 700px;
  flex-shrink: 1;
  min-height: 0;
}

/* v51: card content stays at its base width — the smaller orb constrains it */
.platform-pinned .loop-card {
  max-width: 400px !important;
}

/* ============================================================
   v51: TINY DOT INDICATOR — minimal "you are here" cue below orb
   ============================================================ */

.module-dots {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.module-dot {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.20);
  border: none;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  padding: 0;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.module-dot:hover {
  background: rgba(255, 255, 255, 0.45);
  transform: scale(1.2);
}

/* Active state: pill-shape, brighter, soft pulse */
.module-dot.is-active {
  width: 22px;
  border-radius: 100px;
  background: var(--text);
  animation: dot-active-pulse 2.4s ease-in-out infinite;
}

@keyframes dot-active-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

/* Per-module color when active — picks up the module's signature color */
.module-dot[data-module="horizon"].is-active { background: var(--blue); }
.module-dot[data-module="tower"].is-active   { background: var(--sky); }
.module-dot[data-module="hangar"].is-active  { background: var(--yellow); }
.module-dot[data-module="wingman"].is-active { background: var(--pink); }

@media (max-width: 880px) {
  .module-dots { gap: 10px; }
  .module-dot.is-active { width: 18px; }
}


/* v50.5: External CTA — sits below the orb in the same column.
   Slightly larger + more padded than the inside version it replaced.
   Color shifts with active module via existing site.css rules. */
.card-link-outside {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--blue-soft);
  padding: 12px 0 4px;
  border-bottom: 1px solid currentColor;
  white-space: nowrap;
  transition: color 0.4s ease, transform 0.3s ease, border-color 0.4s ease;
}

.card-link-outside:hover {
  color: var(--text);
  transform: translateY(-1px);
}

/* Fade the external CTA in sync with the card swap (uses :has() so
   no JS coordination needed). When .loop-card has .is-swapping during
   the 280ms content-swap window, fade the link too. */
.loop-stage:has(.loop-card.is-swapping) .card-link-outside {
  opacity: 0;
  transition: opacity 0.28s ease;
}

/* Per-phase color theming for the external link — mirrors the existing
   inside-card theming pattern from site.css */
.loop-stage[data-active="tower"] .card-link-outside { color: var(--sky); }
.loop-stage[data-active="hangar"] .card-link-outside { color: var(--yellow); }
.platform-pinned.is-wingman-active .card-link-outside { color: var(--pink); }

/* v50.3: Card sizing for the constrained right-column layout.
   v50.6: viewBox cropped from 880→700 height (wingman-aura's old
   territory). Orb center is now at (300-(-80))/700 = 54% of frame
   instead of 43%. Override site.css's old top:43% accordingly. */
.platform-pinned .loop-card {
  top: 54%;
}

.platform-pinned .loop-card .card-icon {
  width: 64px;
  height: 64px;
}

.platform-pinned .loop-card .card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* ============================================================
   FALLBACK: tablet/mobile layout
   ============================================================ */

@media (max-width: 880px) {
  .module-strip-vertical {
    flex-direction: row;
    flex-wrap: wrap;
    overflow-x: auto;
    gap: 8px;
    padding: 8px 0;
  }
  .module-strip-vertical .module-chip {
    flex: 0 0 auto;
    padding: 10px 14px;
  }
  .module-strip-vertical .module-strip-divider {
    display: none;
  }
}


/* ============================================================
   ============== POST-STAGING ADDITIONS START ================
   Everything below this line is layered on top of staging's
   baseline site-v50.css. These rules support page changes made
   after the staging snapshot: removed bridge/path-rail sections,
   updated platform-intro structure, new problem-impact-row
   layout, atmospheric section variation, font-size consistency.
   ============================================================ */


/* PLATFORM HEADLINE — restored display weight + gradient em.
   Uses .platform-intro .platform-headline chained selector + !important
   to win unambiguously against any prior rules in the cascade. */
.platform-intro {
  max-width: none !important;
  margin: 0 0 32px !important;
}

.platform-intro .platform-headline {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(40px, 5.2vw, 72px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  color: var(--text) !important;
  margin: 0 0 32px !important;
  text-wrap: pretty;
  display: block;
}

.platform-intro .platform-headline em {
  font-style: normal !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, var(--blue) 20%, var(--pink) 60%, var(--yellow) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

.platform-intro .platform-headline b {
  font-weight: 700;
  color: var(--text);
}

@media (max-width: 880px) {
  .platform-intro .platform-headline {
    font-size: clamp(30px, 7vw, 48px) !important;
    margin: 0 0 24px !important;
  }
}


/* PHASE 2 — ATMOSPHERIC SECTION VARIATION
   Per-section radial atmospheres + hairline section seams so the
   eye finds section boundaries without reading copy. */

section.problem {
  background:
    radial-gradient(ellipse at 15% 10%, rgba(163, 227, 254, 0.05), transparent 55%),
    radial-gradient(ellipse at 25% 30%, rgba(79, 180, 241, 0.04), transparent 60%);
  border-top: 1px solid var(--border);
}

section.platform {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(249, 153, 255, 0.05), transparent 60%),
    radial-gradient(ellipse at 20% 85%, rgba(163, 227, 254, 0.04), transparent 60%);
  border-top: 1px solid var(--border);
  padding-bottom: 40px;
  padding-top: 60px;
}

section.block.changes-impact {
  background:
    radial-gradient(ellipse at 35% 50%, rgba(79, 180, 241, 0.04), transparent 60%),
    radial-gradient(ellipse at 65% 50%, rgba(249, 153, 255, 0.04), transparent 60%);
  border-top: 1px solid var(--border);
  padding-top: 60px;
}

section.operator-cred {
  background:
    radial-gradient(ellipse at 20% 90%, rgba(245, 250, 162, 0.04), transparent 60%),
    radial-gradient(ellipse at 60% 30%, rgba(242, 153, 216, 0.04), transparent 60%),
    var(--navy);
  border-top: 1px solid var(--border);
}

section.why-now {
  border-top: 1px solid var(--border);
}


/* PROBLEM IMPACT ROW — side-by-side 60% beat + cost-curve chart. */
.problem-impact-row {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr);
  gap: 64px;
  align-items: center;
  margin-top: 80px;
}

.problem-impact-row .section-closer.closer-60 {
  margin: 0;
  padding: 0;
  max-width: none;
  border: none;
  background: none;
  overflow: visible;
}

.problem-impact-row .cost-curve-beat {
  margin: 0;
  max-width: none;
}

@media (max-width: 1100px) {
  .problem-impact-row {
    grid-template-columns: 1fr;
    gap: 48px;
    margin-top: 56px;
  }
}


/* FONT-SIZE CONSISTENCY — pin all section subtext to 17px regardless
   of viewport. Eliminates clamp drift that made hero/platform/team
   subtext appear different sizes at large viewports. */
.lede,
.platform-lede,
.cred-narrative,
.hero-content .hero-tier.product {
  font-size: 17px;
  line-height: 1.55;
}

/* Platform connector — slightly larger than the lede so the "three modules /
   one loop / one assistant" beat reads as the pivot into the orb. */
.platform-connector {
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.5;
}

.problem-card p,
.theme p,
.pressure-body {
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 480px) {
  .lede,
  .platform-lede,
  .cred-narrative,
  .hero-content .hero-tier.product {
    font-size: 16px;
  }
  .platform-connector {
    font-size: 19px;
  }
}



/* ============================================================
   ORB NAV ARROWS — anchored to .platform-pinned (sticky orb container).
   --------------------------------------------------------------
   position: absolute against .platform-pinned. Since .platform-pinned
   is position: sticky, it's a positioning context. While it's in the
   sticky range, arrows are visually at viewport center alongside the
   orb. When the user scrolls past, arrows scroll away with .platform-
   pinned — not floating independently at viewport center.
   ============================================================ */

.orb-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  background: rgba(11, 22, 49, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.orb-nav-arrow svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Position arrows just outside the orb's visual area. The orb is
   ~860px wide, centered in .platform-pinned. Push arrows to 24px
   from the .platform-pinned edges on wide screens. */
.orb-nav-arrow-prev { left: 24px; }
.orb-nav-arrow-next { right: 24px; }

.orb-nav-arrow:hover {
  background: rgba(11, 22, 49, 0.95);
  border-color: var(--blue-soft);
  color: var(--blue-soft);
  transform: translateY(-50%) scale(1.05);
}

.orb-nav-arrow:active {
  transform: translateY(-50%) scale(0.95);
}

.orb-nav-arrow:focus-visible {
  outline: 2px solid var(--blue-soft);
  outline-offset: 3px;
}

@media (max-width: 880px) {
  .orb-nav-arrow {
    width: 44px;
    height: 44px;
  }
  .orb-nav-arrow svg { width: 20px; height: 20px; }
  .orb-nav-arrow-prev { left: 12px; }
  .orb-nav-arrow-next { right: 12px; }
}


/* ============================================================
   PLATFORM-PINNED: removed sticky positioning since the orb is
   now click-driven (no 300vh scroll runway to stick through).
   Kept position: relative so .orb-nav-arrow absolute positioning
   still works against this container.
   ============================================================ */
.platform-pinned {
  position: relative !important;
  top: auto !important;
  height: auto !important;
  padding: 0 0 24px !important;  /* no top padding — SVG canvas already has built-in space above the visible arc for the ANTICIPATE label */
}

/* Fix Wingman G descender getting clipped by the background-clip: text
   gradient when line-height is 1. Bumping to 1.15 gives descenders
   room without visibly affecting non-descender module names. */
.card-name {
  line-height: 1.15 !important;
  padding-bottom: 4px;
}