/* ─────────────────────────────────────────────────────────────
   3D phone + floating glass cards (homepage, sign in, sign up).
   Pure CSS 3D; scene3d.js builds the markup and adds the tilt.
   Size with --s on .scene3d (1 = 230×460 phone).
   ───────────────────────────────────────────────────────────── */
.scene3d {
  --s: 1;
  --pw: calc(230px * var(--s));
  --ph: calc(460px * var(--s));
  --pd: calc(14px * var(--s));
  position: relative;
  width: 100%;
  min-height: calc(var(--ph) + 80px * var(--s));
  display: grid;
  place-items: center;
  perspective: 1200px;
  perspective-origin: 50% 40%;
  user-select: none;
}
.scene3d .stage {
  position: relative;
  width: var(--pw);
  height: var(--ph);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 8deg)) rotateY(var(--ry, -18deg));
  transition: transform 0.12s linear;
}
.scene3d.idle .stage { animation: s3d-sway 9s ease-in-out infinite; }
@keyframes s3d-sway {
  0%, 100% { transform: rotateX(8deg) rotateY(-18deg) translateY(0); }
  50%      { transform: rotateX(4deg) rotateY(14deg) translateY(calc(-10px * var(--s))); }
}

/* glow under the phone */
.scene3d .glow {
  position: absolute;
  width: calc(var(--pw) * 1.5);
  height: calc(var(--pw) * 0.5);
  bottom: calc(10px * var(--s));
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--accent-soft, rgba(99,102,241,.35)) 0%, transparent 70%);
  filter: blur(18px);
  pointer-events: none;
}

/* ── the phone body: six faces ── */
.phone3d, .phone3d > * { position: absolute; transform-style: preserve-3d; }
.phone3d { inset: 0; }
.phone3d .face {
  border-radius: calc(34px * var(--s));
  background: linear-gradient(145deg, #1e1b2e, #0c0a16);
  box-shadow: inset 0 0 0 calc(2px * var(--s)) rgba(255,255,255,.08);
}
.phone3d .front { width: var(--pw); height: var(--ph); transform: translateZ(calc(var(--pd) / 2)); padding: calc(10px * var(--s)); }
.phone3d .back  {
  width: var(--pw); height: var(--ph);
  transform: rotateY(180deg) translateZ(calc(var(--pd) / 2));
  background: linear-gradient(160deg, var(--btn-a, #7c3aed), var(--btn-b, #db2777));
}
.phone3d .back::after { /* camera block */
  content: ""; position: absolute; top: calc(22px * var(--s)); left: calc(22px * var(--s));
  width: calc(64px * var(--s)); height: calc(64px * var(--s)); border-radius: calc(18px * var(--s));
  background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 calc(2px * var(--s)) rgba(255,255,255,.15);
}
.phone3d .side {
  top: calc(30px * var(--s)); height: calc(var(--ph) - 60px * var(--s)); width: var(--pd);
  background: linear-gradient(180deg, #2a2640, #14111f);
  border-radius: calc(4px * var(--s));
}
.phone3d .side.l { left: calc(var(--pd) / -2); transform: rotateY(-90deg); }
.phone3d .side.r { right: calc(var(--pd) / -2); transform: rotateY(90deg); }
.phone3d .cap {
  left: calc(30px * var(--s)); width: calc(var(--pw) - 60px * var(--s)); height: var(--pd);
  background: linear-gradient(90deg, #2a2640, #14111f);
  border-radius: calc(4px * var(--s));
}
.phone3d .cap.t { top: calc(var(--pd) / -2); transform: rotateX(90deg); }
.phone3d .cap.b { bottom: calc(var(--pd) / -2); transform: rotateX(-90deg); }

/* ── the screen ── */
.phone3d .screen {
  position: relative; width: 100%; height: 100%;
  border-radius: calc(26px * var(--s));
  overflow: hidden;
  background: radial-gradient(120% 80% at 20% 0%, #2b1f55 0%, #120e24 55%, #0a0814 100%);
  color: #eef;
  font-size: calc(11px * var(--s));
  padding: calc(34px * var(--s)) calc(14px * var(--s)) calc(14px * var(--s));
}
.phone3d .screen::before { /* notch */
  content: ""; position: absolute; top: calc(10px * var(--s)); left: 50%; transform: translateX(-50%);
  width: calc(76px * var(--s)); height: calc(18px * var(--s)); border-radius: 999px; background: #000;
}
.phone3d .screen::after { /* glass glare */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 38%);
  pointer-events: none;
}
.phone3d .sc-head { display: flex; align-items: center; gap: calc(8px * var(--s)); margin-bottom: calc(12px * var(--s)); }
.phone3d .sc-logo {
  width: calc(26px * var(--s)); height: calc(26px * var(--s)); border-radius: calc(8px * var(--s));
  background: linear-gradient(135deg, var(--btn-a, #7c3aed), var(--btn-b, #db2777));
  display: grid; place-items: center; font-weight: 800; font-size: calc(12px * var(--s));
}
.phone3d .sc-title { font-weight: 800; font-size: calc(13px * var(--s)); line-height: 1.2; }
.phone3d .sc-kind { font-size: calc(9.5px * var(--s)); opacity: .65; text-transform: uppercase; letter-spacing: .08em; }
.phone3d .sc-input {
  margin: calc(6px * var(--s)) 0 calc(12px * var(--s));
  padding: calc(8px * var(--s)) calc(10px * var(--s)); border-radius: calc(10px * var(--s));
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em;
}
.phone3d .sc-scan { height: calc(3px * var(--s)); border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin-bottom: calc(12px * var(--s)); }
.phone3d .sc-scan i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--btn-a, #7c3aed), var(--btn-b, #db2777)); }
.scene3d.play .sc-scan i { animation: s3d-scan 1.1s ease-out forwards; }
@keyframes s3d-scan { to { width: 100%; } }
.phone3d .sc-row {
  display: flex; justify-content: space-between; gap: calc(8px * var(--s));
  padding: calc(7px * var(--s)) 0; border-bottom: 1px solid rgba(255,255,255,.07);
  opacity: 0; transform: translateY(calc(6px * var(--s)));
}
.scene3d.play .sc-row { animation: s3d-row .45s ease-out forwards; }
.phone3d .sc-row span { opacity: .6; }
.phone3d .sc-row b { font-weight: 700; }
.phone3d .sc-row b.ok { color: #4ade80; }
@keyframes s3d-row { to { opacity: 1; transform: none; } }

/* ── floating glass cards ── */
.scene3d .chip3d {
  position: absolute;
  padding: calc(9px * var(--s)) calc(12px * var(--s));
  border-radius: calc(14px * var(--s));
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px rgba(20,10,60,.22);
  color: var(--text, #1b1530);
  font-size: calc(12px * var(--s));
  font-weight: 700;
  white-space: nowrap;
  display: flex; align-items: center; gap: calc(7px * var(--s));
  animation: s3d-float 6s ease-in-out infinite;
}
.scene3d .chip3d em {
  font-style: normal; font-size: calc(10px * var(--s)); font-weight: 600; opacity: .7; display: block;
}
.scene3d .chip3d .dot {
  width: calc(22px * var(--s)); height: calc(22px * var(--s)); border-radius: 50%;
  display: grid; place-items: center; font-size: calc(11px * var(--s)); color: #fff; flex: none;
  background: linear-gradient(135deg, var(--btn-a, #7c3aed), var(--btn-b, #db2777));
}
.scene3d .chip3d .dot.ok { background: linear-gradient(135deg, #22c55e, #16a34a); }
.scene3d .chip3d .dot.gold { background: linear-gradient(135deg, #f59e0b, #d97706); }
.scene3d .chip3d.c1 { top: 12%; left: -30%; transform: translateZ(calc(90px * var(--s))); animation-delay: -1s; }
.scene3d .chip3d.c2 { top: 44%; right: -36%; transform: translateZ(calc(120px * var(--s))); animation-delay: -3s; }
.scene3d .chip3d.c3 { bottom: 12%; left: -24%; transform: translateZ(calc(70px * var(--s))); animation-delay: -4.5s; }
@keyframes s3d-float {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: calc(-10px * var(--s)); }
}

/* orbs behind */
.scene3d .orb {
  position: absolute; border-radius: 50%; filter: blur(2px); opacity: .55; pointer-events: none;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), var(--btn-b, #db2777) 45%, transparent 70%);
  animation: s3d-float 8s ease-in-out infinite;
}
.scene3d .orb.o1 { width: calc(70px * var(--s)); height: calc(70px * var(--s)); top: 2%; right: 8%; }
.scene3d .orb.o2 {
  width: calc(46px * var(--s)); height: calc(46px * var(--s)); bottom: 6%; right: 18%; animation-delay: -2s;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), var(--btn-a, #7c3aed) 45%, transparent 70%);
}

@media (max-width: 720px) {
  .scene3d .chip3d.c1 { left: -12%; }
  .scene3d .chip3d.c2 { right: -14%; }
  .scene3d .chip3d.c3 { left: -8%; }
}

/* Motion off when the user asks for it: a still, slightly angled phone. */
@media (prefers-reduced-motion: reduce) {
  .scene3d .stage, .scene3d.idle .stage { animation: none !important; transition: none !important; }
  .scene3d .chip3d, .scene3d .orb { animation: none !important; }
  .scene3d .sc-row { opacity: 1 !important; transform: none !important; animation: none !important; }
  .scene3d .sc-scan i { width: 100% !important; animation: none !important; }
}

/* ═════════════════════════════════════════════════════════════
   Story mode (homepage hero): a looping product demo.
   scene3d.js sets data-scene on .scene3d; every effect below is
   keyed to it. Only transform / opacity animate (GPU-friendly).
   ═════════════════════════════════════════════════════════════ */
.scene3d.story { display: block; min-height: 0; perspective: none; }
.scene3d .s3d-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.scene3d .s3d-visual {
  position: relative; display: grid; place-items: center;
  min-height: calc(var(--ph) + 90px * var(--s));
  perspective: 1400px; perspective-origin: 50% 38%;
}
.scene3d.story .stage {
  transform: translateZ(var(--tz, 0px)) rotateX(var(--rx, 8deg)) rotateY(var(--ry, -18deg));
  transition: none;
}
.scene3d .rig { position: absolute; inset: 0; transform-style: preserve-3d; animation: s3d-bob 6s ease-in-out infinite; }
@keyframes s3d-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-9px * var(--s))); } }

/* entrance: the phone rises out of the glow at the start of each loop */
.scene3d.story[data-scene="device"] .phone3d { animation: s3d-rise 1.2s cubic-bezier(.16,1,.3,1) both; }
@keyframes s3d-rise { from { opacity: 0; transform: translateY(calc(40px * var(--s))) rotateY(-40deg) scale(.92); } to { opacity: 1; transform: none; } }

/* shadow on the floor; the light under the phone follows the story */
.scene3d .floor {
  position: absolute; left: 50%; bottom: calc(4px * var(--s)); width: calc(var(--pw) * 1.9); height: calc(46px * var(--s));
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(20,10,60,.28), transparent 70%);
  filter: blur(6px); pointer-events: none;
}
.scene3d.story .glow { transition: opacity .8s; }
.scene3d.story[data-scene="processing"] .glow { opacity: .55; }
.scene3d.story[data-scene="result"] .glow { background: radial-gradient(ellipse at center, rgba(34,197,94,.45) 0%, transparent 70%); }

/* glass sheen sweeping across the screen */
.scene3d .front .sheen { position: absolute; inset: calc(10px * var(--s)); border-radius: calc(26px * var(--s)); overflow: hidden; pointer-events: none; }
.scene3d .front .sheen::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; width: 45%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  transform: skewX(-12deg); animation: s3d-sheen 5.5s ease-in-out infinite;
}
@keyframes s3d-sheen { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }

/* ── screens ── */
.phone3d .sc-page { animation: s3d-page .5s cubic-bezier(.16,1,.3,1) both; height: 100%; }
@keyframes s3d-page { from { opacity: 0; transform: translateY(calc(10px * var(--s))) scale(.98); } to { opacity: 1; transform: none; } }
.phone3d .sc-home { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: calc(30px * var(--s)); gap: calc(10px * var(--s)); }
.phone3d .sc-time { font-size: calc(44px * var(--s)); font-weight: 800; letter-spacing: -.03em; opacity: .92; }
.phone3d .sc-brand { display: flex; flex-direction: column; align-items: center; gap: calc(8px * var(--s)); font-weight: 800; font-size: calc(13px * var(--s)); margin-top: calc(18px * var(--s)); }
.phone3d .sc-logo.big { width: calc(54px * var(--s)); height: calc(54px * var(--s)); border-radius: calc(16px * var(--s)); font-size: calc(24px * var(--s)); box-shadow: 0 10px 30px rgba(219,39,119,.4); }
.phone3d .sc-hint { opacity: .6; font-size: calc(10px * var(--s)); }
.phone3d .sc-pill {
  margin-top: auto; margin-bottom: calc(18px * var(--s)); padding: calc(9px * var(--s)) calc(18px * var(--s)); border-radius: 999px; font-weight: 700;
  background: linear-gradient(135deg, var(--btn-a, #7c3aed), var(--btn-b, #db2777)); animation: s3d-pulse 1.6s ease-in-out infinite;
}
@keyframes s3d-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(219,39,119,.5); } 50% { box-shadow: 0 0 0 calc(8px * var(--s)) rgba(219,39,119,0); } }
.phone3d .sc-search {
  display: flex; align-items: center; gap: calc(6px * var(--s)); padding: calc(8px * var(--s)) calc(10px * var(--s)); margin-bottom: calc(10px * var(--s));
  border-radius: calc(10px * var(--s)); background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
}
.phone3d .sc-search b { font-weight: 600; }
.phone3d .caret { display: inline-block; width: 1px; height: 1.1em; background: currentColor; margin-left: 1px; opacity: 0; vertical-align: middle; }
.phone3d .typing .caret, .phone3d .sc-search .caret { animation: s3d-caret .8s steps(1) infinite; }
@keyframes s3d-caret { 50% { opacity: 1; } }
.phone3d .sc-item {
  display: flex; justify-content: space-between; gap: calc(8px * var(--s)); align-items: center;
  padding: calc(8px * var(--s)) calc(9px * var(--s)); margin-bottom: calc(6px * var(--s)); border-radius: calc(9px * var(--s));
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  opacity: 0; animation: s3d-row .45s ease-out forwards;
}
.phone3d .sc-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone3d .sc-item b { flex: none; color: #c4b5fd; }
.phone3d .sc-item.pick { animation: s3d-row .45s ease-out forwards, s3d-pick .6s 1.8s ease-out forwards; }
@keyframes s3d-pick { to { opacity: 1; background: linear-gradient(135deg, rgba(124,58,237,.6), rgba(219,39,119,.6)); border-color: rgba(255,255,255,.45); transform: scale(1.03); } }
.phone3d .sc-chosen {
  margin-top: calc(14px * var(--s)); padding: calc(14px * var(--s)); border-radius: calc(14px * var(--s)); text-align: center;
  background: linear-gradient(160deg, rgba(124,58,237,.35), rgba(219,39,119,.25)); border: 1px solid rgba(255,255,255,.2);
}
.phone3d .sc-chosen > b { display: block; font-size: calc(12.5px * var(--s)); line-height: 1.3; margin: calc(8px * var(--s)) 0; }
.phone3d .sc-check, .phone3d .sc-big {
  width: calc(34px * var(--s)); height: calc(34px * var(--s)); margin: 0 auto; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #22c55e, #16a34a); font-weight: 900; font-size: calc(16px * var(--s));
  animation: s3d-pop .5s .15s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes s3d-pop { from { transform: scale(0); } to { transform: scale(1); } }
.phone3d .sc-facts { display: grid; grid-template-columns: 1fr 1fr; gap: calc(6px * var(--s)); }
.phone3d .sc-facts span { padding: calc(6px * var(--s)); border-radius: calc(8px * var(--s)); background: rgba(0,0,0,.25); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone3d .sc-facts em { display: block; font-style: normal; font-weight: 600; opacity: .6; font-size: calc(9px * var(--s)); text-transform: uppercase; letter-spacing: .06em; }
.phone3d .sc-field { display: block; margin: calc(10px * var(--s)) 0; padding: calc(8px * var(--s)) calc(10px * var(--s)); border-radius: calc(10px * var(--s)); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); transition: border-color .3s, box-shadow .3s; }
.phone3d .sc-field span { display: block; font-size: calc(9.5px * var(--s)); opacity: .65; text-transform: uppercase; letter-spacing: .07em; margin-bottom: calc(4px * var(--s)); }
.phone3d .sc-field b { display: inline-block; min-height: 1.2em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; letter-spacing: .04em; }
.phone3d .sc-field.typing { border-color: rgba(196,181,253,.8); box-shadow: 0 0 0 calc(3px * var(--s)) rgba(124,58,237,.25); }
.phone3d .sc-note { margin: calc(16px * var(--s)) 0; opacity: .75; }
.phone3d .sc-btn {
  margin-top: calc(14px * var(--s)); padding: calc(10px * var(--s)); border-radius: calc(12px * var(--s)); text-align: center; font-weight: 800;
  background: linear-gradient(135deg, var(--btn-a, #7c3aed), var(--btn-b, #db2777));
  animation: s3d-pulse 1.4s 1.6s ease-in-out infinite;
}
.phone3d .sc-btn.pressed { animation: s3d-press .5s ease-out both; }
@keyframes s3d-press { 0% { transform: scale(1); } 40% { transform: scale(.94); filter: brightness(1.3); } 100% { transform: scale(1); } }
.phone3d .sc-sent { display: flex; justify-content: center; gap: calc(6px * var(--s)); margin-top: calc(18px * var(--s)); }
.phone3d .sc-sent i { width: calc(7px * var(--s)); height: calc(7px * var(--s)); border-radius: 50%; background: #c4b5fd; animation: s3d-dots 1s ease-in-out infinite; }
.phone3d .sc-sent i:nth-child(2) { animation-delay: .15s; }
.phone3d .sc-sent i:nth-child(3) { animation-delay: .3s; }
@keyframes s3d-dots { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(calc(-6px * var(--s))); opacity: 1; } }
.phone3d .sc-ring { position: relative; width: calc(118px * var(--s)); height: calc(118px * var(--s)); margin: calc(18px * var(--s)) auto calc(14px * var(--s)); }
.phone3d .sc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.phone3d .sc-ring circle { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 7; }
.phone3d .sc-ring .arc { stroke: #a78bfa; stroke-linecap: round; stroke-dasharray: 264; stroke-dashoffset: 264; animation: s3d-arc 2.8s cubic-bezier(.45,.05,.35,1) forwards; }
@keyframes s3d-arc { to { stroke-dashoffset: 0; } }
.phone3d .sc-ring .pct { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(22px * var(--s)); font-weight: 800; }
.phone3d .sc-status { position: relative; height: 1.4em; text-align: center; font-weight: 700; }
.phone3d .sc-status span { position: absolute; inset: 0; opacity: 0; animation: s3d-status 3s linear both; }
.phone3d .sc-status span:nth-child(2) { animation-delay: 1s; }
.phone3d .sc-status span:nth-child(3) { animation: s3d-status-last 1s 2s linear both; }
@keyframes s3d-status { 0% { opacity: 0; transform: translateY(4px); } 6%, 30% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes s3d-status-last { 0% { opacity: 0; } 25%, 100% { opacity: 1; } }
.phone3d .sc-done { text-align: center; padding-top: calc(12px * var(--s)); position: relative; }
.phone3d .sc-big { width: calc(62px * var(--s)); height: calc(62px * var(--s)); font-size: calc(30px * var(--s)); box-shadow: 0 0 0 calc(8px * var(--s)) rgba(34,197,94,.18), 0 10px 30px rgba(34,197,94,.45); }
.phone3d .sc-done-t { font-size: calc(18px * var(--s)); font-weight: 800; margin-top: calc(10px * var(--s)); }
.phone3d .sc-done-s { opacity: .7; margin-bottom: calc(10px * var(--s)); }
.phone3d .sc-done .sc-row { opacity: 0; transform: translateY(calc(6px * var(--s))); animation: s3d-row .45s ease-out forwards; text-align: left; }
.phone3d .sc-sentto { margin-top: calc(14px * var(--s)); opacity: 0; animation: s3d-row .45s 1.3s ease-out forwards; }
.phone3d .sc-sentto em { display: block; font-style: normal; font-size: calc(9px * var(--s)); text-transform: uppercase; letter-spacing: .08em; opacity: .55; margin-bottom: calc(6px * var(--s)); }
.phone3d .sc-sentto span { display: inline-block; margin: 0 calc(2px * var(--s)) calc(4px * var(--s)); padding: calc(4px * var(--s)) calc(8px * var(--s)); border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); font-weight: 700; font-size: calc(9.5px * var(--s)); }
.phone3d .sc-demo { position: absolute; right: 0; bottom: calc(-4px * var(--s)); font-size: calc(8.5px * var(--s)); opacity: .45; letter-spacing: .08em; text-transform: uppercase; }

/* scanning beam over the screen while processing */
.scene3d .front .beam {
  position: absolute; left: calc(10px * var(--s)); right: calc(10px * var(--s)); top: calc(10px * var(--s)); height: calc(60px * var(--s));
  background: linear-gradient(180deg, transparent, rgba(167,139,250,.32) 70%, rgba(236,72,153,.85) 98%, transparent);
  border-radius: calc(20px * var(--s)); opacity: 0; pointer-events: none;
}
.scene3d.story[data-scene="processing"] .front .beam { animation: s3d-beam 1.5s ease-in-out infinite; }
@keyframes s3d-beam { 0% { opacity: 0; transform: translateY(0); } 10%, 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(var(--ph) - 80px * var(--s))); } }

/* ── floating service cards around the phone ── */
.scene3d .orbit { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.scene3d .ocard {
  position: absolute; left: calc(50% + var(--x) * var(--pw) / 100); top: var(--y);
  transform: translate(-50%, 0) translateZ(var(--z)) scale(.6); opacity: 0;
  display: flex; align-items: center; gap: calc(8px * var(--s)); max-width: calc(190px * var(--s));
  padding: calc(9px * var(--s)) calc(12px * var(--s)); border-radius: calc(14px * var(--s));
  background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.7);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(30,15,80,.22); color: #1b1530; font-size: calc(11.5px * var(--s));
  transition: transform .7s cubic-bezier(.16,1,.3,1), opacity .5s, box-shadow .4s;
}
.scene3d .ocard b { display: block; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(140px * var(--s)); }
.scene3d .ocard em { font-style: normal; font-size: calc(10px * var(--s)); font-weight: 700; color: #7c3aed; }
.scene3d .ocard .oi { width: calc(26px * var(--s)); height: calc(26px * var(--s)); flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #ede9fe, #fce7f3); font-size: calc(13px * var(--s)); }
.scene3d.story:not([data-scene="device"]):not([data-scene="result"]) .ocard { opacity: 1; transform: translate(-50%, 0) translateZ(var(--z)) scale(1); transition-delay: var(--d); }
.scene3d.story[data-scene="discover"] .ocard { animation: s3d-drift 4s ease-in-out infinite; animation-delay: var(--d); }
@keyframes s3d-drift { 50% { margin-top: calc(-8px * var(--s)); } }
.scene3d.story[data-scene="processing"] .ocard, .scene3d.story[data-scene="order"] .ocard { opacity: .3; }
.scene3d.story .ocard.pick {
  opacity: 1 !important; transform: translate(-50%, 0) translateZ(calc(var(--z) + 40px)) scale(1.12);
  box-shadow: 0 0 0 calc(3px * var(--s)) rgba(219,39,119,.55), 0 18px 40px rgba(124,58,237,.45);
}

/* ── "Order created" card that pops out of the screen ── */
.scene3d .toast3d {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, 0) translateZ(60px) scale(.4); opacity: 0;
  display: flex; align-items: center; gap: calc(9px * var(--s)); white-space: nowrap;
  padding: calc(10px * var(--s)) calc(14px * var(--s)); border-radius: calc(16px * var(--s));
  background: rgba(255,255,255,.93); color: #14532d; font-size: calc(12px * var(--s));
  box-shadow: 0 20px 44px rgba(22,101,52,.3); pointer-events: none;
  transition: transform .6s cubic-bezier(.34,1.56,.64,1), opacity .4s;
}
.scene3d .toast3d .ti { width: calc(26px * var(--s)); height: calc(26px * var(--s)); border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #22c55e, #16a34a); font-weight: 900; }
.scene3d .toast3d b { display: block; }
.scene3d .toast3d em { font-style: normal; opacity: .7; font-size: calc(10px * var(--s)); }
.scene3d.story[data-scene="order"] .toast3d { opacity: 1; transform: translate(-50%, 0) translateZ(170px) scale(1); transition-delay: .35s; }
.scene3d.story[data-scene="processing"] .toast3d { opacity: 0; transform: translate(-50%, -60px) translateZ(220px) scale(.9); }

/* ── completion burst ── */
.scene3d .burst { position: absolute; left: 50%; top: 30%; width: 0; height: 0; transform: translateZ(40px); pointer-events: none; }
.scene3d .burst i {
  position: absolute; width: calc(8px * var(--s)); height: calc(8px * var(--s)); margin: calc(-4px * var(--s)); border-radius: 50%;
  background: linear-gradient(135deg, #4ade80, #a78bfa); opacity: 0;
}
.scene3d.story[data-scene="result"] .burst i { animation: s3d-burst 1.1s .25s cubic-bezier(.16,1,.3,1) both; }
@keyframes s3d-burst {
  0% { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(calc(130px * var(--s) * var(--d))) scale(.3); }
}

/* ── step bar under the phone ── */
.scene3d .s3d-rail { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 4px; }
.scene3d .s3d-steps { display: flex; gap: 4px; list-style: none; margin: 0; padding: 5px; border-radius: 999px; background: var(--surface-2, rgba(255,255,255,.5)); border: 1px solid var(--border, rgba(0,0,0,.08)); flex-wrap: wrap; justify-content: center; }
.scene3d .s3d-steps li { display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 999px; font-size: .74rem; font-weight: 700; color: var(--muted, #6b6385); transition: background .4s, color .4s; }
.scene3d .s3d-steps i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .7rem; background: var(--border, rgba(0,0,0,.08)); transition: background .4s, color .4s; }
.scene3d .s3d-steps li.done i { background: #22c55e; color: #fff; }
.scene3d .s3d-steps li.on { padding-right: 11px; background: linear-gradient(135deg, var(--btn-a, #7c3aed), var(--btn-b, #db2777)); color: #fff; }
.scene3d .s3d-steps li.on i { background: rgba(255,255,255,.3); color: #fff; }
.scene3d .s3d-steps li:not(.on) span { display: none; }
.scene3d .s3d-pause {
  width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid var(--border-strong, rgba(0,0,0,.15));
  background: var(--surface, #fff); color: var(--text, #1b1530); cursor: pointer; font-size: .72rem; display: grid; place-items: center; padding: 0;
}
.scene3d .s3d-pause:focus-visible { outline: 3px solid var(--accent, #7c3aed); outline-offset: 2px; }

/* paused / off screen: freeze every running animation */
.scene3d.paused *, .scene3d.paused *::before, .scene3d.offscreen *, .scene3d.offscreen *::before { animation-play-state: paused !important; }

/* small screens: fewer cards, no backdrop blur */
.scene3d.lite .ocard { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,.94); max-width: calc(150px * var(--s));
  /* phones: the stage is centred, so keep each card inside the screen width */
  left: clamp(calc(var(--pw) / 2 - 50vw + 75px * var(--s) + 8px), calc(50% + var(--x) * var(--pw) / 100 * .95), calc(var(--pw) / 2 + 50vw - 75px * var(--s) - 22px)); --z: 24px !important; }
.scene3d.lite .ocard b { max-width: calc(96px * var(--s)); }
.scene3d.lite .s3d-rail { gap: 6px; }
.scene3d.lite .s3d-steps { gap: 2px; padding: 4px; flex-wrap: nowrap; }
.scene3d.lite .s3d-steps li { padding: 3px; font-size: .7rem; }
.scene3d.lite .s3d-steps li.on { padding-right: 9px; }
.scene3d.lite .s3d-steps i { width: 18px; height: 18px; font-size: .64rem; }
.scene3d.lite .floor, .scene3d.lite .orb { display: none; }

/* dark theme: cards stay readable */
:root[data-theme="dark"] .scene3d .ocard { background: rgba(30,27,46,.82); border-color: rgba(255,255,255,.14); color: #eee; }
:root[data-theme="dark"] .scene3d .ocard .oi { background: rgba(255,255,255,.1); }
:root[data-theme="dark"] .scene3d .ocard em { color: #c4b5fd; }

@media (prefers-reduced-motion: reduce) {
  .scene3d.story *, .scene3d.story *::before { animation: none !important; transition: none !important; }
  .scene3d.story .sc-row, .scene3d.story .sc-item, .scene3d.story .sc-sentto { opacity: 1 !important; transform: none !important; }
}