/* ---- resting deck: larger picture, one strong name, two clear actions ---- */
@media (min-width:1001px){.deck{--cw:236px;--gap:16px}}
@media (max-width:1320px) and (min-width:1001px){.deck{--cw:206px;--gap:18px}}
@media (max-width:1140px) and (min-width:1001px){.deck{--cw:186px;--gap:14px}}
@media (min-width:1700px) and (min-height:900px){.deck{--cw:286px;--gap:30px}}
.card-vis{height:62%}
.card-body h3{font-family:var(--display,var(--head));font-size:clamp(1.02rem,7.2cqw,1.42rem);line-height:1.1;letter-spacing:-.018em}
.card-acts{margin-top:auto;display:flex;gap:6px}
.card-acts .card-cta{margin:0;flex:1 1 0;min-width:0;padding:6px 8px;font-size:clamp(.75rem,4.3cqw,.82rem);justify-content:center;gap:5px;white-space:nowrap}
.card-open{flex:1 1 0;min-width:0;padding:6px 8px;border:0;border-radius:9px;background:rgb(var(--hue));color:#071022;font:inherit;font-weight:700;font-size:clamp(.75rem,4.3cqw,.82rem);line-height:1.25;cursor:pointer;transition:filter .2s var(--ease),transform .12s var(--ease)}
.card-open:hover{filter:brightness(1.14)}.card-open:active{transform:scale(.96)}
.card-open:focus-visible,.deck-all:focus-visible,.sc :focus-visible{outline:2px solid #fff;outline-offset:2px}
.card-more .card-body>.card-cta{flex:none;margin-top:auto;padding:7px 10px;font-size:clamp(.75rem,4.4cqw,.84rem)}
.card[data-slug]{cursor:pointer}
@media (min-width:1001px){.card:not(.card-more) .card-body .desc{display:none}.card-more .card-body .desc{display:none}.card-kind{display:none}}
@media (max-width:1140px) and (min-width:1001px){.card-vis{height:60%}.card-open,.card-acts .card-cta{padding:5px 3px;gap:2px;letter-spacing:-.015em}.card-acts .card-cta svg{width:10px;height:10px}}
@media (max-width:1000px){.card-vis{height:48%}.card-more .card-vis{height:32%}.card-acts .card-cta,.card-open{padding:10px 8px;font-size:.84rem}}
@media (max-width:340px){.card-more .card-vis{height:22%}}
.card.sc-src .card-inner{opacity:0;transition:opacity .12s linear}
.d-t{font-size:12.5px}.d-s{font-size:12.5px;fill:rgba(255,255,255,.82)}.d-s3{font-size:12.5px;font-weight:600}
@keyframes aiTok{0%,14%{transform:none;opacity:0}16%{opacity:1;transform:none}24%{transform:translateX(calc(var(--d,1)*13px));opacity:1}26%{opacity:0;transform:translateX(calc(var(--d,1)*13px))}52%{opacity:0;transform:translateX(calc(var(--d,1)*99px))}54%{opacity:1;transform:translateX(calc(var(--d,1)*99px))}60%{opacity:1;transform:translateX(calc(var(--d,1)*111px))}62%,100%{opacity:0;transform:translateX(calc(var(--d,1)*111px))}}
.pc-lift.l0{--tx:-72px}.pc-lift.l1{--tx:0px}.pc-lift.l2{--tx:72px}
/* ---- cinematic stage ---- */
.deck-bg::before{content:'';position:absolute;inset:-10% 18% 18%;background:conic-gradient(from 180deg at 50% 0,transparent 42%,rgba(146,196,255,.13) 50%,transparent 58%);filter:blur(26px);transform:translateX(calc(var(--px,0)*18px));transition:transform .5s linear;pointer-events:none}
.deck-bg::after{content:'';position:absolute;inset:30% 0 0;background:radial-gradient(46% 42% at 50% 62%,rgba(90,140,255,.12),transparent 76%);pointer-events:none}
.deck-school{transform:translate(calc(var(--px,0)*-14px),calc(var(--py,0)*-8px));transition:transform .6s linear}
.deck-school-lit{transform:translate(calc(var(--px,0)*-22px),calc(var(--py,0)*-12px))}
.deck-glow{background:radial-gradient(circle 420px at var(--mx) var(--my),rgba(34,211,238,.32),rgba(124,92,255,.2) 42%,transparent 72%)}
.deck.open .card-front{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 40px rgba(var(--hue),.14),0 22px 44px -22px rgba(var(--hue),.55)}
.deck.off .sch,.deck-run:has(.deck.off) .sch{animation-play-state:paused}
.deck-head .stitle{font-size:clamp(2rem,3.6vw,3rem)}
.deck-ui{gap:10px 14px}
.deck-all{padding:9px 14px;border-radius:999px;border:1px solid rgba(var(--accent-rgb),.6);background:rgba(var(--accent-rgb),.14);color:#fff;font:600 .78rem var(--body,inherit);font-family:inherit;text-decoration:none;transition:background .2s var(--ease)}
.deck-all:hover{background:rgba(var(--accent-rgb),.28)}
/* ---- the expanded showcase ---- */
.sc{position:fixed;inset:0;z-index:9100;display:grid;place-items:center;padding:clamp(12px,2.6vw,28px)}
.sc[hidden]{display:none}
.sc-scrim{position:absolute;inset:0;background:rgba(3,5,14,.8);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
.sc-panel{position:relative;width:min(1200px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;border:1.5px solid transparent;border-radius:22px;background:linear-gradient(170deg,#121a3c,#0a0f22 70%) padding-box,linear-gradient(135deg,#e9e2ff,#8b7cf6 45%,#22d3ee 72%,#e9e2ff) border-box;box-shadow:0 50px 120px -30px #000;color:var(--text);outline:0}
.sc-p1{--hue:34,211,238}.sc-p2{--hue:167,139,250}.sc-p3{--hue:255,84,112}.sc-p4{--hue:52,211,153}
.sc-close{position:absolute;z-index:5;top:12px;inset-inline-end:12px;width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:#10162f;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;transition:background .2s var(--ease),transform .12s var(--ease)}
.sc-close:hover{background:#242c54}.sc-close:active{transform:scale(.94)}
.sc-nav{position:absolute;z-index:5;top:12px;inset-inline-end:66px;display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.82rem;font-variant-numeric:tabular-nums}
.sc-arrow{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:#10162f;color:#fff;cursor:pointer;transition:background .2s var(--ease)}
.sc-arrow:hover{background:#242c54}.sc-arrow .cta-ic{width:15px;height:15px}
.sc-prev .cta-ic{transform:scaleX(-1)}html[dir="rtl"] .sc-prev .cta-ic{transform:none}
.sc-view{display:grid;grid-template-columns:minmax(0,1.68fr) minmax(290px,1fr);min-height:min(620px,86vh)}.sc-view[hidden]{display:none}
.sc-main{min-width:0;padding:18px;display:flex;flex-direction:column;gap:10px}
.sc-stage{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#070b1b;box-shadow:0 0 0 1px rgba(var(--hue),.4),0 22px 50px -26px rgba(var(--hue),.9)}
.sc-tag{position:absolute;z-index:4;top:9px;inset-inline-end:9px;max-width:calc(100% - 18px);padding:3px 9px;border-radius:999px;background:rgba(6,10,26,.9);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:.72rem;font-weight:500;line-height:1.35}
.sc-cap{min-height:2.7em;margin:0;font-size:.95rem;line-height:1.35;color:#fff}
.sc-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sc-stepper{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.sc-step{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:5px 12px 5px 8px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.04);color:var(--muted);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .12s var(--ease)}
html[dir="rtl"] .sc-step{padding:5px 8px 5px 12px}
.sc-step i{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.1);font-style:normal;font-size:.72rem}
.sc-step:hover{color:#fff;border-color:rgba(var(--hue),.7)}.sc-step:active,.sc-focus:active,.sc-mini:active{transform:scale(.96)}
.sc-step[aria-pressed="true"]{background:rgba(var(--hue),.2);border-color:rgb(var(--hue));color:#fff}.sc-step[aria-pressed="true"] i{background:rgb(var(--hue));color:#071022}
.sc-play{flex:none;width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(255,255,255,.04);color:#fff;cursor:pointer}
.sc-play svg{width:14px;height:14px;fill:currentColor}.sc-play .ic-play{display:none}.sc-play[aria-pressed="false"] .ic-pause{display:none}.sc-play[aria-pressed="false"] .ic-play{display:block}
.sc-mini{min-height:40px;padding:6px 13px;border:1px dashed rgba(var(--hue),.65);border-radius:999px;background:none;color:#fff;font:inherit;font-size:.84rem;font-weight:600;cursor:pointer}
.sc-info{display:flex;flex-direction:column;gap:12px;min-width:0;padding:66px 26px 24px;border-inline-start:1px solid rgba(255,255,255,.08)}
.sc-kind{color:rgb(var(--hue));font-size:.86rem;font-weight:600}
.sc-info h2{margin:0;font-family:var(--display,var(--head));font-size:clamp(1.6rem,2.5vw,2.25rem);line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
.sc-lead{margin:0;color:var(--muted);font-size:.96rem;line-height:1.55}
.sc-facts{margin:0;padding:0;list-style:none;display:grid;gap:7px;font-size:.88rem;color:#fff}
.sc-facts li{padding-inline-start:13px;position:relative}.sc-facts li::before{content:'';position:absolute;inset-inline-start:0;top:.55em;width:6px;height:6px;border-radius:50%;background:rgb(var(--hue))}
.sc-case{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:48px;padding:10px 15px;border-radius:11px;background:rgb(var(--hue));color:#071022;font-weight:700;text-decoration:none;transition:filter .2s var(--ease),transform .12s var(--ease)}
.sc-case:hover{filter:brightness(1.12)}.sc-case:active{transform:scale(.98)}.sc-case .cta-ic{width:15px;height:15px}
/* real captures: chips move a camera across the screen */
.sc-stage.shots{aspect-ratio:auto;overflow:visible;background:none;box-shadow:none;border-radius:0}
.sc-pane[hidden]{display:none}.sc-shot{aspect-ratio:16/10;overflow:hidden;border-radius:12px;background:#070b1b;box-shadow:0 0 0 1px rgba(var(--hue),.4),0 22px 50px -26px rgba(var(--hue),.9)}
.sc-shot img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .75s cubic-bezier(.3,.8,.2,1)}
.sc-pane{animation:scPane .45s var(--ease)}@keyframes scPane{from{opacity:0;transform:translateY(8px) scale(.99)}}
.sc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.sc-focus{min-height:36px;padding:5px 12px;border:1px solid rgba(255,255,255,.14);border-radius:9px;background:rgba(255,255,255,.04);color:var(--muted);font:inherit;font-size:.82rem;font-weight:500;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease)}
.sc-focus:hover{color:#fff}.sc-focus[aria-pressed="true"]{background:rgba(var(--hue),.18);color:#fff;box-shadow:inset 0 0 0 1px rgba(var(--hue),.8)}
/* receptionist illustration */
.aisim{display:grid;grid-template-columns:1.1fr 1fr;gap:12px;padding:44px 14px 14px;background:radial-gradient(70% 90% at 20% 0,rgba(var(--hue),.16),transparent 70%),#070b1b}
.sim-call,.sim-board{display:flex;flex-direction:column;gap:11px;min-width:0}
.sim-head{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.82rem}
.sim-ph{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:rgba(var(--hue),.2);box-shadow:0 0 0 1px rgb(var(--hue))}.sim-ph svg{width:16px;height:16px;fill:rgb(var(--hue))}
.aisim[data-step="0"] .sim-ph{animation:simRing 1.1s ease-out infinite}@keyframes simRing{to{box-shadow:0 0 0 12px rgba(var(--hue),0)}}
.b{margin:0;max-width:94%;padding:10px 13px;border-radius:13px;font-size:clamp(.84rem,1.3vw,1.04rem);line-height:1.3}.b-r{align-self:flex-start;background:rgba(var(--hue),.2);color:#fff}.b-c{align-self:flex-end;background:rgba(255,255,255,.1);color:#fff}
.sim-f{margin:0;display:grid;gap:5px}.sim-f div{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:9px;background:rgba(255,255,255,.05);font-size:clamp(.84rem,1.25vw,1rem)}.sim-f dt{color:var(--muted)}.sim-f dd{margin:0;font-weight:600;color:#fff}
.sim-rule{margin:0;padding:10px 12px;border-radius:9px;background:rgba(52,211,153,.14);color:#7cf0c2;font-size:.92rem;font-weight:600}
.sim-cal{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:9px;background:rgba(255,255,255,.05);font-size:.96rem}.sim-cal b{color:#fff}
.sim-grid{display:grid;grid-template-columns:repeat(4,16px);gap:3px}.sim-grid i{height:10px;border-radius:2px;background:rgba(255,255,255,.1)}.sim-grid i.on{background:rgb(var(--hue));box-shadow:0 0 8px rgb(var(--hue))}
.sim-sms{margin:0;padding:11px 14px;border-radius:16px;background:rgb(var(--hue));color:#071022;font-size:.96rem;font-weight:700;text-align:center}
.aisim .s0,.aisim .s1,.aisim .s1b,.aisim .s2,.aisim .s3,.aisim .s4{opacity:0;transform:translateY(7px);transition:opacity .4s var(--ease),transform .45s var(--ease)}
.aisim .s0{opacity:1;transform:none}
.aisim:not([data-step="0"]) .s1,.aisim:not([data-step="0"]) .s1b{opacity:1;transform:none}
.aisim[data-step="2"] .s2,.aisim[data-step="3"] .s2,.aisim[data-step="4"] .s2,.aisim[data-step="3"] .s3,.aisim[data-step="4"] .s3,.aisim[data-step="4"] .s4{opacity:1;transform:none}
.sim-fail{position:absolute;inset:0;z-index:3;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:44px 26px 20px;text-align:center;background:rgba(7,11,27,.96)}
.sim-fail b{font-size:1.3rem;color:#fff}.sim-fail p{margin:0;max-width:38ch;color:var(--muted);font-size:.95rem}
.aisim[data-path="fail"] .sim-fail{display:flex}
/* pipeline illustration */
.pipe-svg{position:absolute;inset:0;width:100%;height:100%;padding-top:18px}
.scn{opacity:0;transition:opacity .4s var(--ease)}
.pipe[data-step="0"] .sc0,.pipe[data-step="1"] .sc1,.pipe[data-step="2"] .sc2,.pipe[data-step="3"] .sc3,.pipe[data-step="4"] .sc4,.pipe[data-step="5"] .sc5,.pipe[data-step="6"] .sc6{opacity:1}
.pl{fill:#fff;font-family:var(--head);font-size:20px;font-weight:600}.ps{fill:var(--muted);font-size:16px}.pv{fill:#fff;font-family:var(--head);font-size:24px;font-weight:700}.pv.hot2{fill:rgb(var(--hue))}.pb{fill:#fff;font-size:17px;font-weight:600}
.pipe .f{fill:rgba(255,255,255,.16)}.pipe .f.hot{fill:rgba(var(--hue),.85)}.pipe .sc1 .f.dead{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.2);stroke-dasharray:3 3}.dd{fill:#fff}
.gate{fill:rgba(var(--hue),.25);stroke:rgb(var(--hue));stroke-width:2;filter:drop-shadow(0 0 8px rgb(var(--hue)))}
.pipe[data-step="1"] .gate{animation:gateSweep 3.2s ease-in-out infinite alternate}@keyframes gateSweep{from{transform:translateX(-270px)}to{transform:translateX(270px)}}
.wv{fill:rgb(var(--hue));transform-box:fill-box;transform-origin:center}.pipe[data-step="2"] .wv{animation:wv 1.1s ease-in-out infinite alternate}.pipe[data-step="2"] .wv:nth-child(3n){animation-delay:-.3s}.pipe[data-step="2"] .wv:nth-child(3n+1){animation-delay:-.6s}@keyframes wv{from{transform:scaleY(.45)}to{transform:scaleY(1.05)}}
.lift rect{fill:rgb(var(--hue));filter:drop-shadow(0 0 8px rgb(var(--hue)))}.pipe[data-step="3"] .lift rect{animation:liftUp .8s cubic-bezier(.2,.9,.3,1) backwards}.pipe[data-step="3"] .lift rect:nth-child(2){animation-delay:.2s}.pipe[data-step="3"] .lift rect:nth-child(3){animation-delay:.4s}@keyframes liftUp{from{opacity:0;transform:translateY(-90px)}}
.ph-b{fill:#0c1330;stroke:rgba(var(--hue),.8);stroke-width:2}.ph-s{fill:rgba(var(--hue),.24)}.ph-c{fill:rgba(255,255,255,.8)}.ph-w{fill:#ffe45c}.ph-p{fill:#fff}
.pipe[data-step="4"] .ph-w{animation:phW 2.2s steps(3) infinite}@keyframes phW{to{transform:translateX(48px)}}
.pipe[data-step="4"] .ph{animation:phIn .6s cubic-bezier(.2,.9,.3,1) backwards}
@keyframes phIn{from{opacity:0}}
.rv{fill:rgba(255,255,255,.05);stroke:rgba(var(--hue),.6)}.rb{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.25)}.rb.ok{fill:rgba(52,211,153,.3);stroke:#34d399}
.tr{fill:rgba(255,255,255,.05)}.bar{transform-box:fill-box;transform-origin:0 50%}.b1{fill:rgba(255,255,255,.4)}.b2{fill:rgb(var(--hue))}
html[dir="rtl"] .pipe-svg{direction:ltr}
.pipe[data-step="6"] .b1{animation:bar1 5s linear both}@keyframes bar1{from{transform:scaleX(0)}}.pipe[data-step="6"] .b2{animation:bar1 .15s linear both}
/* ---- tablet and phone ---- */
@media (max-width:960px){.sc{padding:10px}.sc-view{grid-template-columns:1fr}.sc-main{padding:62px 14px 8px}.sc-info{padding:12px 16px 20px;border:0}.sc-case{margin-top:6px}.sc-info h2{font-size:1.6rem}.sc-nav{inset-inline-end:auto;inset-inline-start:12px}.sc-tag{top:7px;inset-inline-end:7px;font-size:.68rem}.sc-cap{min-height:3.9em}}
@media (max-width:640px){.sc{padding:0}.sc-panel{height:100%;max-height:none;border-radius:0;border:0;background:#0a0f22}.sc-close{position:fixed;top:10px;inset-inline-end:12px}.sc-nav{position:fixed;top:10px;inset-inline-start:12px}.sc-scrim{display:none}.sc-stepper{flex-wrap:nowrap;overflow-x:auto;margin-inline:-14px;padding-inline:14px;scrollbar-width:none}.sc-step{flex:none}.sc-step{min-height:44px}.sc-focus{min-height:42px}.aisim{grid-template-columns:1fr;padding:38px 12px 12px;min-height:420px}.sc-stage.aisim{aspect-ratio:auto}.sc-stage.pipe{aspect-ratio:4/3}.sc-stage.shots{aspect-ratio:auto}.sc-shot{aspect-ratio:4/3}.b{font-size:.86rem}
.gal-panel{padding:12px 12px}.gal-head{margin-bottom:6px;padding-inline-end:44px;gap:2px 8px}.gal-head h3{font-size:1.12rem}.gal-head p,.gal-head .gh-stats{display:none}.gal-filter{flex-wrap:nowrap;overflow-x:auto;margin-inline:-12px 0;padding-inline:12px;scrollbar-width:none;gap:6px}.gal-chip{flex:none;min-height:40px;font-size:.8rem}.gal-count{flex:none}.gal-row .thumb{aspect-ratio:16/10}.gal-row .body{padding:8px 9px 22px}}
@media (prefers-reduced-motion:reduce) and (min-width:1001px){.deck,.deck.live{display:grid;grid-template-columns:repeat(auto-fit,var(--cw));justify-content:center;gap:var(--gap);width:min(100%,1300px);height:auto;padding-inline:22px}.deck .card{position:relative;left:auto;top:auto;margin:0;width:auto;aspect-ratio:5/7}.deck::before{display:none}}
@media (prefers-reduced-motion:reduce){.sc-pane,.sc-shot img,.aisim *,.scn,.scn *{animation:none!important;transition:none!important}.deck-school,.deck-bg::before{transform:none;transition:none}.pipe[data-step="6"] .bar{animation:none}}

/* the open gallery never exceeds the viewport, whatever the filter row wants */
.gallery.open{grid-template-columns:minmax(0,1fr);justify-items:center}
.gal-panel{min-width:0;max-width:100%}.gal-grid,.gal-filter{min-width:0;max-width:100%}
/* resting cards read as complete pictures between beats of their loops */
@keyframes aiP0{0%,28%{opacity:.62}32%,94%{opacity:1}100%{opacity:.62}}@keyframes aiP1{0%,36%{opacity:.62}40%,94%{opacity:1}100%{opacity:.62}}@keyframes aiP2{0%,44%{opacity:.62}48%,94%{opacity:1}100%{opacity:.62}}
@keyframes pcPh{0%,46%{opacity:.68;transform:translateY(2px)}51%,92%{opacity:1;transform:none}100%{opacity:.68}}
.av-spot{box-shadow:0 0 0 1px rgba(var(--hue),.9),0 0 18px rgba(var(--hue),.5),0 0 0 200px rgba(5,7,16,.14)}
@media (prefers-reduced-motion:reduce) and (min-width:1001px){.deck,.deck.live{margin-block-start:18px}}
/* the lift uses individual properties on the card-inner, whose origin is its own centre. translateZ made Firefox miss links, and scaling .card pushed it away from the fan pivot */
.deck.open .card:hover .card-inner,.deck.forced .card:hover .card-inner,.deck.forced-focus .card:hover .card-inner,.deck.dealt .card.in:hover .card-inner,.card:focus-within .card-inner,.card.lift .card-inner{transform:rotateX(var(--rx)) rotateY(calc(var(--fi)*180deg + var(--ry)))}
.card-inner{transition:transform .45s var(--ease),scale .28s var(--ease),translate .28s var(--ease)}
.deck.open .card:hover .card-inner,.deck.forced .card:hover .card-inner,.deck.forced-focus .card:hover .card-inner,.deck.dealt .card.in:hover .card-inner,.card:focus-within .card-inner,.card.lift .card-inner{scale:1.07;translate:0 -6px}
@media (max-width:1000px){.deck.dealt .card.in:hover .card-inner,.card:focus-within .card-inner,.card.lift .card-inner{scale:1.02;translate:none}}
@media (prefers-reduced-motion:reduce){.card-inner{transition:none}}

/* ---- the card back: ink, engraved waves, two sharks circling inside the O of the seal; a foil layer catches the light as cards move ---- */
.card-back{box-shadow:0 1px 0 rgba(198,214,255,.42),0 2px 0 #0b1138,0 3px 0 rgba(150,170,240,.22),0 28px 50px -22px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.07)}
.cb-art{position:absolute;inset:0;width:100%;height:100%;display:block}
.cb-foil{position:absolute;inset:0;overflow:hidden;pointer-events:none;-webkit-mask:url(/assets/work/card-back-foil.webp) center/100% 100% no-repeat;mask:url(/assets/work/card-back-foil.webp) center/100% 100% no-repeat}
.cb-foil::before{content:'';position:absolute;inset:-10% auto -10% 0;width:60%;background:linear-gradient(100deg,transparent,rgba(127,230,245,.7) 32%,#fff 50%,rgba(201,191,253,.85) 68%,transparent);transform:translate3d(calc((var(--sheen-n,.5)*90 + var(--fan)*140 + var(--row)*110 + var(--scr,0)*260 + var(--i)*22 - 170)*1%),0,0) skewX(-14deg)}
.card-back::after{background:radial-gradient(90% 60% at 50% -10%,rgba(150,190,255,.1),transparent 60%),linear-gradient(115deg,transparent calc(var(--sheen) - 24%),rgba(255,255,255,.07) calc(var(--sheen) - 4%),rgba(255,255,255,.02) var(--sheen),transparent calc(var(--sheen) + 14%))}
.card-back::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.6),inset 0 0 26px rgba(4,8,30,.7)}
@media (prefers-reduced-motion:reduce){.cb-foil::before{transform:translate3d(70%,0,0) skewX(-14deg)}}
@media print{.cb-foil{display:none}}
/* each face also fades at the edge-on moment of the flip, so no engine can show a mirrored front if it ignores backface-visibility */
.card{--fv:clamp(0,calc((var(--fi) - .5)*1000),1)}
.card-front{opacity:var(--fv)}.card-back{opacity:calc(1 - var(--fv))}
.card-face{transition:opacity .01s linear .22s,filter .3s var(--ease)}
.deck.scrubbing .card-face{transition:filter .3s var(--ease)}
@media (max-width:1000px){.card-face{transition:opacity .01s linear .35s}.deck.dealt .card-face{transition-delay:calc(.8s + var(--i)*90ms)}}
@media (prefers-reduced-motion:reduce){.card-face{transition:none}}

/* landscape phones: the stage and the words side by side, each fitting the height, with close and next always in reach */
@media (max-height:520px) and (min-width:560px){.sc{padding:0}.sc-panel{height:100%;max-height:none;overflow:hidden;border-radius:0;border:0;background:#0a0f22}.sc-scrim{display:none}.sc-view{height:100%;min-height:0;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}.sc-main{min-height:0;height:100dvh;overflow:auto;padding:8px 10px 8px;gap:6px}.sc-info{min-height:0;height:100dvh;overflow:auto;padding:54px 14px 12px;border:0}.sc-info h2{font-size:1.25rem}.sc-lead{font-size:.88rem;line-height:1.42}.sc-facts{font-size:.84rem;margin-block:6px}.sc-case{margin-top:6px;margin-bottom:10px}.sc-stage{aspect-ratio:auto;height:calc(100dvh - 118px);min-height:150px}.sc-stage.shots{height:auto}.sc-stage.aisim{min-height:0;height:calc(100dvh - 118px);overflow:auto}.sc-shot{max-height:calc(100dvh - 118px);aspect-ratio:auto}.sc-cap{min-height:0}.sc-stepper,.sc-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.sc-step,.sc-focus{flex:none}.sc-close{position:fixed;top:6px;inset-inline-end:8px}.sc-nav{position:fixed;top:6px;inset-inline-end:60px;inset-inline-start:auto}.sc-tag{display:none}}