/* home/hero.css: the hero of index.html, the first screen.
   Owned by the hero agent. Builds on home/base.css (tokens, .h-btn, glass).

   One job: who Rod is, and two clear next steps.
   One signature move, the only scroll linked photo scene on the page:
     ARRIVAL  once, on load. The room comes up out of the dark (a navy veil
              lifts while the photo settles from a slight push in), and the
              headline rises line by line out of its own baseline.
     SCROLL   as the hero leaves, the operating room falls back and darkens
              while Rod stays close: two depth plates cut from this same
              photograph (rod/assets/images/home/hero/, added by hero.js)
              move at different rates. Each line of copy lifts and fades as
              it passes under the nav. Native scroll timelines where the
              browser has them (compositor, no lag), hero.js elsewhere.
   Nothing is ever hidden from the first paint except by a time animation
   that is already running, so the content and the LCP image are never held.
   Reduced motion: no arrival, no scene, no plates; the page is simply there. */

/* ── GROUND AND LAYOUT ─────────────────────────────────────────────────── */
.hp-hero {
  --h-hero-inset: calc(var(--nav-h) + var(--nav-top));   /* the nav's bottom edge */
  min-height: clamp(700px, 60vw, 940px);   /* the first screen, as it was before the steps sat in one row */
  background: #080B20;
  position: relative;
  overflow: hidden;
  overflow: clip;          /* clip, not hidden: hidden would capture the copy's view() timelines */
  display: flex;
  align-items: flex-start;
}

/* The photo already falls to black on the left; this keeps the copy legible
   over it and lets the bottom edge settle into the ground. */
.hp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(8, 11, 32, 0.75) 0%,
      rgba(8, 11, 32, 0.50) 28%,
      rgba(8, 11, 32, 0.12) 50%,
      transparent 68%),
    linear-gradient(to top, rgba(8, 11, 32, 0.5) 0%, transparent 25%);
  z-index: 2;
  pointer-events: none;
}
/* Removed: a 600px teal radial glow behind the copy (::after) and a neural
   network line drawing behind the photo. Both were decoration with nothing
   true to say about Rod's work (a glowing blob and a generic node
   constellation, both on the banned list); the drawing was already hidden. */

.hp-hero__left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: calc(var(--nav-h) + var(--nav-top) + 2.5rem) 4vw 2.5rem 5vw;
  position: relative;
  z-index: 3;
  max-width: min(760px, 58%);   /* room for the two steps side by side at 1280 and up */
}

/* ── HEADLINE ──────────────────────────────────────────────────────────────
   Real text, one line per span. Each line is its own window: on arrival the
   words rise into it from below their baseline. The window reaches a little
   past the line box on every side, so Bebas' comma and the tops of the caps
   are never trimmed at rest. */
.hp-hero__h1 {
  font-family: 'Bebas Neue', var(--display);
  font-size: clamp(3rem, 5.5vw, 6rem);
  font-weight: 400;
  font-style: normal;
  color: #fff;
  line-height: 0.88;
  letter-spacing: 0.01em;
  margin-bottom: 1.4rem;
}
.h-hero-line {
  display: block;
  clip-path: inset(-0.3em -0.4em -0.25em -0.4em);   /* room for a fallback font's descenders too */
}
.h-hero-line__in { display: block; }
.h-hero-line--accent { color: var(--teal); }

.hp-hero__bio {
  font-family: var(--sans);
  font-size: 1.08rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: 2rem;
}

/* ── THE TWO NEXT STEPS ────────────────────────────────────────────────────
   One pair, side by side where they fit: the white pill is the main step
   (base .h-btn--on-dark), the second opinion floats over the photograph as
   clear glass (base .h-btn--glass), a white tint so it reads as glass over a
   dark picture instead of a second navy button. */
.hp-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 4rem;
}
.hp-hero .h-hero-cta--glass {
  --hg-tint: rgba(255, 255, 255, 0.1);
  --hg-tint-hover: rgba(255, 255, 255, 0.17);
  --b-bg-press: rgba(255, 255, 255, 0.24);
}

/* ── THE THIRD DOOR: expert witness, for counsel ─────────────────────────
   Apple pairs its pills with a quieter text link and an arrow; this is that
   link. Bio coloured at rest, white with a drawn underline on hover or
   focus, the arrow nudging forward on the same spring as the pills. A 44px
   row, so it is as easy to hit as the buttons above it. */
.hp-hero__ctas:has(+ .h-hero-more) { margin-bottom: 0.85rem; }
.hp-hero .h-hero-more {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  min-height: 44px;
  margin-bottom: 3rem;
  padding: 0 0.15rem;
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: color 0.24s var(--h-ease-out), text-decoration-color 0.24s var(--h-ease-out);
}
.hp-hero .h-hero-more__arrow { display: inline-block; transition: translate var(--h-spring-dur) var(--h-spring); }
.hp-hero .h-hero-more:focus-visible { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.55); outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; }
.hp-hero .h-hero-more:active { color: rgba(255, 255, 255, 0.7); }
@media (hover: hover) and (pointer: fine) {
  .hp-hero .h-hero-more:hover { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.55); }
  .hp-hero .h-hero-more:hover .h-hero-more__arrow { translate: 3px 0; }
}

/* ── THE PHOTOGRAPH ────────────────────────────────────────────────────────
   Bottom to top: the photo (the real <img>, the room's motion), the room
   plate (Rod painted out), the dim, the surgeon plate (Rod alone), the
   arrival veil. Every layer shares the photo's box, fit and position, so the
   plates sit exactly on the picture at every width. Tone and the top fade
   are on the wrapper, so all layers get the same ones. */
.hp-hero__right {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hp-hero__photo-wrap {
  position: absolute;
  top: calc(var(--nav-h) / 10);
  left: 0;
  right: 0;
  bottom: 0;
  filter: brightness(0.88) contrast(1.05);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--nav-h));
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--nav-h));
  transform-origin: 72% 34%;
}
.hp-hero__photo,
.h-hero-plate {
  position: absolute;
  inset: -10px;            /* overscan, so the pointer drift never shows an edge */
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  max-width: none;         /* global img { max-width: 100% } would cap the overscan */
  object-fit: cover;
  object-position: 78% top;
  display: block;
}
.h-hero-plate { pointer-events: none; -webkit-user-select: none; user-select: none; }
.h-hero-plate--room { opacity: 0; }           /* comes in during the first steps of scroll */
.h-hero-plate--ptr { opacity: var(--h-hero-sep, 0); }   /* comes in as the pointer parts him from the room */
.h-hero-plate--surgeon { transform-origin: 72% 34%; }
.h-hero-dim,
.h-hero-focus,
.hp-hero__photo-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #080B20;
  opacity: 0;
  pointer-events: none;
}
/* Pointing at (or tabbing to) the second opinion dims the room around him
   and leaves him lit: the opinion you are asking for is his. Under the
   surgeon plate, so it can only ever darken the room. */
.h-hero-focus { transition: opacity 0.6s var(--h-ease); }
.hp-hero:has(.h-hero-cta--glass:focus-visible) .h-hero-focus { opacity: 0.42; }
@media (hover: hover) and (pointer: fine) {
  .hp-hero:has(.h-hero-cta--glass:hover) .h-hero-focus { opacity: 0.42; }
}

/* ── ARRIVAL (time, once, from the first paint) ──────────────────────────── */
@keyframes h-hero-lights { from { opacity: 0.82; } }
@keyframes h-hero-settle { from { scale: 1.06; } }
@keyframes h-hero-line { from { translate: 0 132%; } }   /* starts fully below the window */
@keyframes h-hero-rise { from { opacity: 0; translate: 0 var(--h-rise, 18px); filter: blur(var(--h-blur, 8px)); } }
@keyframes h-hero-up { from { opacity: 0; translate: 0 16px; } }

@media (prefers-reduced-motion: no-preference) {
  /* The lights come up on the room, and the picture settles from a slight push in. */
  [data-h-hero] .hp-hero__photo-wrap { animation: h-hero-settle 2.6s var(--h-ease-sheet) backwards; }
  [data-h-hero] .hp-hero__photo-wrap::after { animation: h-hero-lights 1.6s var(--h-ease) 0.05s backwards; }
  /* The headline rises into place a line at a time, top to bottom. */
  [data-h-hero] .h-hero-line__in { animation: h-hero-line 0.95s var(--h-ease-sheet) 0.06s backwards; }
  [data-h-hero] .h-hero-line:nth-child(2) .h-hero-line__in { animation-delay: 0.12s; }
  [data-h-hero] .h-hero-line:nth-child(3) .h-hero-line__in { animation-delay: 0.18s; }
  [data-h-hero] .h-hero-line:nth-child(4) .h-hero-line__in { animation-delay: 0.24s; }
  /* Then the words come into focus, then the two steps. No opacity on any
     ancestor of the glass pill, so it is frosted from its first frame.
     Everything is in place by about 1.1s; the first words by 0.3s. */
  [data-h-hero] .hp-hero__bio { animation: h-hero-rise 0.8s var(--h-ease) 0.26s backwards; }
  [data-h-hero] .h-hero-cta { animation: h-hero-up 0.7s var(--h-ease) 0.34s backwards; }
  [data-h-hero] .h-hero-cta + .h-hero-cta { animation-delay: 0.4s; }
  [data-h-hero] .h-hero-more { animation: h-hero-up 0.7s var(--h-ease) 0.48s backwards; }
}

/* ── SCROLL SCENE ─────────────────────────────────────────────────────────
   p runs 0 to 1 while the hero leaves the screen (its exit range). The room
   travels at 86 percent of the page, Rod at 94 percent and grows 3 percent,
   so he separates forward from a room that also darkens. Copy: each line's
   own progress from its top to its bottom crossing the nav's bottom edge. */
@keyframes h-hero-room { to { translate: 0 14%; } }
@keyframes h-hero-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes h-hero-dim { to { opacity: 0.55; } }
@keyframes h-hero-near { to { translate: 0 6%; scale: 1.03; } }
/* A headline line is short: it fades over most of its own crossing. A
   paragraph or a button holds a little longer, so lines still below the nav
   stay readable while its top slips under. */
@keyframes h-hero-exit { 75%, 100% { opacity: 0; } 100% { translate: 0 -20px; } }
@keyframes h-hero-exit-block { 0%, 20% { opacity: 1; } 85%, 100% { opacity: 0; } 100% { translate: 0 -28px; } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-h-hero] { view-timeline: --h-hero block; }
    [data-h-hero] .h-hero-room,
    [data-h-hero] .h-hero-dim,
    [data-h-hero] .h-hero-plate--surgeon {
      animation: h-hero-room linear both;
      animation-timeline: --h-hero;
      animation-range: exit 0% exit 100%;
    }
    [data-h-hero] .h-hero-dim { animation-name: h-hero-dim; }
    [data-h-hero] .h-hero-plate--surgeon { animation-name: h-hero-near; }
    [data-h-hero] .h-hero-plate--room {
      animation: h-hero-room linear both, h-hero-in linear both;
      animation-timeline: --h-hero, --h-hero;
      animation-range: exit 0% exit 100%, exit 0% exit 6%;
    }
    /* The scroll exit first, the arrival after it in the list: while the
       arrival runs it wins, and when it ends the scroll takes over. */
    [data-h-hero] .h-hero-line {
      animation: h-hero-exit linear both;
      animation-timeline: view(block var(--h-hero-inset) 0px);
      animation-range: exit 0% exit 100%;
    }
    [data-h-hero] .hp-hero__bio {
      animation: h-hero-exit-block linear both, h-hero-rise 0.8s var(--h-ease) 0.26s backwards;
      animation-timeline: view(block var(--h-hero-inset) 0px), auto;
      animation-range: exit 0% exit 100%, normal;
    }
    [data-h-hero] .h-hero-cta {
      animation: h-hero-exit-block linear both, h-hero-up 0.7s var(--h-ease) 0.34s backwards;
      animation-timeline: view(block var(--h-hero-inset) 0px), auto;
      animation-range: exit 0% exit 100%, normal;
    }
    [data-h-hero] .h-hero-cta + .h-hero-cta { animation-delay: 0s, 0.4s; }
    [data-h-hero] .h-hero-more {
      animation: h-hero-exit-block linear both, h-hero-up 0.7s var(--h-ease) 0.48s backwards;
      animation-timeline: view(block var(--h-hero-inset) 0px), auto;
      animation-range: exit 0% exit 100%, normal;
    }
  }
  /* No scroll timelines (Firefox today): hero.js writes --h-hero-p on the
     hero and --h-hero-q on each line of copy, once a frame, while in view. */
  .h-hero--js .h-hero-room { translate: 0 calc(var(--h-hero-p, 0) * 14%); }
  .h-hero--js .h-hero-plate--room { opacity: min(1, var(--h-hero-p, 0) / 0.06); }
  .h-hero--js .h-hero-dim { opacity: calc(var(--h-hero-p, 0) * 0.55); }
  .h-hero--js .h-hero-plate--surgeon { translate: 0 calc(var(--h-hero-p, 0) * 6%); scale: calc(1 + var(--h-hero-p, 0) * 0.03); }
  .h-hero--js .h-hero-line {
    opacity: calc(1 - min(1, var(--h-hero-q, 0) / 0.75));
    translate: 0 calc(var(--h-hero-q, 0) * -20px);
  }
  .h-hero--js .hp-hero__bio,
  .h-hero--js .h-hero-cta,
  .h-hero--js .h-hero-more {
    opacity: clamp(0, (0.85 - var(--h-hero-q, 0)) / 0.65, 1);
    translate: 0 calc(var(--h-hero-q, 0) * -28px);
  }
}

/* ── TABLETS AND PHONES (960px and less): one continuous portrait ─────────
   The phone composition, fixed with care, now also on tablets (where the
   old two column leftovers squeezed the photo into a 320px strip): Rod's
   face reads at the top, and the headline, bio and steps sit over a strong,
   smooth darkening of the SAME photo at the bottom, so the copy stays part
   of the picture yet fully legible. svh: the hero fits the screen with the
   browser's toolbars showing, so both steps are on the first screen. */
@media (max-width: 960px) {
  .hp-hero {
    min-height: 96vh;
    min-height: 96svh;
    align-items: flex-end;
  }
  .hp-hero::before {
    background: linear-gradient(to bottom,
      rgba(8, 11, 32, 0.18) 0%,
      rgba(8, 11, 32, 0.08) 22%,
      rgba(8, 11, 32, 0.50) 42%,
      rgba(8, 11, 32, 0.85) 58%,
      rgba(8, 11, 32, 0.97) 74%,
      #080B20 92%);
  }
  .hp-hero__photo-wrap {
    inset: 0;
    filter: brightness(0.95) contrast(1.05);
    -webkit-mask-image: none;
    mask-image: none;
    transform-origin: 62% 30%;
  }
  .hp-hero__photo,
  .h-hero-plate { object-position: 66% 13%; }
  .h-hero-plate--surgeon { transform-origin: 62% 30%; }
  .hp-hero__left {
    max-width: 100%;
    width: 100%;
    /* The top padding only counts when the copy is taller than the screen
       (a phone on its side): then the headline still starts below the nav. */
    padding: calc(var(--nav-h) + var(--nav-top) + 1.25rem) 6vw 3rem;
  }
  .hp-hero__h1 { font-size: clamp(3rem, min(8vw, 12svh), 4.6rem); margin-bottom: 1rem; }
  .hp-hero__bio { max-width: 36em; margin-bottom: 1.6rem; }
  .hp-hero__ctas { margin-bottom: 0; }
  .hp-hero .h-hero-more { margin-bottom: 0; }
}

@media (max-width: 600px) {
  .hp-hero__left { padding-bottom: 2.6rem; }
  .hp-hero__h1 { font-size: clamp(2.4rem, 11.5vw, 3.3rem); margin-bottom: 0.85rem; }
  .hp-hero__bio {
    font-size: 0.94rem;
    line-height: 1.55;
    max-width: 100%;
    margin-bottom: 1.5rem;
  }
  .hp-hero__ctas { flex-direction: column; gap: 0.7rem; }
  .hp-hero .h-hero-cta { width: 100%; }
  /* Under two full width pills the quiet link centres, as Apple's do. */
  .hp-hero__ctas:has(+ .h-hero-more) { margin-bottom: 0.5rem; }
  .hp-hero .h-hero-more { align-self: center; margin-bottom: 0; font-size: 0.94rem; }
}

/* ── ACCESSIBILITY FALLBACKS FOR THE CLEAR GLASS PILL ────────────────────
   base.css turns glass solid here, but the tint above is more specific, so
   it is restated: a solid navy pill, white text. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hp-hero .h-hero-cta--glass { --hg-tint: rgba(11, 15, 46, 0.92); --hg-tint-hover: var(--ink); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .hp-hero .h-hero-cta--glass { --hg-tint: var(--h-glass-dark-solid); --hg-tint-hover: var(--ink); }
}