/* ═══ HERO ═══════════════════════════════════════════════════════
   Bands, bottom to top:
     1 .hero__scene  — the plate: the render with the handset removed
     2 .hero__copy   — headline, sits UNDER the handset
     3 .hero__phone  — cut-out body + screen, leaning on the right
                        diagonal inside .stage__tilt
     4 .hero__notes  — callouts, interactive furniture
   Bands 1, 3 and 4 hold identical .stage boxes, so they register.
   ═════════════════════════════════════════════════════════════ */

.hero{ position:relative; z-index:2; }

.hero__panel{
  --phone-w:clamp(180px, min(23vw, 37vh), 470px);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--ground-deep);
  min-height:100svh;
  display:flex; flex-direction:column;
}

/* ── stage ────────────────────────────────────────────────────── */
.stage{
  --stage-width:calc(var(--phone-w) / .25781);
  position:absolute;
  left:50%;
  top:var(--phone-cy, 45%);
  width:var(--stage-width);
  aspect-ratio:1152 / 1536;
  transform:translate(calc(-50% + var(--px,0px)), calc(-48.31% + var(--py,0px)));
  pointer-events:none;
}

.hero__scene{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:url(../img/hero-plate.webp);
  background-repeat:no-repeat;
  background-size:auto var(--scene-h, 168%);
  background-position:50% var(--scene-y, 54%);
  filter:brightness(.62) contrast(1.06) saturate(.9);
  transition:filter var(--dur-slow) var(--ease);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);
}
.is-live .hero__scene{ filter:brightness(1) contrast(1.03) saturate(1); }
.hero__copy { position:relative; z-index:4; }
.hero__phone{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.hero__ui   { position:relative; z-index:4; }
.hero__notes{ position:absolute; inset:0; z-index:4; pointer-events:none; }

.stage__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  transition:filter var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease);
}
.stage__phone{ filter:brightness(.56) contrast(1.06); }
.is-live .stage__phone{ filter:brightness(1.08) contrast(1.02); }

/* ── the lean ─────────────────────────────────────────────────── */
.stage__tilt{
  position:absolute; inset:0;
  transform-origin:50.56% 48.31%;          /* the handset's own centre */
  transform:perspective(1600px)
            rotateZ(var(--tilt-z))
            rotateY(var(--tilt-y))
            scale(var(--tilt-s, 1));
  transition:transform 1.2s var(--ease-out);
}
.is-live .stage__tilt{ --tilt-s:1.035; }

/* ── overhead key light ───────────────────────────────────────── */
.stage__cone{
  position:absolute; left:50%; top:-6%;
  width:62%; height:38%;
  transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(220,244,254,.34), rgba(220,244,254,0));
  clip-path:polygon(35% 0, 65% 0, 100% 100%, 0 100%);
  filter:blur(24px);
  opacity:.3;
  transition:opacity var(--dur-slow) var(--ease);
}
.is-live .stage__cone{ opacity:1; }

/* ── halo ─────────────────────────────────────────────────────── */
.stage__glow{
  position:absolute;
  left:37.674%; top:27.409%;
  width:25.781%; height:41.797%;
  border-radius:14%/6.5%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(220,244,254,.55), rgba(143,216,240,.16) 55%, transparent 72%);
  filter:blur(32px);
  transform:scale(1.5);
  opacity:.2;
  transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.is-live .stage__glow{ opacity:.9; transform:scale(1.95); }

/* ── ripples on the waterline ─────────────────────────────────── */
.stage__ripples{ position:absolute; left:0; right:0; top:69.3%; height:0; }
.stage__ripple{
  position:absolute; left:50%; top:0;
  width:19%; aspect-ratio:7/1;
  translate:-50% -50%;
  border:1px solid rgba(220,244,254,.32);
  border-radius:50%;
  opacity:0;
}
.is-live .stage__ripple{ animation:ripple 3.4s var(--ease-out) infinite; }
.stage__ripple:nth-child(2){ animation-delay:1.13s; }
.stage__ripple:nth-child(3){ animation-delay:2.26s; }
@keyframes ripple{
  0%   { scale:.4 .7;  opacity:0; }
  18%  { opacity:.4; }
  100% { scale:3.1 1.9; opacity:0; }
}

/* ── vignette: melts the frame into the black page ────────────── */
.hero__vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(138% 92% at 50% 46%, transparent 38%, rgba(3,3,4,.42) 76%, rgba(3,3,4,.92) 100%),
    linear-gradient(180deg, rgba(3,3,4,.86), transparent 18%, transparent 93%, var(--ground));
}


/* ── body ─────────────────────────────────────────────────────── */
.hero__copy, .hero__ui{ padding-inline:var(--gutter); }

/* Only the kicker and the headline are centred, so the headline lands on
   the panel's centre line and crosses the handset at its middle. The
   ledger hangs off the bottom of the same box: in flow it would push the
   type up off the handset, and as a grid row it doubled the panel's
   height. */
.hero__copy{
  position:relative;
  flex:1;
  display:flex; flex-direction:column; justify-content:space-between;
  padding-block:clamp(16px,2vw,30px) clamp(30px,4vw,64px);
  pointer-events:none;
}
.hero__copy > *{ pointer-events:auto; position:relative; }
/* the background type runs under this column, so fade it out beneath the
   copy rather than letting the two fight for the same pixels */
.hero__copy::before{
  content:''; position:absolute; inset:0 auto 0 0;
  width:min(62vw, 780px);
  background:linear-gradient(90deg,
    rgba(3,3,4,.94) 0%, rgba(3,3,4,.82) 34%, rgba(3,3,4,.45) 62%, transparent 100%);
  pointer-events:none;
}
.hero__lower{
  width:min(38ch, 46vw);
  display:grid; gap:clamp(14px,1.6vw,22px); justify-items:start;
}
.hero__cta{ margin-top:clamp(4px,.6vw,8px); }
.hero__note{ color:var(--ice-ghost); }
.hero__kicker{ max-width:min(640px, 46vw); margin-bottom:clamp(14px,1.6vw,24px); }

/* ── the headline, as background type ─────────────────────────
   Two stacked lines, each sized so it fills the measure exactly:
   ALWAYS is 3.8324em wide and ANSWERED 5.4046em, so 100/3.8324 and
   100/5.4046 container-width units make both spans edge to edge.
   Sizing this way needs no script and no ragged right.           */
.hero__type{
  position:absolute; inset:0; z-index:2;
  padding-inline:var(--gutter);
  /* the bottom padding lifts the centred block so the type's optical
     centre lands on the handset's, not 45px under it */
  padding-bottom:clamp(40px, 9vh, 96px);
  display:grid; align-content:center;
  container-type:inline-size;
  pointer-events:none;
}
.hero__title{
  font-family:var(--f-display); font-weight:200;
  text-transform:uppercase; letter-spacing:.005em;
  line-height:.79;
}
.hero__title span{
  display:block;
  background-image:linear-gradient(177deg,
    rgba(244,245,247,.40) 2%,
    rgba(226,240,248,.15) 46%,
    rgba(244,245,247,.045) 74%,
    transparent 96%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.hero__title span:first-child{ font-size:var(--hero-line-a); }
.hero__title span:last-child { font-size:var(--hero-line-b); text-align:right; }

.hero__sub{
  margin:clamp(18px,2.2vw,34px) 0 0;
  max-width:100%;
  font-size:var(--t-sub);
  font-weight:200; line-height:1.28;
  letter-spacing:-.005em;
  color:var(--ice);
}
.hero__sub em{
  display:block; font-style:normal;
  margin-top:.35em;
  font-size:.62em; font-weight:300; line-height:1.45;
  letter-spacing:0;
  color:var(--ice-faint);
}

/* a short ledger under the sub — stops the left column reading empty */
.hero__meta{
  margin-top:clamp(16px,1.8vw,26px);
  display:grid; gap:0;
  max-width:100%;
  border-top:1px solid var(--rule);
}
.hero__meta li{
  display:flex; align-items:baseline; gap:14px;
  padding:clamp(6px,.7vw,10px) 0;
  border-bottom:1px solid var(--rule);
  font-family:var(--f-mono); font-size:var(--t-micro); font-weight:300;
  letter-spacing:var(--track-mono); text-transform:uppercase;
  color:var(--ice-ghost);
  transition:color .4s var(--ease), padding-left .4s var(--ease-out);
}
.hero__meta li b{
  font-family:var(--f-display); font-weight:200;
  font-size:1.5rem; letter-spacing:0;
  color:var(--signal); min-width:2.6em;
  font-variant-numeric:tabular-nums;
}
.hero__meta li:hover{ color:var(--ice-soft); padding-left:8px; }


.hero__scroll{
  position:absolute; left:50%; bottom:16px; translate:-50% 0;
  display:grid; place-items:center;
  color:var(--ice-ghost);
}
.hero__scroll i{
  display:block; width:1px; height:42px;
  background:linear-gradient(180deg,transparent,var(--rule-lit));
  animation:drip 2.6s var(--ease) infinite;
}
@keyframes drip{ 0%,100%{ transform:scaleY(.3); transform-origin:top; } 50%{ transform:scaleY(1); } }

/* ── mobile ───────────────────────────────────────────────────── */
/* ── stacked layouts ──────────────────────────────────────────────
   On a phone the copy and the handset stop competing for the same
   space. The panel becomes three rows — bar, copy, handset — and the
   handset is sized from whatever height is left rather than from a
   percentage of the viewport. It therefore cannot overlap the text at
   any screen height, which percentages could never guarantee once the
   browser chrome starts moving.
   ═════════════════════════════════════════════════════════════ */
@media (max-width:820px){
  .hero__panel{
    display:grid;
    grid-template-rows:auto auto minmax(0,1fr);
    min-height:100svh;
  }

  .bar        { grid-row:1; padding:14px var(--gutter); gap:12px; }
  .hero__copy { grid-row:2; display:block; padding:clamp(10px,3vw,20px) var(--gutter) 0; }
  .hero__phone{ grid-row:3; position:relative; inset:auto; min-height:0; }

  /* the type layer spans the whole panel, behind everything */
  .hero__type{
    position:absolute; inset:0; z-index:1;
    align-content:start; padding-top:clamp(62px,17vw,104px);
    padding-bottom:0;
  }
  .hero__title span:last-child{ text-align:left; }

  /* Sized from the width, centred in its band. The grid above already
     guarantees the band never touches the copy, so this only has to look
     right — it no longer has to defend against overlap. */
  .hero__panel{ --phone-w:min(54vw, 31vh); }
  .stage{
    left:50%; top:50%;
    width:calc(var(--phone-w) / .25781);
    height:auto; aspect-ratio:1152 / 1536;
    transform:translate(-50%, -50%);
  }
  .hero__scene{
    background-size:auto var(--scene-h, 128%);
    background-position:50% var(--scene-y, 74%);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  }

  /* the type runs behind the copy here, so hold it further back rather
     than letting the two compete for the same few hundred pixels */
  .hero__copy::before{ display:none; }
  .hero__title span{
    background-image:linear-gradient(177deg,
      rgba(var(--ice-rgb),.19) 2%,
      rgba(var(--ice-rgb),.08) 48%,
      rgba(var(--ice-rgb),.025) 76%,
      transparent 96%);
  }
  .hero__lower{ width:auto; display:grid; gap:clamp(12px,3vw,18px); }
  .hero__meta{ display:none; }
  .hero__kicker{ max-width:none; margin-bottom:clamp(12px,3vw,18px); }
  .hero__sub{ max-width:32ch; }
  .hero__cta{ margin-top:2px; }
  .btn--lg .btn__in{ padding:15px 20px; letter-spacing:.1em; gap:12px; }
  .hero__note{ font-size:.6875rem; }

  /* The bar cannot hold links, a switch and a button at this width — and
     it does not need to: the real call to action is 200px below, twice
     the size. Keep the mark and the switch, drop the rest. */
  .bar__nav .nav,
  .bar .btn{ display:none; }
  .logo__word{ font-size:.78rem; letter-spacing:.16em; }
  .logo__mark{ width:17px; }
  .themer{ width:38px; height:38px; }

  .hero__notes{ display:none; }
  .hero__scroll{ display:none; }
}

@media (max-width:420px){
  .hero__type{ padding-top:clamp(54px,16vw,88px); }
  .hero__panel{ --phone-w:min(56vw, 29vh); }
}