/* In the app: a pinned stage where a stack of real phones (the .device in grid.css) stands
   up, fans into a row and steps through the app one screen at a time as you scroll. On
   every screen the visitor picks a theme, which re-skins every phone. assets/showcase.js writes
   one transform per phone (plus its sheen) per frame; nothing here animates layout. */
/* --sc-accent2: the theme's second colour, from the app's colour system (accent2 of each dark palette; Chrome Steel,
   not in it, takes the site's light steel), for the second ring of a theme pick (ripple-gl.js) */
.showcase{--sc-accent:143 179 203;--sc-accent2:221 229 234;--sc-shade-tone:0 0 0;--sc-shade-depth:1;position:relative;height:440svh}
.showcase[data-theme="toraGold"]{--sc-accent:198 161 91;--sc-accent2:231 199 131}
.showcase[data-theme="jade"]{--sc-accent:76 189 136;--sc-accent2:154 217 183}
.showcase[data-theme="ferrari"]{--sc-accent:200 35 27;--sc-accent2:187 167 143;--sc-shade-tone:60 8 6;--sc-shade-depth:.55}
.showcase[data-theme="celestial"]{--sc-accent:91 140 255;--sc-accent2:109 211 255}
.showcase[data-theme="frostedEspresso"]{--sc-accent:196 150 110;--sc-accent2:185 133 92}
.showcase[data-theme="mattePearl"],.showcase[data-theme="mono"]{--sc-accent:200 204 210}
/* A light theme dims toward a deep shade of its own colour, not grey, and not as far. */
.showcase[data-theme="darling"]{--sc-accent:239 108 147;--sc-accent2:255 122 67;--sc-shade-tone:58 20 38;--sc-shade-depth:.55}

.sc-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  padding:calc(var(--header-h) + var(--space-6)) var(--gutter-wide) 4.75rem}
.sc-head{max-width:var(--container-wide);width:100%;margin:0 auto;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-8);flex-wrap:wrap}
.sc-head h2{font-family:var(--display);font-weight:500;letter-spacing:-.015em;font-size:var(--text-h2);line-height:1.1}
.sc-head > p{max-width:24ch;color:var(--body);font-size:var(--text-body);line-height:1.6}

.sc-stage{container-type:size;position:relative;perspective:100rem;perspective-origin:50% 40%;display:grid;place-items:center;min-height:0;will-change:transform,opacity}
.sc-stage::before{content:"";position:absolute;left:50%;top:55%;width:min(70rem,140vw);aspect-ratio:2.4;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgb(var(--sc-accent) / .18),rgb(var(--sc-accent) / .05) 55%,transparent);opacity:var(--sc-glow,0);transition:background .8s ease}
.sc-phone{--pw:min(19rem,calc(94cqh * 71.9 / 150),62cqw);grid-area:1/1;position:relative;width:var(--pw);margin:0;transform-style:preserve-3d;will-change:transform,opacity}
.sc-phone .device{width:100%}
/* The shadow a phone throws on whatever is under it; darkest while they are stacked. */
.sc-cast{position:absolute;inset:0;border-radius:calc(var(--pw) * .188);pointer-events:none;background:#000;transform:translateZ(calc(var(--pw) * -.06)) translate3d(0,4%,0);
  box-shadow:0 2.5rem 5rem 1rem rgb(var(--c-black) / .9);opacity:.4;will-change:opacity}

.sc-foot{max-width:var(--container-wide);width:100%;margin:0 auto;display:grid;justify-items:center;gap:var(--space-4)}
.sc-caps{display:grid;width:min(36rem,100%);text-align:center;align-items:start;justify-items:center}
.sc-cap{grid-area:1/1;width:100%;opacity:0;will-change:opacity,transform}
.sc-cap[aria-hidden="true"]{pointer-events:none}
.sc-cap h3{font-family:var(--sans);font-weight:600;font-size:var(--text-lg);color:var(--ink);margin-bottom:var(--space-1)}
.sc-cap p{color:var(--body);font-size:var(--text-body);line-height:1.55;margin-inline:auto;max-width:44ch}

/* Theme picker: flat colour swatches, all one size, Darling and TORA Gold first. */
.sc-picker{grid-area:2/1;display:grid;justify-items:center;gap:var(--space-2);margin-top:var(--space-4);
  transform-origin:50% 0;transition:transform .45s var(--rev-ease);will-change:transform}
.sc-picker.is-compact{transform:scale(.9)}
.sc-picker[aria-hidden="true"]{pointer-events:none}
@media(min-width:1200px){.sc-picker{transform-origin:0 0}}
@media(prefers-reduced-motion:reduce){.sc-picker{transition:none}}
/* captain 2026-10-18: "one row ... more tactile, almost like a slider-esque idea". The swatches sit in one
   capsule rail, never wrapping, and a light knob slides from swatch to swatch on the same springs as the
   screen tabs (elastic-knob.js: it stretches toward where it is going and settles with a small swing). A
   drag along the rail scrubs through the themes like a slider (showcase.js). */
.sc-themes{position:relative;isolation:isolate;display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;padding:.25rem;
  background:rgb(var(--c-white) / .06);touch-action:pan-y;cursor:grab}
.sc-themes.is-dragging{cursor:grabbing}
/* the knob is a ring drawn tight around the picked swatch, centred on it (captain 2026-10-18: "the outline is
   too big and it's not centered enough"); it still slides and stretches between swatches like a slider */
/* the knob is a ring around the picked swatch, centred on it with a small gap (captain 2026-10-18: "the outline
   is too big and it's not centered enough"); it still slides and stretches between swatches like a slider */
.sc-tknob{position:absolute;z-index:1;left:0;top:0;width:0;height:0;pointer-events:none;
  outline:2px solid rgb(238 243 246);outline-offset:2px;will-change:transform,width}
.sc-themes:not(.has-knob) .sc-tknob{display:none}
.sc-theme{display:grid;place-items:center;width:2.5rem;height:2.5rem;flex:none;padding:0;border:0;border-radius:50%;background:none;cursor:inherit}
/* swatches are large enough that the Zero Two and SVJ art inside reads (captain 2026-10-18), and their size never
   depends on the knob being set up, so the ring is always measured on the swatch as drawn */
.sc-swatch{display:block;width:min(2.25rem,calc(100% - .5rem));height:auto;aspect-ratio:1;border-radius:50%;background:var(--swatch);overflow:hidden;
  box-shadow:0 0 0 1px rgb(var(--c-white) / .14);transition:transform .35s var(--rev-ease),box-shadow .35s ease}
/* only a swatch that is not picked grows under the pointer, so the one being picked has nothing to settle from */
.sc-theme:not([aria-checked="true"]):hover .sc-swatch{transform:scale(1.08)}
.sc-theme[aria-checked="true"] .sc-swatch{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--swatch)}
/* with the knob, the chosen swatch sits in it, a little smaller, like a dial's cap */
.sc-themes.has-knob .sc-theme[aria-checked="true"] .sc-swatch{box-shadow:none;transform:none}
.sc-swatch img{display:block;width:100%;height:100%;opacity:0;transition:opacity .3s ease}
/* the Easter eggs: Darling shows Zero Two, Ferrari its SVJ, only while picked */
.sc-theme:is([data-theme="darling"],[data-theme="ferrari"])[aria-checked="true"] .sc-swatch img{opacity:1}
.sc-theme:focus-visible{outline:2px solid var(--cyan);outline-offset:0}
.sc-theme-name{font:500 var(--text-sm)/1.2 var(--sans);color:var(--body)}
.sc-theme-name b{font-weight:600;color:var(--ink);margin-right:var(--space-1)}

.sc-ticks{display:flex;gap:var(--space-1);padding:var(--space-1);border-radius:var(--radius-pill);background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid var(--hairline)}
.sc-ticks button{position:relative;isolation:isolate;min-height:var(--hit-min);padding:0 var(--space-4);border:0;border-radius:var(--radius-pill);background:none;color:var(--body);
  font:500 var(--text-sm) var(--sans);cursor:pointer;transition:color var(--dur) ease}
.sc-ticks button::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--surface-raised);opacity:0;transform:scale(.9);
  transition:opacity .35s var(--rev-ease),transform .35s var(--rev-ease);z-index:-1}
.sc-ticks button[aria-current="true"]{color:var(--ink)}
.sc-ticks button[aria-current="true"]::before{opacity:1;transform:none}
.sc-ticks button:hover{color:var(--ink)}
/* captain 2026-10-14: make the chosen screen obvious and slide to it. One light pill (the same one Everything
   in Tora uses) rides behind the tabs; assets/elastic-knob.js moves it on springs. The tab's own fill stays
   as the no-script fallback. */
.sc-ticks{position:relative;isolation:isolate}
.sc-knob{position:absolute;z-index:-1;left:0;top:0;width:0;height:0;border-radius:var(--radius-pill);pointer-events:none;
  background:linear-gradient(180deg,#f7fafc,#e0e8ee);box-shadow:inset 0 1px 0 #fff,0 .375rem 1rem -.375rem rgb(0 0 0 / .6);will-change:transform,width}
.sc-ticks:not(.has-knob) .sc-knob{display:none}
.sc-ticks.has-knob button::before{display:none}
.sc-ticks.has-knob button{z-index:1;isolation:auto}
.sc-ticks.has-knob button[aria-current="true"]{color:#0b0d10}
/* with ink the pill sits over the tabs and carries their dark copy; the tabs underneath keep one colour */
.sc-ticks.has-ink .sc-knob{z-index:2;overflow:hidden}
.sc-ticks.has-ink button[aria-current="true"]{color:var(--body)}
.sc-knob .knob-ink{position:absolute;left:0;top:0;will-change:transform}
.sc-knob .knob-ink span{position:absolute;display:grid;place-items:center;white-space:nowrap;font:500 var(--text-sm)/1 var(--sans);color:#0b0d10}
@media(max-width:820px){.sc-knob .knob-ink span{font-size:var(--text-xs)}}
.sc-ticks.has-knob button:not([aria-current="true"]):hover{color:var(--ink)}
.sc-ticks button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* Desktop: the heading sits beside the phones, not above them, so they can be taller. */
@media(min-width:821px){
  .sc-pin{grid-template-rows:minmax(0,1fr) auto}
  .sc-head{position:absolute;z-index:1;top:calc(var(--header-h) + var(--space-6));left:0;right:0;padding:0 var(--gutter-wide);pointer-events:none}
}
@media(max-width:820px){
  .sc-pin{padding:calc(var(--header-h) + var(--space-2)) var(--gutter-wide-sm) 4.5rem}
  .sc-head{justify-content:center;text-align:center}
  .sc-head .kicker{justify-content:center}
  .sc-head > p{display:none}
  .sc-ticks button{padding:0 var(--space-3);font-size:var(--text-xs)}
}
/* Phones: two edge slabs per phone instead of six, and no slab shadow (each phone's cast
   shadow already grounds it). Five phones of six blurred slabs each cost iPhone Safari
   thirty extra 3D layers; at this size two still read as the edge's thickness. */
@media(max-width:820px){
  .sc-phone .slab:not(:nth-of-type(3)):not(:last-of-type){display:none}
  .sc-phone .slab:last-of-type{box-shadow:none}
}
@media(max-width:820px){
  .sc-phone{--pw:min(19rem,calc(80cqh * 71.9 / 150),58cqw)}
  .sc-cap p{font-size:var(--text-sm);line-height:1.45}
  .sc-cap h3{font-size:var(--text-base)}
  .sc-stage{margin-top:var(--space-4)}
}
/* a closer camera, so the inward turn of the side phones reads with Apple-like depth */
.sc-stage{perspective:calc(var(--pw-stage,19rem) * 3.4);perspective-origin:50% 45%}
@media(max-width:820px){.sc-stage{--pw-stage:12rem}}
/* vertical page scrolling stays native on the phones; sideways swipes step between them */
.sc-stage{touch-action:pan-y}
/* Phones: give the phones the height. One row of swatches, no theme-name line (the checked
   swatch says it), tighter spacing, and the phones may use nearly the whole stage. */
@media(max-width:820px){
  /* Keep the screen tabs above the fixed bottom blur, including Safari's changing viewport. */
  .sc-pin{padding-bottom:calc(4.5rem + var(--space-6))}
  .sc-phone{--pw:min(19rem,calc(96cqh * 71.9 / 150),60cqw)}
  .sc-foot{gap:var(--space-3)}
  .sc-picker{margin-top:var(--space-2)}
  /* seven themes (captain 2026-10-14, Matte Pearl and Mono dropped as redundant) leave room for
     wider touch targets in the one row */
  .sc-theme{width:clamp(2.25rem,11.5vw,2.75rem);height:2.75rem}
  .sc-theme-name{display:none}
  .sc-stage{margin-top:var(--space-2)}
}
/* the 3D phones (showcase.js): one canvas over the stage; the CSS phones stay underneath */
.sc-canvas3d{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;opacity:0;transition:opacity .35s ease}
.showcase.sc-loading .sc-phone{visibility:hidden}
.sc-phone .device,.showcase.has-3d .sc-cast{transition:opacity .35s ease}
.showcase.has-3d .sc-canvas3d{opacity:1}
.showcase.has-3d .sc-phone .device,.showcase.has-3d .sc-phone .sc-cast{opacity:0!important}
.showcase.has-3d .sc-phone{visibility:hidden;transition:visibility 0s .35s}
@media(prefers-reduced-motion:reduce){
  .sc-canvas3d,.sc-phone .device,.sc-phone .sc-cast,.showcase.has-3d .sc-phone{transition:none}
}
/* look 17: the row can be dragged; a side phone is a button */
.sc-stage{cursor:grab;user-select:none;-webkit-user-select:none}
.sc-stage.grabbing{cursor:grabbing}
.sc-stage.side{cursor:pointer}
/* round 18: the theme glow is a plain colour under a fixed radial mask, so a theme change is a
   smooth colour transition (a gradient cannot be transitioned; it snapped and lagged on fast picks) */
.sc-stage::before{background:rgb(var(--sc-accent))!important;transition:background-color .45s ease!important;
  -webkit-mask:radial-gradient(closest-side,rgb(0 0 0 / .18),rgb(0 0 0 / .05) 55%,transparent);mask:radial-gradient(closest-side,rgb(0 0 0 / .18),rgb(0 0 0 / .05) 55%,transparent)}

/* a picked theme spreads out from its swatch like ink: a disc of its colour with a brighter rim, scaled up
   from a small layer (so its memory stays small on a phone), then gone (showcase.js) */
.sc-burst{position:fixed;left:0;top:0;z-index:0;width:18rem;height:18rem;margin:-9rem 0 0 -9rem;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgb(var(--burst) / .13) 0%,rgb(var(--burst) / .17) 86%,rgb(var(--burst) / .42) 95%,rgb(var(--burst) / 0) 100%);
  opacity:0;will-change:transform,opacity;animation:scBurst 1.25s cubic-bezier(.22,1,.36,1) forwards}
@keyframes scBurst{0%{opacity:1;transform:translate3d(var(--bx),var(--by),0) scale(.08)}
  55%{opacity:.9}
  100%{opacity:0;transform:translate3d(var(--bx),var(--by),0) scale(var(--bs,9))}}
/* the colour behind the phones swells in with a new theme, a little brighter at first, then settles */
.sc-spill.swell{animation:scSwell 1.3s cubic-bezier(.2,.8,.25,1) both}
@keyframes scSwell{0%{opacity:0;transform:translate(-50%,-50%) scale(.78)}
  38%{opacity:calc(.56 * var(--accent,1))}
  100%{opacity:calc(.42 * var(--accent,1));transform:translate(-50%,-50%) scale(1)}}
@media(prefers-reduced-motion:reduce){.sc-burst{display:none}.sc-spill.swell{animation:none}}
/* the moving colour field behind the phones (assets/ripple-gl.js), drawn small and scaled up; it takes over from the
   CSS spill once it runs */
.sc-ripple{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.showcase.has-ripple .sc-spill{display:none}