/* ═══════════════════════════════════════════════════════════════
   VITARK.AI — story player (/story/vyakul, /story/kumari, /story/tajurba)
   Four full-screen beats, played like stories. Source:
   vitark-design-2026-10-18/stories/doc-story-*.html
   ═══════════════════════════════════════════════════════════════ */
html, body { height: 100%; overflow: hidden; }
html { scrollbar-width: none; }
::-webkit-scrollbar { width: 0; height: 0; }
body.story {
  min-height: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

#stage { position: fixed; inset: 0; overflow: hidden; }
.beat { position: absolute; inset: 0; visibility: hidden; }
html:not(.js) .beat:last-child { visibility: visible; }
.cam { position: absolute; inset: 0; transform-origin: 50% 60%; }
.fig {
  position: absolute;
  bottom: 0;
  height: 86vh;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: 50% 100%;
  z-index: 3;
}
.mega {
  position: absolute;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.86;
  white-space: nowrap;
}
.mega .c { display: inline-block; will-change: transform; }
.say {
  position: absolute;
  z-index: 4;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.92;
  color: var(--color-navy);
  text-wrap: initial;
}
.say .w { display: inline-block; }

/* Top bar: progress, who, the other two faces, home */
.top { position: fixed; left: 0; right: 0; top: 0; z-index: 20; padding: 10px 14px 0; pointer-events: none; }
.bars { display: flex; gap: 5px; }
.bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(44, 62, 80, 0.18); overflow: hidden; }
.bars b { display: block; height: 100%; width: 0; background: var(--color-navy); }
.who { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.who__face { flex: none; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--color-paper), 0 0 0 3.5px var(--color-gold); }
.who__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 13px; }
.who__tag { flex: none; font-size: 12px; color: var(--color-muted); }
@media (max-width: 30em) { .who__tag { display: none; } .who__others { margin-left: 4px; } }
.who__others { flex: none; display: flex; gap: 6px; margin-left: 14px; pointer-events: auto; }
.who__others a { display: block; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; opacity: 0.55; transition: opacity 200ms; }
.who__others a:hover, .who__others a:focus-visible { opacity: 1; }
.who__others img { width: 30px; height: 30px; }
.who__home { flex: none; margin-left: auto; display: flex; align-items: center; min-height: 44px; pointer-events: auto; }
.who__home img { flex: none; height: 22px; width: auto; }
.who__close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; pointer-events: auto; }
.who__close img { width: 24px; height: 24px; }

/* Beat 1: the problem */
#b1 .mega { font-size: min(35.2vw, 27.2vh); color: var(--color-gold); left: 50%; top: 6vh; transform: translateX(-50%); }
#b1 .fig { left: 50%; transform: translateX(-50%); }
#b1 .say { font-size: min(13.6vw, 10.4vh); right: 5vw; bottom: 8vh; text-align: right; }

/* Beat 2: the noise */
.chat {
  position: absolute;
  z-index: 2;
  background: var(--color-white);
  border: 1px solid var(--color-rule);
  border-radius: 22px 22px 22px 6px;
  padding: 0.6em 0.9em;
  font: 500 clamp(1.1rem, 1rem + 1vw, 2rem) / 1.4 var(--font-sans);
  box-shadow: 0 18px 40px rgba(44, 62, 80, 0.12);
  white-space: nowrap;
}
.chat b { display: block; font-size: 0.62em; font-weight: 700; color: var(--color-gold-ink); }
#b2 .fig { right: 3vw; }
#b2 .say { font-size: min(9.6vw, 11.2vh); left: 5vw; bottom: 7vh; }

/* Beat 3: one cited answer */
#b3 .screen {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92vw, 1180px);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(26, 31, 43, 0.3);
  border: 1px solid var(--color-rule);
  background: var(--color-white);
  z-index: 2;
}
#b3 .screen video { display: block; width: 100%; }
#b3 .fig { right: 2vw; height: 52vh; }
#b3 .say { font-size: min(12vw, 9.6vh); left: 5vw; top: 12vh; background: var(--color-paper); padding: 0.1em 0.25em 0.15em; border-radius: 6px; }

/* Beat 4: the price */
#b4 .fig { left: 4vw; }
#b4 .price { position: absolute; right: 5vw; top: 16vh; z-index: 4; text-align: right; }
#b4 .n { font-family: var(--font-display); font-weight: 800; font-size: min(24vw, 24vh); line-height: 0.85; letter-spacing: -0.04em; color: var(--color-navy); font-variant-numeric: tabular-nums; }
#b4 .old { position: relative; display: inline-block; margin-top: 2vh; font-family: var(--font-display); font-weight: 600; font-size: min(10.4vw, 8.8vh); color: var(--color-muted); }
#b4 .old i { position: absolute; left: -4%; top: 52%; height: 0.09em; width: 108%; background: var(--color-gold-ink); transform: rotate(-4deg); }
.js #b4 .old i { width: 0; }
#b4 .fict { margin-top: 18px; font: 500 1.05rem / 1.35 var(--font-sans); color: var(--color-muted); }
.cta { position: absolute; right: 5vw; bottom: 9vh; z-index: 6; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; pointer-events: auto; }
.cta .sbtn {
  font: 700 1.15rem / 1.2 var(--font-sans);
  padding: 18px 28px;
  border-radius: 10px;
  border: 2px solid var(--color-navy);
  color: var(--color-navy);
  background: var(--color-white);
  text-decoration: none;
}
.cta .sbtn--fill { background: var(--color-navy); color: var(--color-gold); }
.cta .sbtn:hover { opacity: 0.9; }

@media (max-width: 47.5em) {
  #b1 .mega { font-size: 17.6vw; top: 13vh; }
  #b1 .fig { height: 54vh; }
  #b1 .say { font-size: 10.4vw; top: 26vh; bottom: auto; left: 5vw; right: auto; text-align: left; }
  .who__tag { display: none; }
  #b2 .fig { height: 44vh; right: var(--b2-fig-right, -2vw); }
  #b2 .say { bottom: 5vh; font-size: 8.8vw; }
  .chat { font-size: 0.8rem; }
  #b3 .screen { top: 46%; } /* sit under the headline, not mid-screen */
  #b3 .fig { height: 30vh; }
  /* Stand the figure on the CTA block (three buttons, ~130px) instead of behind it. */
  #b4 .fig { height: 38vh; left: -4vw; bottom: calc(5vh + 140px); }
  #b4 .price { top: 15vh; }
  .cta { left: 5vw; right: 5vw; bottom: 5vh; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .cta .sbtn { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 0.784rem; padding: 14px 8px; }
  .cta .sbtn--fill { grid-column: 1 / -1; font-size: 0.84rem; padding: 16px; }
}