/* ============================================================
   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: 64px;
}

.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: 44px;
  height: 44px;
  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: center;
  gap: 22px;
  padding: 24px 0;
}

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

/* v51: card content gets a wider container in the bigger orb */
.platform-pinned .loop-card {
  max-width: 540px !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(--sky); }
.module-dot[data-module="tower"].is-active   { background: var(--pink-soft); }
.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(--pink-soft); }
.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;
  }
}