/* Site scenes — the animated infographic cards on the marketing page.
 * docs/superpowers/plans/2026-09-26-site-scenes.md
 *
 * Rules (2026-09-26, second pass): quick, seamless loops (≤ 6s); one idea and
 * one move per scene; frosted glass that lets the landscape through, never a
 * slab; neutral content (bone, stone, fog, ink); ember only as the solid
 * system accent, never a gradient into dark orange. Transform/opacity/filter
 * only. Every inner class is x- prefixed so page CSS can't leak in. */

.sv-fit {
  position: absolute; inset: 0; container-type: size; z-index: 2; pointer-events: none;
  --e: #F04A09;
  --t92: rgba(255,255,255,.92); --t80: rgba(255,255,255,.8); --t64: rgba(255,255,255,.64);
  --t50: rgba(255,255,255,.5); --t40: rgba(255,255,255,.4); --t28: rgba(255,255,255,.28);
  --hair: rgba(255,255,255,.08);
  --serif: "Instrument Serif", Georgia, serif;
}
.sv-canvas {
  position: absolute; left: 50%; top: 50%; width: var(--w); height: var(--h);
  translate: -50% -50%;
  /* fits the stage, and may grow a little (≤ 1.15) where the stage has room */
  scale: min(1.15, tan(atan2(100cqw, var(--w))), tan(atan2(100cqh, var(--h))));
  font-family: var(--preview-sans, "Aspekta", system-ui, sans-serif);
  color: var(--t92); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.sv-canvas * { box-sizing: border-box; }

/* Frosted glass: the photo glows through. */
.sv-glass {
  position: absolute; border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, rgba(30,30,35,.5) 0%, rgba(14,14,17,.58) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.07),
    0 28px 60px -30px rgba(0,0,0,.85);
}
.x-hd { position: absolute; left: 22px; right: 22px; top: 20px; display: flex; align-items: flex-start; justify-content: space-between; }
.x-ttl { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--t92); }
.x-mt { font-size: 12px; line-height: 16px; color: var(--t50); margin-top: 2px; }
.x-rt { text-align: right; }
.x-hr { position: absolute; left: 0; right: 0; height: 1px; background: var(--hair); }
.x-prog { position: absolute; left: 0; right: 0; height: 1px; background: var(--e); transform-origin: 0 50%; scale: 0 1; }

/* Odometer: per-digit roll. */
.sv-odo { display: inline-flex; line-height: 1; }
.sv-d { position: relative; display: inline-block; height: 1em; overflow: hidden; line-height: 1em; }
.sv-d > i { position: absolute; left: 0; top: 0; font-style: normal; }
.sv-d > i.sv-sz { position: static; visibility: hidden; }
/* Text swap: blur cross-fade in one grid cell. */
.sv-sw { display: inline-grid; }
.sv-sw > span { grid-area: 1 / 1; white-space: nowrap; }

/* ── Mini ads: neutral, clean, real-looking ───────────────────────────── */
.x-ad { position: absolute; width: 112px; height: 140px; border-radius: 9px; overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black); }
.x-ad > .x-bp { position: absolute; inset: 0; border-radius: 9px;
  background: rgba(255,255,255,.025); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.x-ad > .x-bp b { position: absolute; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.x-ad > .x-fin { position: absolute; inset: 0; opacity: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.x-fin > * { position: absolute; }
.x-fin .x-hl { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; line-height: 0.98; }
.x-fin .x-sb { font-size: 6.5px; line-height: 8.5px; font-weight: 500; }
.x-fin .x-cta { height: 14px; padding: 0 7px; border-radius: 7px; font-size: 6.5px; font-weight: 600; display: flex; align-items: center; }
.x-fin .x-btl { border-radius: 5px 5px 7px 7px; }
.x-fin .x-btl::before { content: ""; position: absolute; left: 50%; top: -8px; width: 46%; height: 9px; translate: -50% 0;
  border-radius: 3px 3px 1px 1px; background: inherit; filter: brightness(0.8); }
.x-fin .x-btl::after { content: ""; position: absolute; left: 20%; right: 20%; top: 36%; height: 20%; border-radius: 2px;
  background: rgba(255,255,255,.5); }
.x-ad > .x-lit { position: absolute; inset: -30% -70%; opacity: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%); mix-blend-mode: soft-light; }

/* ── Problem: more volume, same ideas ─────────────────────────────────── */
.sv-prob .x-stat { position: absolute; top: 22px; }
.sv-prob .x-stat .x-k { font-size: 12px; line-height: 16px; color: var(--t50); }
.sv-prob .x-stat .x-n { margin-top: 8px; font-size: 32px; line-height: 32px; font-weight: 500; letter-spacing: -0.035em; color: var(--t92); }
.sv-prob .x-stat .x-n.x-em { color: var(--e); }
.sv-prob .x-cap { position: absolute; right: 22px; top: 24px; width: 180px; text-align: right; font-size: 12px; line-height: 17px; color: var(--t40); }
.sv-prob .x-lane { position: absolute; left: 0; right: 0; height: 78px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.sv-prob .x-track { position: absolute; left: 0; top: 0; display: flex; gap: 12px; will-change: transform; }
.sv-prob .x-track .x-ad { position: relative; flex: none; width: 62px; height: 78px; border-radius: 7px; }
.sv-prob .x-track .x-ad > .x-fin { opacity: 1; }

/* ── Brand context: one memory, inked row by row ──────────────────────── */
.sv-brand .x-row { position: absolute; left: 0; right: 0; height: 48px; }
.sv-brand .x-row + .x-row::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 1px; background: rgba(255,255,255,.06); }
.sv-brand .x-k { position: absolute; left: 22px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 12px; color: var(--t40); }
.sv-brand .x-ph { position: absolute; left: 108px; top: 50%; translate: 0 -50%; height: 7px; border-radius: 4px; background: rgba(255,255,255,.07); }
.sv-brand .x-v { position: absolute; left: 108px; top: 0; bottom: 0; display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--t92); opacity: 0; white-space: nowrap; }
.sv-brand .x-src { position: absolute; right: 22px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 12px; color: var(--t40); opacity: 0; }
.sv-brand .x-sw { width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.sv-brand .x-aa { font-family: var(--serif); font-size: 24px; line-height: 1; }
.sv-brand .x-glint { position: absolute; left: 0; top: 0; width: 160px; height: 48px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); }

/* ── Test plan and ads: checked before you see it ─────────────────────── */
.sv-ads .x-st { position: absolute; width: 112px; height: 16px; display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--t50); opacity: 0; white-space: nowrap; }
.sv-ads .x-st .sv-sw > span { display: inline-flex; align-items: center; gap: 5px; }
.sv-ads .x-st svg { color: var(--e); flex: none; }
.sv-ads .x-st.x-off { color: var(--e); }
.sv-ads .x-ring { position: absolute; border-radius: 11px; opacity: 0; pointer-events: none; box-shadow: 0 0 0 1.5px var(--e); }

/* ── Results: the winner becomes the next test ────────────────────────── */
.sv-res .x-rrow { position: absolute; left: 22px; right: 22px; height: 44px; }
.sv-res .x-th { position: absolute; left: 0; top: 5px; width: 27px; height: 34px; border-radius: 5px; overflow: hidden; }
.sv-res .x-th .x-ad { left: 0; top: 0; transform-origin: 0 0; scale: 0.2411; }
.sv-res .x-nm { position: absolute; left: 40px; top: 0; bottom: 0; display: flex; align-items: center;
  font-family: var(--serif); font-size: 16px; color: var(--t80); white-space: nowrap; transition: color 400ms cubic-bezier(.23,1,.32,1); }
.sv-res .x-tr { position: absolute; left: 200px; right: 64px; top: 19px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; }
.sv-res .x-fl { position: absolute; inset: 0; border-radius: 3px; transform-origin: 0 50%; scale: 0 1; background: rgba(255,255,255,.42);
  transition: background-color 420ms cubic-bezier(.23,1,.32,1); }
.sv-res .x-fl.x-win { background: var(--e); }
.sv-res .x-vl { position: absolute; right: 0; top: 0; bottom: 0; display: flex; align-items: center; font-size: 13px; font-weight: 500; color: var(--t80); }
.sv-res .x-rrow.x-dim .x-nm, .sv-res .x-rrow.x-dim .x-vl { color: var(--t40); }
.sv-res .x-next { position: absolute; height: 40px; border-radius: 11px; display: flex; align-items: center; gap: 10px; padding: 0 14px;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.08);
  font-size: 13px; color: var(--t92); opacity: 0; white-space: nowrap; }
.sv-res .x-next .x-pl { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: var(--e); color: #fff; }
.sv-res .x-next small { font-size: 12px; color: var(--t50); }
.sv-res .x-next.x-wait { opacity: 1; color: var(--t40); background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.sv-res .x-next.x-wait .x-pl { background: rgba(255,255,255,.08); color: var(--t40); }
.sv-res .x-next.x-wait small { color: var(--t28); }
.sv-res .x-lift { font-size: 24px; line-height: 24px; font-weight: 500; letter-spacing: -0.03em; color: var(--t92); }

/* ── How it works: three miniatures ───────────────────────────────────── */
.sv-how .x-fld { position: absolute; left: 0; right: 0; top: 0; height: 38px; border-radius: 10px; display: flex; align-items: center;
  padding: 0 12px; font-size: 13.5px; color: var(--t92); background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.sv-how .x-fld .x-ph2 { color: var(--t40); }
.sv-how .x-car { width: 1.5px; height: 15px; margin-left: 1px; border-radius: 1px; background: var(--e); }
.sv-how .x-li { position: absolute; left: 0; right: 0; height: 36px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--t80); opacity: 0; }
.sv-how .x-li .x-ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: none; color: var(--t64);
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.sv-how .x-li .x-ok { margin-left: auto; color: var(--e); display: grid; }
.sv-how .x-ft { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; color: var(--t50); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.sv-how .x-ft b { font-weight: 500; color: var(--t92); }

/* The problem stage was sized by its old card on phones (height:auto). The
   scene is absolutely placed, so the stage takes the scene's shape instead. */
@media (max-width: 720px) {
  .p-stage:has(> .sv-fit) { height: auto; aspect-ratio: 760 / 360; padding: 0; }
}