/* ── hero · split wordmark that closes over an expanding frame ── */
.hero {
  position: relative;
  height: 340vh;              /* scroll runway for the pinned stage (19 Oct night: slower, was 260vh) */
  background: var(--white);
}
.hero-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: clip;
  background: var(--white);
}

/* media frame: starts as a centred card, ends full-bleed */
.hero-media {
  position: absolute; left: 50%; top: 50%;
  width: clamp(280px, 34vw, 480px);
  aspect-ratio: 4 / 3;
  translate: -50% -50%;
  overflow: hidden;
  border-radius: 6px;
  background: var(--studio-2);
  will-change: width, height, border-radius;
}
.hero-video { width: 100%; height: 100%; object-fit: cover; }
.hero-media-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(13,22,56,.18) 100%);
  opacity: 0;
}

/* 20 Oct (the operator: "use these in the blank spaces, evenly distributed, beautifully positioned"): the app's welcome
   cards — a Persona card face down, the mark on a white disc — float in the hero's open space at three depths. On load
   they come out from behind the walk; as the walk grows they fade under it (hero.js). */
.hero-cards { position: absolute; inset: 0; pointer-events: none; }
.hc {
  --cw: calc(var(--w) * clamp(0.85px, 0.077vw, 1.3px)); /* grows with the screen: 0.85x at 1024 px, 1.3x from ~1700 px */
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: var(--cw); aspect-ratio: 240 / 336;
  margin: calc(var(--cw) * -0.7) 0 0 calc(var(--cw) * -0.5); rotate: var(--r); opacity: var(--o); filter: blur(var(--b));
  animation: hc-arrive 1100ms cubic-bezier(.16, .84, .3, 1.05) both; animation-delay: calc(250ms + var(--i) * 70ms);
}
.hc i {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 14px;
  background: radial-gradient(120% 70% at 50% 0%, rgba(119,106,255,.2), rgba(255,255,255,0) 62%),
              radial-gradient(100% 55% at 50% 112%, rgba(91,169,255,.12), rgba(255,255,255,0) 62%), #f7f8fe;
  box-shadow: 0 16px 34px rgba(13,22,56,.10), inset 0 0 0 1px rgba(119,106,255,.26);
  animation: hc-drift var(--d) ease-in-out infinite alternate;
}
.hc b { display: grid; place-items: center; width: 42%; aspect-ratio: 1; border-radius: 50%; background: #fff;
  box-shadow: 0 4px 12px rgba(13,22,56,.12), 0 0 0 1px rgba(119,106,255,.12); }
.hc img { width: 64%; height: auto; }
@keyframes hc-drift { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
@keyframes hc-arrive {
  from { transform: translate(calc((50 - var(--x)) * 1vw), calc((50 - var(--y)) * 1vh)) scale(.3); opacity: 0; }
  to { transform: none; opacity: var(--o); }
}
@media (prefers-reduced-motion: reduce) { .hc, .hc i { animation: none; } }

/* the two halves of the name */
.hero-word {
  position: absolute;
  font-size: var(--t-hero);
  font-weight: 400;
  line-height: .82;
  letter-spacing: -.055em;
  color: var(--ink);
  white-space: nowrap;
  will-change: transform;
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em;
}
.hero-word span { display: inline-block; }
.hero-word--a { left: 14vw; top: 16vh; }
.hero-word--b { right: 14vw; bottom: 14vh; }

/* side captions */
.hero-cap {
  position: absolute; top: 50%; translate: 0 -50%;
  font-size: var(--t-small); color: var(--mute); max-width: 14ch; line-height: 1.35;
}
.hero-cap b { color: var(--ink); font-weight: 500; }
.hero-cap--l { left: var(--gutter); }
.hero-cap--r { right: var(--gutter); text-align: right; }

/* tagline shown on the full-bleed state (the studio video is light, so it stays ink) */
.hero-tag {
  position: absolute; right: var(--gutter); top: 50%; translate: 0 -50%;
  color: var(--ink); font-size: var(--t-small); line-height: 1.45; text-align: right;
  opacity: 0; pointer-events: none;
  text-shadow: 0 1px 12px rgba(255,255,255,.6);
}

/* footer strip of the hero */
.hero-foot {
  position: absolute; bottom: 28px;
  font-size: var(--t-micro); color: var(--mute); line-height: 1.4;
}
.hero-foot--l { left: var(--gutter); }

/* full-bleed state (class toggled by scroll progress): the studio video is light, so type stays ink */
.hero-stage.is-bleed .hero-word,
.hero-stage.is-bleed .hero-cap,
.hero-stage.is-bleed .hero-foot { color: var(--ink); }
.hero-stage.is-bleed .hero-cap b { color: var(--ink); }

@media (max-width: 760px) {
  .hero { height: 220vh; }
  .hero-media { width: min(72vw, 360px); aspect-ratio: 3 / 4; }
  .hero-word--a { left: 8vw; top: 12vh; }
  .hero-word--b { right: 8vw; bottom: 16vh; }
  .hero-cap { display: none; }
  .hero-tag { left: var(--gutter); right: var(--gutter); text-align: left; top: auto; bottom: 90px; translate: none;
    /* 21 Oct (QA P0-6): on a light plate — over the walk the ink text fell on dark suits */
    background: rgba(255,255,255,.84); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    padding: 12px 14px; border-radius: 12px; text-shadow: none; }
  .hero-foot--l { max-width: 60%; }
  /* a phone: four, smaller, at the edges round the walk */
  .hc { --cw: var(--pw); left: calc(var(--px, var(--x)) * 1%); top: calc(var(--py, var(--y)) * 1%); }
  .hc.no-phone { display: none; }
  @keyframes hc-arrive {
    from { transform: translate(calc((50 - var(--px, var(--x))) * 1vw), calc((50 - var(--py, var(--y))) * 1vh)) scale(.3); opacity: 0; }
    to { transform: none; opacity: var(--o); }
  }
}
/* 21 Oct (QA P0-10): reduced motion — no timeline reveals the tagline, so it is simply there, under the right caption */
.reduced .hero-tag { opacity: 1; pointer-events: auto; top: auto; bottom: 72px; translate: none; color: var(--ink); text-shadow: none; }
@media (max-width: 760px) { .reduced .hero-tag { bottom: 90px; } }
/* 21 Oct (QA P1-3): the hero's call to action — the free scan as a button, not 11 px of corner text */
.hero-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; z-index: 2; }
.hero-cta-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: var(--r-pill);
  background: var(--grad-action); color: #fff; font-size: .95rem; font-weight: 600; letter-spacing: -.005em;
  box-shadow: 0 12px 30px rgba(74,107,210,.32); transition: transform var(--fast) var(--ease-out), box-shadow var(--fast);
}
.hero-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 36px rgba(74,107,210,.4); }
.hero-cta span { font-size: .875rem; color: var(--mute); }
@media (max-width: 760px) { .hero-cta { max-width: none; right: var(--gutter); } .hero-cta-btn { font-size: .9rem; padding: 12px 18px; } }