/* =====================================================================
   CENTERA v3 — HERO SCENE ("the one hero")
   One <section class="hero-scene">. Vector scene: one SVG <img> poster layer
   (the room, LCP element) + inline SVG layers + HTML cards. Depth = CSS 3D
   layers under a perspective camera. Choreography = native scroll-driven
   animations; hero.js scrubs the same keyframes (WAAPI) where they are missing.

   MODES
   static  default, prefers-reduced-motion, no-JS without scroll timelines:
           every .hs-a animation sits paused at its END -> the final frame.
   native  @supports (animation-timeline: view()): pure CSS, JS optional.
   scrub   html.hs-scrub (set by the head snippet / hero.js): JS maps scroll
           progress -> animation.currentTime (0..1000ms).

   Every keyframe % below is a position on the SAME story timeline (0-100%):
   01 quiet 0-10 · 02 ring 10-22 · 03 answer EN 22-38 · 04 switch ES 38-54 ·
   05 calendar 54-68 · 06 owner buzz 68-82 · 07 checked 82-90 · hold 90-100
   ===================================================================== */

.hero-scene {
  --hs-bg: #0D0D12;
  --hs-text: #F5F5F7;
  --hs-text-2: #B4B4B7;
  --hs-muted: #A1A1A8;
  --hs-accent: #785CFF;
  --hs-accent-fill: #6A4DF5;
  --hs-accent-soft: #A78BFA;
  --hs-surface: #16151F;
  --hs-surface-2: #201E2C;
  --hs-line: rgba(245, 245, 247, 0.1);
  --hs-ok: #34D399;
  --hs-top: 0px;        /* height of a fixed site nav, if any */
  --hs-length: 260vh;   /* scroll track; the story plays over (length - 1 screen). 460vh → 260vh 2026-09-26 (flow build, Fable ruling 2) */
  position: relative;
  background: var(--hs-bg);
  color: var(--hs-text);
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.hero-scene *, .hero-scene *::before, .hero-scene *::after { box-sizing: border-box; }

/* ---------- frame + layout ---------- */
.hs-sticky {
  position: relative;
  height: calc(100vh - var(--hs-top));
  height: calc(100svh - var(--hs-top));
  min-height: 540px;
  overflow: hidden;
  overflow: clip;
}
.hs-frame {
  height: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 16px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "head" "cap" "stage" "body";
  row-gap: 12px;
}
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) {
  .hs-sticky { min-height: 0; }
  .hs-frame {
    padding: clamp(20px, 4vh, 40px) clamp(20px, 3.5vw, 48px);
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    grid-template-rows: 1fr auto auto 1fr auto;
    grid-template-areas: ".    stage" "head stage" "body stage" ".    stage" ".    cap";
    column-gap: clamp(24px, 4vw, 64px);
    row-gap: 20px;
  }
}

/* ---------- copy (meaningful HTML, never animated in) ---------- */
.hs-head { grid-area: head; display: flex; flex-direction: column; gap: 10px; }
.hs-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--hs-accent-soft);
}
.hs-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--hs-accent); box-shadow: 0 0 0 4px rgba(120, 92, 255, 0.22); flex: none; }
.hs-title {
  margin: 0;
  font-size: clamp(1.75rem, 1.05rem + 3vw, 3rem);
  line-height: 1.05; font-weight: 800; letter-spacing: -0.03em;
  text-wrap: balance;
}
.hs-title span { display: block; }
.hs-title span + span { color: var(--hs-accent-soft); }
.hs-body { grid-area: body; display: flex; flex-direction: column; gap: 14px; }
.hs-sub { margin: 0; max-width: 40ch; font-size: clamp(15px, 12px + 0.6vw, 19px); line-height: 1.5; color: var(--hs-text-2); }
.hs-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; }
.hs-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  background: var(--hs-accent-fill); color: #fff; font: inherit; font-size: 16px; font-weight: 600;
  text-decoration: none; box-shadow: 0 10px 28px -10px rgba(120, 92, 255, 0.7);
  transition: background-color 160ms ease;
}
.hs-btn:hover { background: #5E3FE8; }
.hs-btn:focus-visible { outline: 2px solid var(--hs-accent-soft); outline-offset: 3px; }
.hs-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--hs-muted); }
.hs-hint svg { width: 14px; height: 14px; }
@media (max-width: 899px) and (orientation: portrait), (max-width: 639px) {
  .hs-sub { font-size: 15px; line-height: 1.45; }
}

/* ---------- captions ribbon (story beats, decorative: stage has the a11y label) ---------- */
.hs-caps { grid-area: cap; min-width: 0; }
.hs-caps-track { display: grid; }
.hs-cap {
  grid-area: 1 / 1; margin: 0;
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  font-size: clamp(13.5px, 11px + 0.4vw, 15.5px); line-height: 1.35; font-weight: 500;
  color: var(--hs-text-2); text-align: center; text-wrap: balance;
}
.hs-cap b { font-weight: 600; font-size: 0.8em; letter-spacing: 0.1em; color: var(--hs-accent-soft); font-variant-numeric: tabular-nums; }
.hs-cap--check { color: var(--hs-text); align-items: center; }
.hs-cap--check svg { width: 1.15em; height: 1.15em; flex: none; color: var(--hs-ok); }
.hs-progress { width: min(200px, 56%); height: 2px; margin: 9px auto 0; border-radius: 2px; background: rgba(245, 245, 247, 0.09); overflow: hidden; }
.hs-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--hs-accent), var(--hs-accent-soft)); transform-origin: 0 50%; }

/* ---------- stage + canvas (all scene units are cqw of the canvas) ---------- */
.hs-stage {
  grid-area: stage; position: relative; min-width: 0; min-height: 0;
  container: hs-stage / size;
  display: grid; place-items: center;
}
.hs-canvas {
  /* square on wide stages; on tall phone stages it grows taller (up to 1.5x) and
     --hs-dy = the extra height above the square "world" (resolved in children:
     cqh -> stage, cqw -> canvas) */
  --hs-dy: 0px;
  --hs-dy: max(0px, min(100cqh, 150cqw) - 100cqw);
  position: relative;
  width: 100%; max-width: 560px; aspect-ratio: 1;
  width: min(100cqw, 100cqh); height: min(100cqh, 150cqw); max-width: none;
  container: hs-canvas / inline-size;
  overflow: hidden; overflow: clip;
}
.hs-canvas::before { /* brand glow behind the diorama */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 1;
  background: radial-gradient(closest-side at 50% 58%, rgba(120, 92, 255, 0.3), rgba(120, 92, 255, 0.07) 62%, transparent);
  pointer-events: none;
}

/* world = the diorama under a moving camera */
.hs-world {
  position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 1;
  transform-style: preserve-3d; transform-origin: 50% 50%;
  transform: perspective(250cqw);
}
.hs-roombox { position: absolute; left: 16%; top: 24%; width: 68%; aspect-ratio: 630 / 587; transform-style: preserve-3d; }
.hs-layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.hs-sky { transform: translateZ(-8cqw); clip-path: polygon(54.03% 37.22%, 54.03% 11.1%, 79.94% 25%, 79.94% 51.13%); }
.hs-sky svg { display: block; width: 100%; height: 100%; }
.hs-room { transform: translateZ(0); }
.hs-fx { transform: translateZ(0.3cqw); }
.hs-counter { transform: translateZ(6cqw); }
.hs-counter .hs-rip, .hs-counter .hs-vib, .hs-sky .hs-star { transform-box: fill-box; transform-origin: center; }
.hs-fx .hs-k-min { transform-origin: 0 0; rotate: 12deg; }

/* HUD = floating UI cards (not moved by the camera) */
.hs-hud { position: absolute; inset: 0; perspective: 250cqw; pointer-events: none; font-size: 11px; font-size: clamp(10.5px, 3.15cqw, 14.5px); }

/* incoming-call pill (anchored above the phone while the camera is pushed in) */
.hs-pill-pos { position: absolute; left: 50%; top: calc(43cqw + var(--hs-dy) * 0.5); translate: -50% -50%; }
.hs-pill {
  display: inline-flex; align-items: center; gap: 0.55em; white-space: nowrap;
  padding: 0.55em 1em 0.55em 0.7em; border-radius: 999px;
  background: rgba(22, 21, 31, 0.94); border: 1px solid rgba(167, 139, 250, 0.4);
  font-weight: 600; box-shadow: 0 12px 30px -12px rgba(120, 92, 255, 0.9);
}
.hs-pill svg { width: 1.3em; height: 1.3em; color: var(--hs-accent-soft); }

/* call card */
.hs-call {
  position: absolute; left: 0; top: 0;
  width: 54%; width: clamp(178px, 54cqw, 300px);
  padding: 0.85em; border-radius: 1.15em;
  background: var(--hs-surface); border: 1px solid var(--hs-line);
  box-shadow: 0 1.6em 3em -1.2em rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(120, 92, 255, 0.07);
  transform-origin: 90% 100%;
}
.hs-call-head { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.75em; font-size: 0.9em; color: var(--hs-muted); }
.hs-call-head b { color: var(--hs-text); font-weight: 600; }
.hs-av { width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; flex: none; background: linear-gradient(135deg, #8A72FF, #5E3FE8); }
.hs-wave { display: inline-flex; align-items: center; gap: 2px; height: 0.9em; }
.hs-wave i { width: 2px; height: 100%; border-radius: 2px; background: var(--hs-accent-soft); transform-origin: 50% 50%; }
.hs-call-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.hs-call-right { margin-left: auto; display: flex; align-items: center; gap: 0.35em; }
.hs-chips { display: grid; overflow: hidden; border-radius: 999px; }
.hs-chip { grid-area: 1 / 1; padding: 0.2em 0.55em; border-radius: 999px; font-size: 0.85em; font-weight: 700; letter-spacing: 0.06em; background: rgba(120, 92, 255, 0.2); color: #D9CCFF; }
.hs-chip--es { background: var(--hs-accent-fill); color: #fff; }
.hs-checked { width: 1.35em; height: 1.35em; color: var(--hs-ok); }
.hs-msgs { display: flex; flex-direction: column; gap: 0.45em; }
.hs-turn { display: grid; }
.hs-turn > * { grid-area: 1 / 1; }
.hs-msg { margin: 0; max-width: 88%; padding: 0.55em 0.8em; border-radius: 1em; line-height: 1.32; }
.hs-msg--desk { justify-self: start; background: rgba(120, 92, 255, 0.2); border-bottom-left-radius: 0.3em; }
.hs-msg--caller { justify-self: end; background: var(--hs-surface-2); border-bottom-right-radius: 0.3em; color: #E6E4EE; }
.hs-typing { align-self: start; justify-self: start; display: inline-flex; gap: 0.25em; padding: 0.7em 0.8em; border-radius: 1em; border-bottom-left-radius: 0.3em; background: rgba(120, 92, 255, 0.2); }
.hs-typing i { width: 0.4em; height: 0.4em; border-radius: 50%; background: var(--hs-accent-soft); }

/* calendar card */
.hs-cal {
  position: absolute; left: 0; bottom: 1.5cqw;
  width: 42%; width: clamp(146px, 42cqw, 236px);
  padding: 0.8em 0.85em 0.85em; border-radius: 1.1em;
  background: var(--hs-surface); border: 1px solid var(--hs-line);
  box-shadow: 0 1.6em 3em -1.2em rgba(0, 0, 0, 0.75);
  transform-origin: 30% 0;
}
.hs-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; margin-bottom: 0.6em; font-size: 0.9em; }
.hs-cal-head b { font-weight: 600; }
.hs-cal-badge { padding: 0.15em 0.5em; border-radius: 999px; background: rgba(120, 92, 255, 0.22); color: #D9CCFF; font-weight: 600; font-size: 0.9em; white-space: nowrap; }
.hs-cal-grid { display: grid; grid-template-columns: 1.5em repeat(5, minmax(0, 1fr)); gap: 0.22em; font-size: 0.78em; color: var(--hs-muted); text-align: center; }
.hs-cal-grid > span { line-height: 1.5; }
.hs-cal-grid > span.hs-t { text-align: left; font-variant-numeric: tabular-nums; }
.hs-cal-grid i { display: block; height: 1.55em; border-radius: 0.35em; background: rgba(245, 245, 247, 0.05); position: relative; }
.hs-cal-grid i.b { background: rgba(245, 245, 247, 0.16); }
.hs-cal-grid i.n { background: transparent; box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.35); }
.hs-slot, .hs-slot-ring { position: absolute; inset: 0; border-radius: inherit; }
.hs-slot { background: linear-gradient(135deg, #8A72FF, #6A4DF5); box-shadow: 0 0 0.9em rgba(120, 92, 255, 0.8); }
.hs-slot-ring { box-shadow: 0 0 0 2px var(--hs-accent-soft); }
.hs-cal-call { display: flex; align-items: center; gap: 0.45em; margin-top: 0.65em; font-size: 0.88em; }
.hs-cal-call::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--hs-accent); box-shadow: 0 0 0.6em var(--hs-accent); flex: none; }
.hs-cal-call b { font-weight: 600; }
.hs-cal-call span { color: var(--hs-muted); }

/* owner's phone + notification */
.hs-owner { position: absolute; right: 4cqw; top: calc(24cqw + var(--hs-dy)); width: 24%; width: clamp(80px, 24cqw, 146px); }
.hs-owner-body {
  position: relative; aspect-ratio: 9 / 19; border-radius: 16%/7.6%; padding: 5%;
  background: #0B0A10; border: 1px solid #34304A;
  box-shadow: -1.5em 2em 3em -1em rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  transform: perspective(60em) rotateY(-16deg) rotateX(7deg) rotateZ(3deg);
}
.hs-owner-screen {
  position: relative; height: 100%; border-radius: 12%/5.5%; overflow: hidden;
  background: radial-gradient(120% 70% at 30% 0%, #5E3FE8 0%, #2A1F5C 45%, #120F22 100%);
  display: flex; flex-direction: column; align-items: center;
}
.hs-owner-screen::before { content: ""; width: 30%; height: 3.2%; margin-top: 5%; border-radius: 99px; background: #0B0A10; }
.hs-owner-time { margin-top: 12%; font-size: 1.9em; font-weight: 300; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hs-owner-bar { width: 86%; height: 11%; margin-top: 10%; border-radius: 0.9em; background: rgba(245, 245, 247, 0.16); }
.hs-owner-off { position: absolute; inset: 0; background: #07060B; }
.hs-buzz { position: absolute; inset: 0; }
.hs-buzz i { position: absolute; top: 12%; width: 30%; height: 20%; border: 2.5px solid var(--hs-accent-soft); border-radius: 50%; clip-path: inset(0 50% 0 0); filter: drop-shadow(0 0 4px rgba(120, 92, 255, 0.9)); }
.hs-buzz i:first-child { left: -30%; }
.hs-buzz i:last-child { right: -30%; clip-path: inset(0 0 0 50%); }
.hs-notif-pos { position: absolute; right: 1cqw; top: calc(47cqw + var(--hs-dy)); width: 50%; width: clamp(172px, 50cqw, 280px); }
@container hs-canvas (max-width: 380px) { .hs-notif-sub { display: none; } }
@container hs-canvas (min-width: 520px) {
  .hs-owner { top: calc(30cqw + var(--hs-dy)); }
  .hs-notif-pos { top: calc(56cqw + var(--hs-dy)); }
}
.hs-notif {
  display: flex; gap: 0.6em; align-items: flex-start;
  padding: 0.7em 0.8em; border-radius: 1.05em;
  background: rgba(38, 35, 56, 0.97); border: 1px solid rgba(245, 245, 247, 0.12);
  box-shadow: 0 1.4em 2.6em -1em rgba(0, 0, 0, 0.8), 0 0 2.2em -0.6em rgba(120, 92, 255, 0.55);
  transform-origin: 80% 0;
}
.hs-notif-icon { width: 2em; height: 2em; flex: none; border-radius: 0.55em; display: grid; place-items: center; background: linear-gradient(135deg, #8A72FF, #5E3FE8); font-weight: 800; }
.hs-notif-txt { min-width: 0; line-height: 1.3; }
.hs-notif-app { display: flex; justify-content: space-between; gap: 0.5em; font-size: 0.8em; color: var(--hs-muted); }
.hs-notif-title { display: block; font-weight: 600; }
.hs-notif-sub { display: block; font-size: 0.86em; color: var(--hs-text-2); }

/* ---------- shared animation plumbing ---------- */
.hero-scene .hs-a {
  animation-duration: 1000ms;
  animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-delay: -1000ms;          /* static mode: parked on the final frame */
  animation-play-state: paused;
}
.hs-world     { animation-name: hs-k-cam; }
.hs-k-night   { animation-name: hs-k-night; }
.hs-k-min     { animation-name: hs-k-min; }
.hs-k-idle    { animation-name: hs-k-idle; }
.hs-k-ring    { animation-name: hs-k-ring; }
.hs-k-live    { animation-name: hs-k-live; }
.hs-k-glow    { animation-name: hs-k-glow; }
.hs-k-ripples { animation-name: hs-k-ripples; }
.hs-pill      { animation-name: hs-k-pill; }
.hs-call      { animation-name: hs-k-call; }
.hs-k-typing1 { animation-name: hs-k-typing1; }
.hs-k-b1      { animation-name: hs-k-b1; }
.hs-k-b2      { animation-name: hs-k-b2; }
.hs-k-typing3 { animation-name: hs-k-typing3; }
.hs-k-b3      { animation-name: hs-k-b3; }
.hs-chip--en  { animation-name: hs-k-chip-en; }
.hs-chip--es  { animation-name: hs-k-chip-es; }
.hs-checked   { animation-name: hs-k-checked; }
.hs-cal       { animation-name: hs-k-cal; }
.hs-slot      { animation-name: hs-k-slot; }
.hs-slot-ring { animation-name: hs-k-slot-ring; }
.hs-cal-call  { animation-name: hs-k-cal-call; }
.hs-cal-badge { animation-name: hs-k-cal-call; }
.hs-owner     { animation-name: hs-k-owner; }
.hs-k-jitter  { animation-name: hs-k-jitter; }
.hs-owner-off { animation-name: hs-k-owner-off; }
.hs-k-buzz    { animation-name: hs-k-buzz; }
.hs-notif     { animation-name: hs-k-notif; }
.hs-k-c1 { animation-name: hs-k-c1; }
.hs-k-c2 { animation-name: hs-k-c2; }
.hs-k-c3 { animation-name: hs-k-c3; }
.hs-k-c4 { animation-name: hs-k-c4; }
.hs-k-c5 { animation-name: hs-k-c5; }
.hs-k-c6 { animation-name: hs-k-c6; }
.hs-k-c7 { animation-name: hs-k-c7; }
.hs-progress  { animation-name: hs-k-progress-box; }
.hs-progress i { animation-name: hs-k-progress; }
.hs-hint      { animation-name: hs-k-hint; }

/* native: scroll-driven, no JS */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero-scene { height: var(--hs-length); view-timeline: --hs-track block; view-timeline-inset: var(--hs-top) 0px; }
    .hero-scene .hs-sticky { position: sticky; top: var(--hs-top); }
    .hero-scene .hs-a {
      animation-timeline: --hs-track;
      animation-range: contain 0% contain 100%;
      animation-delay: 0s;
      animation-duration: auto;
      animation-play-state: running;
    }
  }
}
/* scrub: JS drives currentTime (0..1000) */
html.hs-scrub .hero-scene { height: var(--hs-length); }
html.hs-scrub .hero-scene .hs-sticky { position: sticky; top: var(--hs-top); }
html.hs-scrub .hero-scene .hs-a {
  animation-timeline: auto;
  animation-range: normal;
  animation-duration: 1000ms;
  animation-delay: 0s;
  animation-play-state: paused;
}

/* ---------- ambient loops (time-based, only while the hero is on screen) ---------- */
.hs-loop { animation-duration: 1.6s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.hs-rip { animation-name: hsl-rip; animation-duration: 1.65s; animation-timing-function: cubic-bezier(0.2, 0.6, 0.3, 1); }
.hs-vib { animation-name: hsl-vib; animation-duration: 1.2s; animation-timing-function: linear; }
.hs-neon { animation-name: hsl-neon; animation-duration: 6s; }
.hs-star { animation-name: hsl-star; animation-duration: 3.2s; }
.hs-wave i { animation: hsl-wave 0.9s ease-in-out infinite alternate; }
.hs-wave i:nth-child(2) { animation-delay: -0.3s; }
.hs-wave i:nth-child(3) { animation-delay: -0.6s; }
.hs-wave i:nth-child(4) { animation-delay: -0.15s; }
.hs-typing i { animation: hsl-dot 1s ease-in-out infinite; }
.hs-typing i:nth-child(2) { animation-delay: 0.15s; }
.hs-typing i:nth-child(3) { animation-delay: 0.3s; }
.hs-buzz i { animation: hsl-buzz 0.7s ease-out infinite; }
.hs-hint svg { animation: hsl-bob 1.4s ease-in-out infinite; }
.hero-scene.hs-off .hs-loop, .hero-scene.hs-off .hs-wave i, .hero-scene.hs-off .hs-typing i,
.hero-scene.hs-off .hs-buzz i, .hero-scene.hs-off .hs-hint svg { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hero-scene .hs-loop, .hero-scene .hs-wave i, .hero-scene .hs-typing i,
  .hero-scene .hs-buzz i, .hero-scene .hs-hint svg { animation: none; }
}

@keyframes hsl-rip { 0% { transform: scale(0.25); opacity: 0.95; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes hsl-vib {
  0%, 44%, 100% { translate: 0 0; }
  4% { translate: -1.4px 0.5px; } 8% { translate: 1.4px -0.5px; } 12% { translate: -1.4px 0.5px; }
  16% { translate: 1.4px -0.5px; } 20% { translate: -1.4px 0.5px; } 24% { translate: 1.4px -0.5px; }
  28% { translate: -1.2px 0.4px; } 32% { translate: 1.2px -0.4px; } 36% { translate: -1px 0.3px; } 40% { translate: 1px -0.3px; }
}
@keyframes hsl-neon { 0%, 46%, 54%, 100% { opacity: 1; } 49% { opacity: 0.45; } 51% { opacity: 0.9; } 52% { opacity: 0.5; } }
@keyframes hsl-star { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes hsl-wave { 0% { transform: scaleY(0.3); } 100% { transform: scaleY(1); } }
@keyframes hsl-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-0.25em); opacity: 1; } }
@keyframes hsl-buzz { 0% { transform: scale(0.7); opacity: 0.9; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes hsl-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }

/* ---------- the story timeline ---------- */
/* camera: wide establishing -> push in on the ringing phone -> pull back as the story widens */
@keyframes hs-k-cam {
  0%   { transform: perspective(250cqw) translate3d(0, calc(-7.4cqw - var(--hs-dy) * 0.5), 0) rotateX(7deg) rotateY(-8deg) scale(1.3); }
  8%   { transform: perspective(250cqw) translate3d(0.6cqw, calc(-8.4cqw - var(--hs-dy) * 0.5), 0) rotateX(6deg) rotateY(-5deg) scale(1.34); }
  17%, 22% { transform: perspective(250cqw) translate3d(3.2cqw, calc(-15.2cqw - var(--hs-dy) * 0.5), 0) rotateX(4deg) rotateY(0deg) scale(1.5); }
  32%  { transform: perspective(250cqw) translate3d(8.6cqw, calc(1.2cqw - var(--hs-dy) * 0.12), 0) rotateX(3deg) rotateY(5deg) scale(1.22); }
  46%  { transform: perspective(250cqw) translate3d(7.4cqw, calc(1.1cqw - var(--hs-dy) * 0.05), 0) rotateX(2deg) rotateY(3deg) scale(1.16); }
  60%  { transform: perspective(250cqw) translate3d(4.3cqw, 0.3cqw, 0) rotateX(1deg) rotateY(-2deg) scale(1.08); }
  76%  { transform: perspective(250cqw) translate3d(0.4cqw, 0, 0) rotateX(1deg) rotateY(-4deg) scale(1.02); }
  90%, 100% { transform: perspective(250cqw) translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) scale(1); }
}
@keyframes hs-k-night { 0% { opacity: 0; } 90%, 100% { opacity: 0.78; } }
@keyframes hs-k-min { 0% { rotate: -12deg; } 90%, 100% { rotate: 12deg; } }
/* 02 ring */
@keyframes hs-k-idle { 0%, 9.8% { opacity: 1; } 10.2%, 100% { opacity: 0; } }
@keyframes hs-k-ring { 0%, 9.8% { opacity: 0; } 10.2%, 23.4% { opacity: 1; } 23.8%, 100% { opacity: 0; } }
@keyframes hs-k-live { 0%, 23.4% { opacity: 0; } 23.8%, 100% { opacity: 1; } }
@keyframes hs-k-glow { 0%, 9.8% { opacity: 0; } 11%, 22% { opacity: 1; } 27%, 100% { opacity: 0.4; } }
@keyframes hs-k-ripples { 0%, 10% { opacity: 0; } 11.5%, 21.5% { opacity: 1; } 23.5%, 100% { opacity: 0; } }
@keyframes hs-k-pill {
  0%, 10.5% { opacity: 0; transform: translateY(1.4cqw) scale(0.9); }
  12.5%, 21% { opacity: 1; transform: none; }
  23%, 100% { opacity: 0; transform: translateY(-1.6cqw) scale(0.94); }
}
/* 03 answer (EN) */
@keyframes hs-k-call {
  0%, 22% { opacity: 0; transform: translate3d(8cqw, 10cqw, 0) scale(0.55) rotateX(12deg); }
  27.5%, 100% { opacity: 1; transform: none; }
}
@keyframes hs-k-typing1 { 0%, 25% { opacity: 0; } 26%, 28% { opacity: 1; } 29%, 100% { opacity: 0; } }
@keyframes hs-k-b1 { 0%, 28.5% { opacity: 0; transform: translateY(0.6em) scale(0.96); } 31%, 100% { opacity: 1; transform: none; } }
@keyframes hs-k-chip-en { 0%, 42.5% { opacity: 1; transform: none; } 44.5%, 100% { opacity: 0; transform: translateY(-110%); } }
/* 04 caller switches to Spanish, desk follows */
@keyframes hs-k-b2 { 0%, 38.5% { opacity: 0; transform: translateY(0.6em) scale(0.96); } 41.5%, 100% { opacity: 1; transform: none; } }
@keyframes hs-k-chip-es { 0%, 43% { opacity: 0; transform: translateY(110%); } 45%, 100% { opacity: 1; transform: none; } }
@keyframes hs-k-typing3 { 0%, 45% { opacity: 0; } 46%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes hs-k-b3 { 0%, 48.5% { opacity: 0; transform: translateY(0.6em) scale(0.96); } 51%, 100% { opacity: 1; transform: none; } }
/* 05 booking lands on the calendar */
@keyframes hs-k-cal {
  0%, 54% { opacity: 0; transform: translate3d(-4cqw, 6cqw, 0) rotateX(-18deg) scale(0.9); }
  59%, 100% { opacity: 1; transform: none; }
}
@keyframes hs-k-slot {
  0%, 60% { opacity: 0; transform: translateY(-3.2em) scale(1.6); }
  63% { opacity: 1; transform: translateY(0) scale(0.9); }
  65%, 100% { opacity: 1; transform: none; }
}
@keyframes hs-k-slot-ring { 0%, 62.5% { opacity: 0; transform: scale(1); } 63.5% { opacity: 1; transform: scale(1); } 69%, 100% { opacity: 0; transform: scale(2.4, 3); } }
@keyframes hs-k-cal-call { 0%, 63% { opacity: 0; transform: translateY(0.4em); } 66%, 100% { opacity: 1; transform: none; } }
/* 06 owner's phone buzzes */
@keyframes hs-k-owner {
  0%, 68% { opacity: 0; transform: translate3d(6cqw, 34cqw, 0) rotate(8deg); }
  73.5%, 100% { opacity: 1; transform: none; }
}
@keyframes hs-k-owner-off { 0%, 74% { opacity: 1; } 75.2%, 100% { opacity: 0; } }
@keyframes hs-k-jitter {
  0%, 74.8% { translate: 0 0; }
  75.4% { translate: -0.9cqw 0; } 76% { translate: 0.9cqw 0; } 76.6% { translate: -0.8cqw 0; }
  77.2% { translate: 0.8cqw 0; } 77.8% { translate: -0.5cqw 0; } 78.4% { translate: 0.4cqw 0; }
  79%, 100% { translate: 0 0; }
}
@keyframes hs-k-buzz { 0%, 74.8% { opacity: 0; } 75.6%, 81.5% { opacity: 1; } 83%, 100% { opacity: 0; } }
@keyframes hs-k-notif {
  0%, 75% { opacity: 0; transform: translate3d(2cqw, -3cqw, 0) scale(0.7); }
  78%, 100% { opacity: 1; transform: none; }
}
/* 07 a person checked the call */
@keyframes hs-k-checked { 0%, 83% { opacity: 0; transform: scale(0.4); } 86%, 100% { opacity: 1; transform: none; } }
/* captions */
@keyframes hs-k-c1 { 0%, 8.5% { opacity: 1; transform: none; } 10%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes hs-k-c2 { 0%, 10% { opacity: 0; transform: translateY(6px); } 11.5%, 20.5% { opacity: 1; transform: none; } 22%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes hs-k-c3 { 0%, 22% { opacity: 0; transform: translateY(6px); } 23.5%, 36.5% { opacity: 1; transform: none; } 38%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes hs-k-c4 { 0%, 38% { opacity: 0; transform: translateY(6px); } 39.5%, 52.5% { opacity: 1; transform: none; } 54%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes hs-k-c5 { 0%, 54% { opacity: 0; transform: translateY(6px); } 55.5%, 66.5% { opacity: 1; transform: none; } 68%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes hs-k-c6 { 0%, 68% { opacity: 0; transform: translateY(6px); } 69.5%, 80.5% { opacity: 1; transform: none; } 82%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes hs-k-c7 { 0%, 82.5% { opacity: 0; transform: translateY(6px); } 85%, 100% { opacity: 1; transform: none; } }
@keyframes hs-k-progress { 0% { transform: scaleX(0.02); } 88%, 100% { transform: scaleX(1); } }
@keyframes hs-k-progress-box { 0%, 88% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes hs-k-hint { 0% { opacity: 1; } 4%, 100% { opacity: 0; } }