/* ============================================================================
   Orbit Hero — scroll-driven exploded-view component
   Everything is scoped under .orbit-hero. No global styles, no dependencies.

   Ground colour: the layers keep their own soft shadows, and those shadows have
   the render's warm studio background baked into their semi-transparent pixels.
   On a warm light ground it is seamless; on a dark ground every shadow becomes a
   pale halo. A dark version needs layers re-rendered on a transparent background.
   ============================================================================ */

.orbit-hero{
  /* ---- ground -------------------------------------------------------- */
  --oh-bg:        #EFE9E1;
  --oh-bg-edge:   #E2DACF;

  /* ---- geometry ------------------------------------------------------ */
  --oh-frame-w:   min(720px, 46vw);  /* width of the device stage */
  --oh-frame-x:   74%;                /* horizontal centre — biased right, clear of the copy */
  --oh-fx0:       74;                 /* start centre (%) — right side, clear of the copy */
  --oh-fx1:       50;                 /* end centre (%) — drifts to middle as it explodes */
  --oh-frame-y:   52%;                /* vertical centre of the stage */
  --oh-track:     185vh;              /* scroll distance the animation spans */
  --oh-span:      0.92;               /* fraction of the track used to spread */
  --oh-start:     0.00;               /* how far apart on first paint (0–1) */

  /* ---- motion -------------------------------------------------------- */
  --oh-parallax:  20px;               /* pointer parallax at depth 1 */
  --oh-float:     4px;                /* idle float amplitude at depth 1 */
  --oh-lift:      130px;              /* keeps the group optically centred */

  position: relative;
  height: var(--oh-track);
  background: var(--oh-bg);
}

/* Fade into the dark page below — avoids a hard cream → navy cut */
.orbit-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: min(140px, 18vh);
  background: linear-gradient(to bottom, transparent, #050912);
  pointer-events: none;
  z-index: 2;
}

/* Intro copy overlaid on the stage. Dark ink on the cream ground; fades out
   and lifts as the exploded view spreads (driven from the rAF tick). */
.orbit-hero__copy{
  position: absolute;
  z-index: 30;
  top: 52%;
  --oh-copy-base: -50%; /* vertically centred on the stage */
  left: max(clamp(1.25rem, 4vw, 2.5rem), calc((100vw - 1160px) / 2));
  max-width: min(560px, 46vw);
  pointer-events: none; /* re-enabled on interactive children below */
  will-change: opacity, transform;
}
.orbit-hero__copy a,
.orbit-hero__copy button{ pointer-events: auto; }

/* Dark-on-cream overrides for the landing copy primitives */
.orbit-hero__copy .lp-kicker{ color: #5b48d8; }
.orbit-hero__copy h1{
  margin: 0;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.06;
  font-weight: 700;
  max-width: 22ch;
  text-wrap: balance;
  color: #101828;
}
.orbit-hero__copy .lp-sub{ color: rgba(16,24,40,0.78); }
.orbit-hero__copy .lp-hero-meta{ color: rgba(16,24,40,0.55); }
.orbit-hero__copy .lp-btn-ghost{
  color: #101828;
  background: rgba(16,24,40,0.05);
  border-color: rgba(16,24,40,0.28);
}

@media (max-width: 820px){
  .orbit-hero__copy{
    top: 76px;
    --oh-copy-base: 0px;
    left: 20px;
    right: 20px;
    max-width: none;
  }
  .orbit-hero__copy h1{ font-size: clamp(1.6rem, 6.4vw, 2.1rem); }
  .orbit-hero__copy .lp-sub{ font-size: 0.92rem; max-width: 24rem; }
  .orbit-hero__copy .lp-hero-meta{ display: none; }
}

/* Assembled product still — shown at scroll start on the right, crossfades
   into the exploded layers as the user scrolls (opacity driven from JS). */
.orbit-hero__still{
  position: absolute;
  left: var(--oh-frame-x, 74%);
  top: var(--oh-frame-y);
  width: var(--oh-frame-w);
  aspect-ratio: 1536 / 1024;
  object-fit: contain;
  transform: translate(-50%, -50%)
             translateY(calc(var(--oh-frame-w) * 113 / 1536))
             translateY(var(--oh-stage-y, 0px));
  z-index: 28;
  will-change: opacity;
  pointer-events: none;
  /* Feather the baked-in studio background so it melts into the stage gradient */
  -webkit-mask-image: radial-gradient(90% 90% at 50% 52%, #000 34%, transparent 62%);
  mask-image: radial-gradient(90% 90% at 50% 52%, #000 34%, transparent 62%);
}

.orbit-hero__stage{
  position: sticky; top: 0;
  height: 100vh; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 40%,
              color-mix(in srgb, var(--oh-bg) 82%, #fff) 0%,
              var(--oh-bg) 46%, var(--oh-bg-edge) 100%);
}

/* The frame is the 1536x1024 source render plus 260px of headroom at the top,
   so the parts have somewhere to travel to without leaving the stage. */
.orbit-hero__frame{
  position: absolute; left: var(--oh-frame-x, 50%); top: var(--oh-frame-y);
  width: var(--oh-frame-w);
  aspect-ratio: 1536 / 1250;
  transform: translate(-50%, -50%) translateY(var(--oh-stage-y, 0px));
}

.orbit-hero__part{
  position: absolute;
  will-change: transform;
  transform: translate3d(var(--oh-tx, 0px), var(--oh-ty, 0px), 0);
}
.orbit-hero__part img{ display: block; width: 100%; height: auto; }

/* Layer geometry, measured from the source render. Only edit if you re-export. */
.orbit-hero__part[data-part="lid"]      { left: 26.237%; top: 25.040%; width: 46.094%; z-index: 26 }
.orbit-hero__part[data-part="ring"]     { left: 26.497%; top: 34.880%; width: 43.294%; z-index: 24 }
.orbit-hero__part[data-part="sphere"]   { left: 38.151%; top: 39.920%; width: 18.099%; z-index: 22 }
.orbit-hero__part[data-part="satellite"]{ left: 65.755%; top: 64.720%; width: 22.917%; z-index: 21 }
.orbit-hero__part[data-part="base"]     { left: 13.086%; top: 60.160%; width: 60.742%; z-index: 20 }

/* the device's own indicator lights */
.orbit-hero__led{
  position: absolute; aspect-ratio: 1; border-radius: 50%;
  background: #7FCBE6;
  box-shadow: 0 0 6px 2px rgba(127,203,230,.8), 0 0 20px 7px rgba(44,122,155,.3);
  animation: orbit-hero-pulse 3.4s ease-in-out infinite;
}
.orbit-hero__part[data-part="sphere"] .orbit-hero__led{ left: 24.6%; top: 55.5%; width: 2.6% }
.orbit-hero__part[data-part="base"]   .orbit-hero__led{ left: 56.1%; top: 76.7%; width: 1.05% }
@keyframes orbit-hero-pulse{ 0%,100%{opacity:.45} 50%{opacity:1} }

/* ---- part labels ------------------------------------------------------
   Small dark-ink captions with a thin leader line. Visibility is driven
   from the rAF tick via --oh-label-o on the root (fades in once the parts
   have spread). */
.orbit-hero__label{
  position: absolute;
  z-index: 40;
  width: max-content;
  max-width: 210px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(16,24,40,0.72);
  opacity: var(--oh-label-o, 0);
  transform: translateY(calc((1 - var(--oh-label-o, 0)) * 8px));
  pointer-events: none;
  transition: opacity .18s linear, transform .18s linear;
}
.orbit-hero__label strong{
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #101828;
  margin-bottom: 2px;
}
/* leader line from the part toward the text */
.orbit-hero__label::before{
  content: "";
  position: absolute;
  top: 9px;
  height: 1px;
  width: 34px;
  background: rgba(16,24,40,0.45);
}
.orbit-hero__label::after{
  content: "";
  position: absolute;
  top: 6.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5b48d8;
}
.orbit-hero__label[data-side="right"]{ left: calc(100% + 42px); top: 38%; }
.orbit-hero__label[data-side="right"]::before{ left: -38px; }
.orbit-hero__label[data-side="right"]::after{ left: -44px; }
.orbit-hero__label[data-side="left"]{ right: calc(100% + 42px); top: 38%; text-align: right; }
.orbit-hero__label[data-side="left"]::before{ right: -38px; }
.orbit-hero__label[data-side="left"]::after{ right: -44px; }

/* Per-part nudges so labels sit clear of the render pixels */
.orbit-hero__part[data-part="lid"]       .orbit-hero__label{ top: 22%; }
.orbit-hero__part[data-part="ring"]      .orbit-hero__label{ top: 30%; }
.orbit-hero__part[data-part="sphere"]    .orbit-hero__label{ top: 55%; }
.orbit-hero__part[data-part="satellite"] .orbit-hero__label{ top: 60%; }
.orbit-hero__part[data-part="base"]      .orbit-hero__label{ top: 78%; }

@media (max-width: 820px){
  /* the stage fills ~92vw on mobile, so side labels would overflow the
     viewport — hide them; the parts speak for themselves */
  .orbit-hero__label{ display: none; }
}

@media (max-width: 820px){
  .orbit-hero{ --oh-frame-w: 92vw; --oh-frame-x: 50%; --oh-fx0: 50; --oh-fx1: 50; --oh-frame-y: 64%; --oh-track: 165vh; --oh-span: 0.9 }
}

@media (prefers-reduced-motion: reduce){
  .orbit-hero{ height: 100vh }
  .orbit-hero__led{ animation: none; opacity: .9 }
}