/* ═══ THE HANDSET SCREEN ═════════════════════════════════════════
   A live DOM layer clipped to the screen rectangle measured inside
   Phone3.png. It replaces the generated screen content and carries
   the incoming → answered state change.
   ═════════════════════════════════════════════════════════════ */

.stage__screen{
  position:absolute;
  left:var(--screen-x); top:var(--screen-y);
  width:var(--screen-w); height:var(--screen-h);
  border-radius:10.5% / 4.6%;
  overflow:hidden;
  container-type:inline-size;
  background:linear-gradient(168deg,#0C1116,#04070A 62%);
  color:#fff;
}
/* idle veil: keeps the handset in shadow without letting the
   generated screen underneath bleed back through */
.stage__screen::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:rgba(4,7,10,.68);
  transition:opacity var(--dur-slow) var(--ease);
}
.is-live .stage__screen::after{ opacity:0; }

.scr{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  padding:5cqw 6cqw 6cqw;
  font-family:var(--f-mono);
  font-weight:300;
  letter-spacing:.04em;
}

/* status bar */
.scr__bar{
  display:flex; align-items:center; justify-content:space-between;
  font-size:4.4cqw; color:rgba(255,255,255,.62);
  margin-bottom:2cqw;
}
.scr__bar b{ font-weight:400; }
.scr__sig{ display:flex; align-items:flex-end; gap:.7cqw; height:4cqw; }
.scr__sig i{ width:1cqw; background:rgba(255,255,255,.62); border-radius:.4cqw; }
.scr__sig i:nth-child(1){ height:35%; }
.scr__sig i:nth-child(2){ height:58%; }
.scr__sig i:nth-child(3){ height:80%; }
.scr__sig i:nth-child(4){ height:100%; }

/* the two states share the same box */
.scr__view{
  position:absolute;
  left:6cqw; right:6cqw; top:15cqw; bottom:6cqw;
  display:flex; flex-direction:column;
  transition:opacity .45s var(--ease), transform .55s var(--ease-out), filter .45s var(--ease);
}
.scr__view--in{ align-items:center; justify-content:center; gap:3cqw; }
.scr__view--on{ opacity:0; transform:translateY(6cqw); pointer-events:none; }

.is-live .scr__view--in{ opacity:0; transform:translateY(-5cqw); filter:blur(2px); pointer-events:none; }
.is-live .scr__view--on{ opacity:1; transform:none; }

/* ── incoming ─────────────────────────────────────────────────── */
.scr__avatar{
  width:26cqw; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(60% 60% at 50% 35%, #1B242C, #0B1116);
  border:.5cqw solid rgba(255,255,255,.16);
  display:grid; place-items:center;
  position:relative;
}
.scr__avatar::before,
.scr__avatar::after{
  content:''; position:absolute; inset:-1cqw;
  border-radius:50%; border:.5cqw solid var(--signal);
  opacity:0;
}
.is-live .scr__avatar::before,
.is-live .scr__avatar::after{ animation:none; }
.scr__avatar::before{ animation:ring 2.4s var(--ease-out) infinite; }
.scr__avatar::after { animation:ring 2.4s var(--ease-out) .8s infinite; }
@keyframes ring{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(1.55); opacity:0; } }
.scr__avatar svg{ width:11cqw; color:rgba(255,255,255,.55); }

.scr__label{
  font-size:4.2cqw; letter-spacing:.19em; text-transform:uppercase;
  color:var(--signal);
  display:flex; align-items:center; gap:1.6cqw;
}
.scr__label i{
  width:1.6cqw; aspect-ratio:1; border-radius:50%;
  background:currentColor;
  animation:blink 1.15s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:.15; } }

.scr__num { font-size:6.2cqw; letter-spacing:.02em; color:#fff; }
.scr__meta{ font-size:3.8cqw; color:rgba(255,255,255,.42); letter-spacing:.1em; }

.scr__keys{ display:flex; gap:8cqw; margin-top:3cqw; }
.scr__key{
  width:14cqw; aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center;
}
.scr__key svg{ width:6.4cqw; }
.scr__key--no { background:#2A1417; color:#E4707C; transform:rotate(133deg); }
.scr__key--yes{
  background:var(--signal); color:#04070A;
  box-shadow:0 0 0 0 rgba(143,216,240,.55);
  animation:pickup 1.9s var(--ease-out) infinite;
}
@keyframes pickup{
  0%  { box-shadow:0 0 0 0 rgba(143,216,240,.5); }
  70% { box-shadow:0 0 0 5cqw rgba(143,216,240,0); }
  100%{ box-shadow:0 0 0 0 rgba(143,216,240,0); }
}

/* ── answered ─────────────────────────────────────────────────── */
.scr__badge{
  align-self:flex-start;
  display:flex; align-items:center; gap:1.6cqw;
  font-size:3.6cqw; letter-spacing:.16em; text-transform:uppercase;
  color:var(--signal);
  border:1px solid rgba(143,216,240,.34);
  border-radius:99px; padding:1.4cqw 3cqw;
}
.scr__badge i{ width:1.5cqw; aspect-ratio:1; border-radius:50%; background:currentColor; animation:blink 1.1s steps(1) infinite; }

.scr__wave{
  display:flex; align-items:center; justify-content:center; gap:1.15cqw;
  height:16cqw; margin:4cqw 0 2cqw;
}
.scr__wave i{
  width:1.5cqw; height:14%;
  background:linear-gradient(180deg,var(--signal-hot),var(--signal));
  border-radius:99px;
}
.is-live .scr__wave i{ animation:wave 1.05s var(--ease) infinite; }
.scr__wave i:nth-child(3n)  { animation-delay:.12s; }
.scr__wave i:nth-child(3n+1){ animation-delay:.31s; }
.scr__wave i:nth-child(4n)  { animation-delay:.47s; }
.scr__wave i:nth-child(5n)  { animation-delay:.66s; }
@keyframes wave{ 0%,100%{ height:14%; } 50%{ height:96%; } }

.scr__timer{
  text-align:center; font-size:4.4cqw; letter-spacing:.2em;
  color:rgba(255,255,255,.5);
  font-variant-numeric:tabular-nums;
}

.scr__log{
  margin-top:4cqw;
  display:flex; flex-direction:column; gap:2.2cqw;
  font-family:var(--f-body); letter-spacing:0;
}
.scr__log li{
  font-size:4cqw; line-height:1.32;
  color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.06);
  border-radius:3cqw 3cqw 3cqw .8cqw;
  padding:2.2cqw 3cqw;
  align-self:flex-start;
  max-width:88%;
  opacity:0; transform:translateY(2.5cqw);
}
.is-live .scr__log li{ animation:say .5s var(--ease-out) forwards; }
.is-live .scr__log li:nth-child(1){ animation-delay:.55s; }
.is-live .scr__log li:nth-child(2){ animation-delay:1.15s; }
.is-live .scr__log li:nth-child(3){ animation-delay:1.75s; }
.is-live .scr__log li:nth-child(4){ animation-delay:2.35s; }
.scr__me{
  align-self:flex-end !important;
  border-radius:3cqw 3cqw .8cqw 3cqw !important;
  background:rgba(143,216,240,.18) !important;
  color:var(--signal-hot) !important;
  text-align:right;
}
@keyframes say{ to{ opacity:1; transform:none; } }

.scr__chips{ display:flex; gap:1.8cqw; margin-top:auto; padding-top:3cqw; }
.scr__chip{
  font-size:3.4cqw; letter-spacing:.13em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.2); border-radius:99px;
  padding:1.3cqw 2.6cqw; color:rgba(255,255,255,.62);
  opacity:0;
}
.scr__chip--hot{ border-color:rgba(228,112,124,.5); color:#E4707C; }
.is-live .scr__chip{ animation:say .45s var(--ease-out) 2.9s forwards; }

.scr__booked{
  margin-top:2.4cqw;
  display:flex; align-items:center; justify-content:center; gap:1.8cqw;
  font-size:3.6cqw; letter-spacing:.15em; text-transform:uppercase;
  background:var(--signal); color:#04070A;
  border-radius:2.6cqw; padding:2.6cqw;
  opacity:0; transform:translateY(2.5cqw);
}
.is-live .scr__booked{ animation:say .5s var(--ease-out) 3.3s forwards; }
.scr__booked svg{ width:4cqw; }

/* ── callouts on the frame (the reference's leader-line labels) ── */
.hero__notes{ position:absolute; inset:0; z-index:4; pointer-events:none; }

.note{
  position:absolute;
  display:flex; align-items:center; gap:0;
  font-family:var(--f-mono); font-size:var(--t-micro); font-weight:300;
  letter-spacing:var(--track-mono); text-transform:uppercase;
  color:rgba(255,255,255,.8);
  white-space:nowrap;
}
.note__dot{
  width:5px; aspect-ratio:1; border-radius:50%;
  background:var(--signal); flex:none;
  box-shadow:0 0 0 4px rgba(143,216,240,.16);
}
.note__line{ height:1px; background:rgba(255,255,255,.36); }
.note__tag{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(8,12,16,.72);
  backdrop-filter:blur(6px);
  padding:5px 10px;
  display:flex; align-items:center; gap:8px;
}
.note__tag b{ font-weight:300; color:var(--signal); }

/* right-hand note, next to the handset */
.note--state{ left:63%; top:31%; }
.note--state .note__line{ width:clamp(24px,3.4vw,58px); }

/* left-hand note, mirrored */
/* both callouts live on the right: the left half belongs to the copy */
.note--job{
  left:63%; top:63%;
  opacity:0; transform:translateX(8px);
  transition:opacity .5s var(--ease-out) .9s, transform .5s var(--ease-out) .9s;
}
.note--job .note__line{ width:clamp(24px,3.4vw,58px); }
.is-live .note--job{ opacity:1; transform:none; }

@media (max-width:820px){ .hero__notes{ display:none; } }

/* ── the pointer target over the handset ──────────────────────── */
.stage__hit{
  position:absolute;
  left:33%; top:22%; width:34%; height:52%;
  pointer-events:auto; cursor:pointer;
  border-radius:12%/6%;
}
/* the ring only exists on fine pointers with motion allowed —
   hide the native cursor exactly there and nowhere else */
@media (hover:hover) and (pointer:fine){
  @media not (prefers-reduced-motion: reduce){
    .stage__hit{ cursor:none; }
  }
}