/* The v31 security scene (Shopify, the vault, your agent), copied from v31's p-tools.css, plus the
   two optional pieces the variants add: the approval card (.vs-ask) and the X-ray gate (.vs-gate). */
.vt { height: calc(var(--beats, 5) * 96vh); background: var(--night); }
.vt .ch__k { font: 500 12px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
body.is-night-page, html:has(body.is-night-page) { background: var(--night); }
.vt-end { height: 40vh; background: var(--night); }
.vt-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-rows: auto auto minmax(0, 1fr); justify-items: center; gap: 2vh; padding: 92px var(--gutter) 30px; max-width: 1400px; margin: 0 auto; color: var(--night-text); text-align: center; }
.vt-head .ch__k { color: var(--gold); }
.vt-h { margin: 6px 0 0; font: 600 clamp(18px, 1.5vw, 24px)/1.2 var(--sans); letter-spacing: -0.02em; color: #a19e95; }
.vt-say { margin: 0; min-height: 2.3em; max-width: 22ch; font: 600 clamp(30px, 3.6vw, 58px)/1.08 var(--sans); letter-spacing: -0.04em; color: #f1f0eb; text-wrap: balance; }
.vt-stage { position: relative; width: 100%; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }
.vs-line { position: absolute; left: 16%; right: 16%; top: 42%; border-top: 2px dashed rgba(255,255,255,0.1); }
.vs-actor { position: relative; margin: 0; display: grid; justify-items: center; gap: 14px; }
.vs-actor figcaption { display: grid; gap: 3px; font-size: 17px; font-weight: 600; color: #f1f0eb; }
.vs-actor small { font-size: 11px; font-weight: 400; color: #77736a; }
.vs-app, .vs-vault, .vs-agent { transform-origin: 50% 90%; }
.vs-app { width: clamp(110px, 12vw, 170px); aspect-ratio: 1; border-radius: 30%; display: grid; place-items: center; background: var(--b); box-shadow: 0 40px 60px -30px rgba(0,0,0,0.9); }
.vs-app svg { width: 50%; height: 50%; fill: #fff; }
.vs-agent { width: clamp(130px, 14vw, 200px); aspect-ratio: 1; }
.vs-agent .agent-persona { width: 100%; height: 100%; filter: drop-shadow(0 30px 30px rgba(0,0,0,0.6)); }

/* The vault: a big safe with a dial; the key shows in its slot once it is locked in. */
.vs-vault { position: relative; width: clamp(150px, 16vw, 230px); aspect-ratio: 1; border-radius: 28%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #2c2923, #181713); box-shadow: inset 0 0 0 3px #3a362f, 0 50px 80px -30px rgba(0,0,0,0.95); transition: box-shadow 400ms; }
.vs-dial { position: relative; width: 58%; aspect-ratio: 1; border-radius: 50%; background: #23211c; box-shadow: inset 0 0 0 4px #4a453c; transition: box-shadow 400ms; }
.vs-dial i { position: absolute; left: 50%; top: 50%; width: 64%; height: 4px; margin: -2px 0 0 -32%; border-radius: 2px; background: #6f6754; transition: background-color 400ms; }
.vs-dial i:nth-child(2) { rotate: 45deg; } .vs-dial i:nth-child(3) { rotate: 90deg; } .vs-dial i:nth-child(4) { rotate: 135deg; }
.vs-dial b { position: absolute; inset: 32%; border-radius: 50%; background: #3a362f; box-shadow: inset 0 0 0 2px #6f6754; }
.vs-slot { position: absolute; right: 10%; bottom: 10%; width: 26%; aspect-ratio: 1; border-radius: 30%; display: grid; place-items: center; color: #1a160e; background: var(--gold); opacity: 0; scale: 0.4; transition: opacity 300ms, scale 500ms cubic-bezier(.3,1.6,.5,1); }
.vs-slot svg { width: 64%; height: 64%; }
.is-locked .vs-slot { opacity: 1; scale: 1; }
.is-locked .vs-dial { box-shadow: inset 0 0 0 4px var(--gold), 0 0 30px rgba(201,166,97,0.3); }
.is-locked .vs-dial i { background: var(--gold); }
.is-checking .vs-vault, .is-using .vs-vault { box-shadow: inset 0 0 0 3px var(--gold), 0 0 70px rgba(201,166,97,0.35), 0 50px 80px -30px rgba(0,0,0,0.95); }
.vs-shut { position: absolute; inset: 0; background: repeating-linear-gradient(#6a241c 0 16px, #7e2e23 16px 19px); transform: translateY(-102%); }

/* The one thing that moves. */
.vs-mover { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; will-change: transform, opacity; opacity: 0; }
.vs-thing { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; padding: 12px 18px; border-radius: 999px; font: 600 17px var(--sans); box-shadow: 0 20px 40px -20px rgba(0,0,0,0.9); }
.vs-thing svg { width: 24px; height: 24px; }
.vs-thing--key { background: var(--gold); color: #1a160e; box-shadow: 0 0 40px rgba(201,166,97,0.55); }
.vs-thing--ticket { border-radius: 8px; background: #e9d6a6; color: #2a2318; font-size: 15px; position: relative; }
.vs-thing--ticket::before, .vs-thing--ticket::after { content: ''; position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--night); }
.vs-thing--ticket::before { left: -6px; } .vs-thing--ticket::after { right: -6px; }
.vs-thing--ticket.is-void { background: #5a2a22; color: #f0a596; text-decoration: line-through; }
.vs-thing--answer { display: grid; gap: 0; border-radius: 16px; background: #f1f0eb; color: #0a0a0a; text-align: left; }
.vs-thing--answer b { font-size: 22px; letter-spacing: -0.02em; }
.vs-thing--answer small { font-size: 11px; color: #6f6b63; }

/* Five beats; the one in view fills. */

@media (max-width: 900px) {
  .vt-pin { padding: 80px 14px 20px; gap: 12px; }
  .vt-say { font-size: clamp(26px, 8vw, 34px); }
  /* Each actor fills its third of the screen: the scene is the point, not a strip across it. */
  .vs-app { width: 25vw; } .vs-vault { width: 30vw; } .vs-agent { width: 28vw; }
  .vs-actor figcaption { font-size: 14px; }
  .vs-thing { font-size: 13px; padding: 8px 12px; }
  .vs-thing svg { width: 18px; height: 18px; }
  .vs-thing--answer b { font-size: 16px; }
}

/* Ask first: the request stops at the line until you say yes. */
.vs-ask { position: absolute; z-index: 4; left: 0; top: 0; width: 230px; padding: 14px; border-radius: 18px; background: #f1f0eb; color: #0a0a0a; text-align: left; display: grid; gap: 6px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.9); opacity: 0; pointer-events: none; will-change: transform, opacity; }
.vs-ask p { margin: 0; font: 500 10px var(--mono); color: #77736a; }
.vs-ask b { font: 600 16px/1.2 var(--sans); letter-spacing: -0.02em; }
.vs-ask span { font-size: 12px; color: #6f6b63; }
.vs-ask button { margin-top: 4px; padding: 9px; border: 0; border-radius: 10px; font: 600 14px var(--sans); background: #0a0a0a; color: #fff; transition: background-color 200ms; }
.vs-ask.is-yes button { background: #3f8f5a; }
.vs-thing--post { background: #f1f0eb; color: #0a0a0a; font-size: 15px; }
.vs-thing--post i { width: 8px; height: 8px; border-radius: 50%; background: #e0a43a; }

/* The X-ray gate on the path between the vault and your agent; it reads whatever crosses it. */
.vs-gate { position: absolute; z-index: 2; left: 0; top: 0; width: 66px; height: 170px; transform: translate(-50%, -50%); pointer-events: none; }
.vs-gate::before { content: ''; position: absolute; inset: 0; border: 5px solid #3a362f; border-bottom: 0; border-radius: 22px 22px 0 0; }
.vs-gate i { position: absolute; left: 9px; right: 9px; top: 9px; bottom: 0; border-radius: 14px 14px 0 0; background: linear-gradient(180deg, rgba(95,200,255,0.0), rgba(95,200,255,0.35)); opacity: var(--glow, 0.15); }
.vs-gate.is-no i { background: linear-gradient(180deg, rgba(240,110,90,0), rgba(240,110,90,0.45)); }
.vs-read { position: absolute; left: 50%; top: calc(100% + 14px); transform: translateX(-50%); width: max-content; max-width: 260px; padding: 10px 12px; border-radius: 12px; background: #16150f; box-shadow: inset 0 0 0 1px #2c2a24; text-align: left;
  font: 500 11px/1.55 var(--mono); color: #a19e95; opacity: var(--read, 0); }
.vs-read b { display: block; color: #8fd7ff; font-weight: 500; }
.vs-read em { display: block; color: #9fd8a8; }
.vs-gate.is-no .vs-read em { color: #f0a596; }

@media (max-width: 900px) {
  .vs-ask { width: 170px; padding: 10px; } .vs-ask b { font-size: 13px; }
  .vs-gate { width: 28px; height: 110px; }
  .vs-gate::before { border-width: 3px; } .vs-gate i { left: 5px; right: 5px; top: 5px; }
  .vs-read { top: calc(100% + 58px); max-width: 170px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .vs-slot { transition: opacity 300ms; } }