/* 1 · HERO — headline, CTA, story rail, and the live product demo on the phone. Logic: js/sections/hero.js */

.hero { min-height: max(100svh, 760px); display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); grid-template-rows: 1fr auto;
  column-gap: 2vw; padding-top: 104px; padding-bottom: 44px; }
.hero-copy { grid-column: 1; grid-row: 1; align-self: center; position: relative; z-index: 2; }
.story { grid-column: 1; grid-row: 2; position: relative; z-index: 2; }
.hero-stage { grid-column: 2; grid-row: 1 / span 2; position: relative; display: grid; place-items: center; perspective: 1900px; min-height: 0; }

.hero-title { font-size: clamp(56px, 6.5vw, 120px); }
.hero-title .ln:nth-child(2) > span { --i: 1; }
.lede { margin: 30px 0 0; max-width: 28em; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.5; color: var(--tx-2); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 26px 0 0; color: var(--tx-3); font-size: 13px; }
.facts li { display: inline-flex; align-items: center; gap: 9px; }
.facts li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--mint); }

/* story rail (doubles as the demo's pause/step control) */
.story { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; max-width: 580px; padding-top: 22px; border-top: 1px solid var(--hair); }
.story-pp { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(243, 238, 227, .07); display: grid; place-items: center; cursor: pointer; transition: background-color 200ms ease, transform 160ms var(--ease-out); }
.story-pp:active { transform: scale(.94); }
.story-pp svg { width: 15px; height: 15px; }
.story-pp .i-play, .story-pp[aria-pressed="true"] .i-pause { display: none; }
.story-pp[aria-pressed="true"] .i-play { display: block; }
.story-steps { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; list-style: none; margin: 0; padding: 0; }
.story-step { width: 100%; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 8px; padding: 6px 8px 8px; border: 0; border-radius: 12px; background: none; text-align: left; color: var(--tx-3); cursor: pointer; transition: color 300ms ease, background-color 200ms ease; }
.story-step .n { font-size: 11px; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.story-step .l { font-size: 15px; font-weight: 500; }
.story-step i { grid-column: 1 / -1; display: block; height: 2px; margin-top: 6px; border-radius: 2px; background: var(--hair); overflow: hidden; }
.story-step b { display: block; height: 100%; background: var(--volt); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.story-step.on { color: var(--tx); }
.story-step.on .n { color: var(--volt); }
.story-step.past b { background: var(--mint); }
@media (hover: hover) and (pointer: fine) { .story-step:hover, .story-pp:hover { background: rgba(243, 238, 227, .07); } }
.story-cap { flex-basis: 100%; margin: 2px 0 0 56px; min-height: 1.5em; color: var(--tx-2); font-size: 14px; }

/* the product scene */
.halo { position: absolute; left: 50%; top: 50%; width: min(118%, 900px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(78, 215, 176, .3), rgba(78, 215, 176, .1) 42%, transparent 72%); }
.halo-ring { position: absolute; left: 50%; top: 50%; width: min(88%, 680px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(243, 238, 227, .08) inset; }
.halo-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(108, 255, 192, .0) 66%, rgba(108, 255, 192, .85) 74%, transparent 74.4%);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
  mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
  animation: spin 22s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
/* Sections get .off while out of view (main.js), which pauses their infinite CSS loops. */
.off .halo-ring::after, .off .bob { animation-play-state: paused; }
.phone-floor { position: absolute; left: 50%; bottom: 3%; width: 46%; height: 60px; translate: -50% 0; border-radius: 50%; background: rgba(0, 10, 8, .6); filter: blur(28px); }

.tilt { position: relative; transform-style: preserve-3d;
  transform: rotateY(calc(-13deg + var(--px, 0) * 7deg)) rotateX(calc(5deg - var(--py, 0) * 5deg)) rotateZ(1.4deg); }
.bob { position: relative; transform-style: preserve-3d; animation: bob 7s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(-6px); } to { transform: translateY(8px); } }
#hero-device { --dw: clamp(280px, min(26vw, calc((100svh - 140px) * 0.477)), 400px);
  filter: drop-shadow(0 50px 60px rgba(0, 8, 6, .55)); }

/* intro: the phone rises into place */
.hero .tilt-in { opacity: 0; transform: translateY(70px) scale(.96); transition: opacity 1200ms var(--ease-out) 150ms, transform 1500ms var(--ease-out) 150ms; }
.hero.in .tilt-in { opacity: 1; transform: none; }

/* floating "Earned" satellite next to the phone */
.sat { position: absolute; left: -42%; top: 44%; display: grid; gap: 4px; padding: 16px 22px 15px; border-radius: 22px; color: var(--surface);
  background: linear-gradient(135deg, #17705F, var(--emerald-deep) 65%, #0A4A40);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16) inset, 0 40px 70px -24px rgba(0, 0, 0, .75);
  opacity: 0; transform: translate3d(30px, 12px, 90px) scale(.94); transition: opacity 500ms var(--ease-out), transform 800ms var(--ease-out); pointer-events: none; }
.hero[data-sat="on"] .sat { opacity: 1; transform: translate3d(0, 0, 90px); }
.sat-l { font-size: 11px; letter-spacing: .22em; font-weight: 600; opacity: .72; font-family: var(--app-sans); }
.sat-v { font-family: var(--app-serif); font-size: 44px; line-height: 1; letter-spacing: -0.02em; }
.sat-s { margin-top: 8px; font-size: 12.5px; font-family: var(--app-sans); color: var(--brass-hi); }

/* ---------- mobile ---------- */
@media (max-width: 900px) {
  /* The copy's children join the hero grid so the product sits right under the actions and the
     facts move below the story rail. That brings the phone, and its first tap, into the first screen. */
  .hero { grid-template-columns: 1fr; grid-template-rows: none; padding-top: 96px; padding-bottom: 56px; min-height: 0; }
  .hero-copy { display: contents; }
  .hero-copy > * { position: relative; z-index: 2; }
  .hero-copy .eyebrow { justify-self: start; }
  .hero-stage { grid-column: 1; grid-row: auto; order: 1; margin: 10px calc(var(--gutter) * -1) 0; padding: 26px 0 10px; overflow: hidden; perspective: 1400px; }
  .story { grid-row: auto; order: 2; margin-top: 14px; }
  .facts { order: 3; margin-top: 20px; }
  .hero-title { font-size: clamp(46px, 13.2vw, 76px); }
  .eyebrow { margin-bottom: 22px; }
  .lede { margin-top: 20px; }
  .actions { margin-top: 26px; }
  .actions .btn { flex: 1 1 auto; }
  #hero-device { --dw: min(72vw, 320px); }
  .tilt { transform: rotateY(calc(-7deg + var(--px, 0) * 4deg)) rotateX(3deg) rotateZ(1deg); }
  .sat { left: -14%; top: 60%; padding: 12px 16px 11px; border-radius: 18px; }
  .sat-v { font-size: 32px; }
  .sat-s { font-size: 11px; }
  .story-cap { margin-left: 0; }
  .story-step .l { font-size: 14px; }
}

/* ---------- reduced motion ---------- */
.rm .hero .tilt-in { transform: none !important; translate: none !important; transition-property: opacity; transition-duration: 400ms; }
.rm .bob, .rm .halo-ring::after { animation: none; }
.rm .sat { transition-property: opacity, background-color, color; }