/* ============================================================
   AEDO — Home hero GSAP motion (self-contained progressive enhancement)
   Loaded only on the home page. Animates the #hero intro + a scroll
   progress bar. Does NOT touch script.js's .reveal sections.
   All states key off .motion-pending / .motion-gsap which JS manages
   only when GSAP is confirmed; otherwise the hero shows normally.
   ============================================================ */

.motion-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), #ff8a3d);
  transform: scaleX(0); transform-origin: 0 50%;
  z-index: 1000; pointer-events: none;
  box-shadow: 0 0 12px rgba(232,97,0,0.5);
}

/* Hero pre-animation state — added before first paint, removed by JS
   (or a failsafe timeout) so the hero can never stay hidden. */
html.motion-pending #hero .hero-badge,
html.motion-pending #hero .hero-sub,
html.motion-pending #hero .hero-actions,
html.motion-pending #hero .hero-visual,
html.motion-pending #hero .hero-primary-cta,
html.motion-pending #hero .hero-secondary-links,
html.motion-pending #hero .hero-title .line { opacity: 0; will-change: opacity, transform; }

/* ---- Premium pointer interactions ---- */
.hv-stage { will-change: transform; }
#hero .hero-actions .btn { will-change: transform; }
.hero-spotlight {
  position: absolute; top: 0; left: 0; width: 520px; height: 520px;
  margin: -260px 0 0 -260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(240,165,0,0.16), rgba(240,165,0,0) 62%);
  pointer-events: none; z-index: 1; opacity: 0;
  transition: opacity .5s ease; mix-blend-mode: screen;
}
#hero.spot-on .hero-spotlight { opacity: 1; }

/* ---- Flagship sticky app showcase (Apple/Linear-style) ---- */
.appshow { max-width: 1100px; margin: 8px auto 48px; }
.appshow-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 52px; align-items: start; }
.appshow-stage { position: sticky; top: 92px; display: flex; flex-direction: column; align-items: center; }
.appshow-glow { position: absolute; inset: -12% -12% 6% -12%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 52% at 50% 42%, rgba(240,165,0,0.18), transparent 70%); }
.appshow-phone { position: relative; width: 268px; max-width: 72vw; aspect-ratio: 9 / 19.5;
  background: #0a0e14; border-radius: 34px; padding: 9px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.6), 0 0 0 1.5px rgba(255,255,255,0.08), inset 0 0 0 1px rgba(255,255,255,0.04); }
.appshow-notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 36%; height: 16px; background: #0a0e14; border-radius: 0 0 12px 12px; z-index: 3; }
.appshow-screen { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px);
  object-fit: cover; object-position: top center; border-radius: 26px; background: #f4f5fa;
  opacity: 0; transition: opacity .5s ease; }
.appshow-screen.active { opacity: 1; }
.appshow-tag { margin-top: 22px; text-align: center; }
.appshow-tag strong { display: block; font-family: var(--font2); font-size: 16px; color: var(--text); }
.appshow-tag span { font-size: 12.5px; color: var(--text2); }
.appshow-eyebrow { font-family: var(--font3, monospace); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.appshow-h { font-family: var(--font2); font-weight: 800; font-size: clamp(24px, 3.2vw, 34px); line-height: 1.1; color: var(--text); margin: 10px 0 26px; }
.appshow-step { display: flex; gap: 16px; align-items: center; min-height: 30vh; padding: 18px 0; border-top: 1px solid rgba(122,154,181,0.14); opacity: 0.42; transition: opacity .35s ease; }
.appshow-step.active { opacity: 1; }
.appshow-step .as-n { font-family: var(--font3, monospace); font-size: 13px; color: var(--accent); padding-top: 3px; flex: none; }
.appshow-step h4 { font-family: var(--font2); font-weight: 700; font-size: 18px; color: var(--text); margin: 0 0 5px; }
.appshow-step p { color: var(--text2); font-size: 14.5px; line-height: 1.6; margin: 0; }
.appshow-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

@media (max-width: 820px) {
  .appshow-grid { grid-template-columns: 1fr; gap: 26px; }
  .appshow-stage { position: relative; top: 0; }   /* drop sticky on mobile */
  .appshow-phone { width: 232px; }
  .appshow-step { opacity: 1; min-height: 0; }      /* all readable when stacked, no scroll zones */
}

@media (prefers-reduced-motion: reduce) {
  html.motion-pending #hero .hero-badge,
  html.motion-pending #hero .hero-sub,
  html.motion-pending #hero .hero-actions,
  html.motion-pending #hero .hero-visual,
  html.motion-pending #hero .hero-primary-cta,
  html.motion-pending #hero .hero-secondary-links,
  html.motion-pending #hero .hero-title .line { opacity: 1 !important; transform: none !important; }
  .motion-progress, .hero-spotlight { display: none; }
  .appshow-step { opacity: 1; }
}