/* ============================================================
   TheBigs.AI — Homepage hero: five app screens orbit a 3D baseball
   ------------------------------------------------------------
   Ported from the standalone prototype (build 20261018-1832-autoplay).
   All selectors are prefixed "ob-" so nothing here collides with
   styles.css. Driven by js/hero-orbit.js, which positions the phones,
   the ball and the feature copy with inline transforms.
   ============================================================ */

.ob-track {
  --ob-ink: #111713;
  --ob-paper: #f0f0e7;
  --ob-gold: #D4A017;
  --ob-line: rgba(237,241,222,.13);
  --ob-nav: 52px;                                  /* the site's fixed top bar */
  --ob-title-offset: clamp(0px, calc(25svh - 100px), 44px);
  position: relative;
  height: 100vh; height: 100svh;
  color: var(--ob-paper);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}
.ob-track button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; font: inherit; color: inherit; cursor: pointer; }
.ob-track button:disabled { opacity: .35; cursor: default; }
.ob-track button:focus-visible { outline: 2px solid var(--ob-gold); outline-offset: 6px; }

.ob-hero {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden; isolation: isolate;
  background: var(--ob-ink) url('../assets/hero/bg-stadium.webp') 50% 100% / cover no-repeat;
}
.ob-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(8,14,11,.60) 0%, rgba(8,14,11,.36) 25%, rgba(8,14,11,.40) 60%, rgba(8,14,11,.72) 100%);
}
.ob-hero::after {
  content: ""; position: absolute; inset: 82px 30px 88px; z-index: 1; pointer-events: none;
  border-left: 1px solid rgba(240,240,230,.035); border-right: 1px solid rgba(240,240,230,.035);
}

/* ---------- Intro: title, value line, the two paths ---------- */
.ob-intro {
  position: absolute; left: 5%; right: 5%;
  top: calc(var(--ob-nav) + clamp(18px, 4vh, 48px) + var(--ob-title-offset));
  text-align: center; z-index: 450; pointer-events: none;
}
.ob-intro-inner { display: inline-block; max-width: 760px; }
.ob-intro, .ob-copy, .ob-hint { text-shadow: 0 2px 16px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.55); }
.ob-title {
  margin: 0;
  font-family: acumin-pro-condensed, -apple-system, sans-serif;
  font-size: clamp(48px, min(8.4vw, 11.5vh), 92px); font-weight: 800; line-height: .92;
  text-transform: uppercase; letter-spacing: -0.02em; color: #fff;
  text-wrap: balance;
}
.ob-intro-lower { display: inline-block; margin-top: clamp(12px, 2vh, 18px); }
.ob-sub {
  margin: 0 auto; max-width: 560px;
  font-size: clamp(15px, 1.5vw, 18px); line-height: 1.5; color: rgba(255,255,255,.88);
}
.ob-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: clamp(16px, 2.6vh, 26px); pointer-events: auto; }
.ob-buttons .btn { text-shadow: none; }
.ob-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- Stage: ball, orbit rings, phones ---------- */
.ob-stage { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ob-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ob-ring path { fill: none; stroke: #a6b89a; stroke-width: .8; }
.ob-ring--back { z-index: 30; }
.ob-ring--front { z-index: 100; }
.ob-ring--back path { stroke-dasharray: 2 6; opacity: .22; }
.ob-ring--front path { opacity: .30; }
.ob-sphere { position: absolute; left: 0; top: 0; z-index: 100; will-change: transform, opacity; }
.ob-sphere canvas { display: block; width: 100%; height: 100%; filter: drop-shadow(0 24px 28px rgba(0,0,0,.3)); }
.ob-shadow { position: absolute; width: 240px; height: 35px; border-radius: 50%; background: rgba(0,0,0,.36); filter: blur(18px); z-index: 5; will-change: transform, opacity; }
.ob-phone {
  position: absolute; left: 0; top: 0;
  width: var(--phone-width, 150px); height: var(--phone-height, 324px);
  border-radius: calc(24px * var(--phone-unit, 1)); padding: calc(5px * var(--phone-unit, 1));
  background: linear-gradient(135deg, #777f76 0%, #28312a 19%, #050a07 48%, #5c665b 83%, #202920 100%);
  box-shadow: 0 calc(15px * var(--phone-unit, 1)) calc(35px * var(--phone-unit, 1)) rgba(0,0,0,.32), 0 1px 1px rgba(255,255,255,.12) inset;
  transform-origin: center; will-change: transform, opacity;
}
.ob-phone.is-focused { will-change: auto; }
.ob-phone::before {
  content: ""; position: absolute; right: calc(-2px * var(--phone-unit, 1));
  width: calc(2px * var(--phone-unit, 1)); height: calc(25px * var(--phone-unit, 1)); top: calc(82px * var(--phone-unit, 1));
  background: #727a6e; border-radius: 0 2px 2px 0;
}
.ob-phone-screen { height: 100%; overflow: hidden; position: relative; border-radius: calc(20px * var(--phone-unit, 1)); background: #fff; }
.ob-phone-screen > img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }

/* ---------- Feature copy (one per screen) ---------- */
.ob-copy { position: absolute; top: 0; left: 0; width: 360px; z-index: 400; opacity: 0; visibility: hidden; pointer-events: none; will-change: transform, opacity; }
.ob-copy h2 { margin: 0 0 18px; font-size: clamp(32px, 3.4vw, 52px); line-height: 1.04; font-weight: 400; letter-spacing: -.04em; text-wrap: balance; color: var(--ob-paper); }
.ob-copy p { margin: 0; max-width: 345px; color: #d0d8cc; font-size: 15px; line-height: 1.65; }
.ob-copy-divider { height: 0; margin-top: 22px; border-top: 1px solid rgba(255,255,255,.4); }

/* ---------- Bottom band: hint, step dots, play/pause ---------- */
.ob-bottom { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 500; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ob-hint { display: flex; gap: 11px; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: 500; line-height: 1.25; white-space: nowrap; }
.ob-playback { position: relative; }
.ob-nav { display: flex; align-items: center; gap: 6px; }
.ob-nav::before, .ob-nav::after { content: ""; width: 30px; height: 1px; background: var(--ob-line); margin: 0 8px; }
.ob-step { appearance: none; background: transparent; border: 1px solid transparent; padding: 0; width: 35px; height: 35px; border-radius: 50%; color: #aab6a5; font-weight: 800; font-size: 12px; line-height: 1; letter-spacing: -.04em; transition: background .15s, color .15s, border-color .15s; }
.ob-step:hover { border-color: #597150; color: var(--ob-paper); }
.ob-step[aria-current="step"] { background: var(--ob-gold); color: #15200f; border-color: var(--ob-gold); }
.ob-step.is-complete { color: #d2dcc8; }
.ob-play { position: absolute; top: 0; left: calc(100% + 8px); display: grid; place-items: center; width: 35px; height: 35px; padding: 0; border: 1px solid #53624a; border-radius: 50%; background: rgba(17,23,19,.65); color: #fff; }
.ob-play:hover { border-color: var(--ob-gold); color: var(--ob-gold); }
.ob-play svg { width: 18px; height: 18px; }
.ob-play[hidden] { display: none; }
.ob-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #233222; z-index: 510; }
.ob-progress-fill { height: 100%; width: 100%; background: var(--ob-gold); transform: scaleX(0); transform-origin: left; will-change: transform; }

/* ---------- Reduced motion / no JS ---------- */
/* The five stories as ordinary content. Hidden visually unless motion is reduced. */
.ob-fallback { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.ob-reduced .ob-fallback { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; background: #172219; color: #f0f0e7; padding: 60px max(7vw, 24px); }
.ob-reduced .ob-fallback article { padding: 38px 0; border-top: 1px solid rgba(237,241,222,.13); display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 35px; }
.ob-reduced .ob-fallback h2 { font-size: 30px; font-weight: 400; margin: 0; letter-spacing: -1px; }
.ob-reduced .ob-fallback p { margin: 0; color: #aabc9f; font-size: 15px; line-height: 1.7; }
.ob-reduced .ob-hero { position: relative; }
.ob-reduced .ob-progress { display: none; }
.ob-noscript { display: block; background: #263723; padding: 20px; color: #f0f0e7; text-align: center; }

/* ---------- Breakpoints (mirroring the prototype) ---------- */
@media (max-aspect-ratio: 1/1) {
  .ob-hero { background-position: 77% 100%; }
}
@media (min-width: 1600px) {
  .ob-copy h2 { font-size: 58px; }
}
@media (max-height: 760px) and (min-width: 741px) {
  .ob-copy h2 { font-size: 38px; margin-bottom: 12px; }
  .ob-copy p { font-size: 13px; }
  .ob-copy-divider { margin-top: 16px; }
  .ob-bottom { bottom: 18px; gap: 8px; }
  .ob-sub { font-size: 15px; }
}
@media (max-width: 740px) {
  .ob-hero::after { inset: 73px 16px 90px; }
  .ob-intro { left: 16px; right: 16px; top: calc(var(--ob-nav) + 16px + var(--ob-title-offset)); }
  .ob-title { font-size: clamp(44px, 13vw, 64px); }
  .ob-sub { font-size: 14px; line-height: 1.5; max-width: 340px; }
  .ob-intro-lower { margin-top: 12px; }
  .ob-buttons { margin-top: 14px; gap: 10px; }
  .ob-buttons .btn { padding: 12px 20px; font-size: 14px; }
  .ob-copy { text-align: center; }
  .ob-copy h2 { font-size: clamp(26px, 7.2vw, 34px); margin-bottom: 10px; line-height: 1.04; }
  .ob-copy p { font-size: 12px; line-height: 1.55; margin: 0 auto; max-width: 300px; }
  .ob-copy-divider { margin-top: 14px; }
  .ob-bottom { bottom: 16px; gap: 8px; }
  .ob-hint { font-size: 14px; gap: 8px; }
  .ob-nav { gap: 4px; }
  .ob-nav::before, .ob-nav::after { width: 12px; margin: 0 2px; }
  .ob-step { width: 30px; height: 30px; font-size: 11px; }
  .ob-play { width: 30px; height: 30px; }
  .ob-reduced .ob-fallback article { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 740px) and (max-height: 700px) {
  .ob-title { font-size: clamp(40px, 12vw, 56px); }
  .ob-copy h2 { font-size: 26px; }
  .ob-copy p { font-size: 11.5px; line-height: 1.5; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .ob-intro { top: calc(var(--ob-nav) + 10px + var(--ob-title-offset)); }
  .ob-title { font-size: 44px; }
  .ob-sub { font-size: 13px; max-width: 480px; }
  .ob-intro-lower { margin-top: 8px; }
  .ob-buttons { margin-top: 10px; }
  .ob-buttons .btn { padding: 10px 18px; font-size: 13px; }
  .ob-copy { text-align: left; }
  .ob-copy h2 { font-size: 26px; margin-bottom: 8px; }
  .ob-copy p { font-size: 11px; line-height: 1.55; }
  .ob-copy-divider { margin-top: 12px; }
  .ob-bottom { bottom: 10px; gap: 6px; }
  .ob-hint { font-size: 13px; }
  .ob-step, .ob-play { width: 29px; height: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  .ob-track *, .ob-track *::before, .ob-track *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}