/* Exploded interface section (stage.js). One device stays stuck to the viewport while the page
   scrolls through the track. The tabs swap the device in place and do not change the scroll position. */
.stage-track { height: 300vh; position: relative; z-index: 3; background: var(--ink); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; display: grid; grid-template-columns: minmax(230px, 23%) minmax(0, 1fr) minmax(250px, 24%); gap: 20px; padding: 90px var(--gutter) 28px; background: #000; }
.stage-intro { align-self: center; position: relative; z-index: 2; }
/* Monument Extended Ultrabold has one weight and is wide, so no extra bold and normal letter spacing. The size keeps
   "EVERY SCREEN" on one line inside its column. */
.stage-intro .section-title { font-family: 'Monument', var(--body); font-size: clamp(22px, 2.15vw, 46px); font-weight: 400; letter-spacing: normal; line-height: 1.05; text-wrap: balance; }
.stage-intro .lede { margin-top: 16px; font-size: 18px; }
.stage-tabs { display: flex; gap: 8px; margin-top: 24px; }
.stage-tab { min-height: 42px; padding: 6px 18px; border: 2px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 15px; transition: background 0.2s, color 0.2s; }
.stage-tab:hover { color: var(--text); border-color: var(--text); }
.stage-tab[aria-current='true'] { background: var(--text); color: var(--ink); }

.stage-view { position: relative; perspective: 1700px; display: grid; place-items: center; }
.dev { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; opacity: var(--o, 0); visibility: hidden;
  transform: translate(-50%, -50%) translateX(calc(var(--slide, 0) * 1px)) scale(calc(var(--fit, 1) * (1 - var(--t, 0) * var(--shrink, 0.1)))) rotateX(calc(var(--t, 0) * 57deg + var(--py, 0deg))) rotateZ(calc(var(--t, 0) * -34deg + var(--px, 0deg))); }
.dev.is-on { visibility: visible; }
/* --i is the layer's height in the stack, --t how far the device is exploded, --gap the distance per layer. */
.ly { --ly-o: 1; --ly-focus: 0; position: absolute; inset: 0; border-radius: var(--r); transform-style: preserve-3d; transform: translateZ(calc(var(--i) * var(--gap) * var(--t, 0) * 1px)); box-shadow: inset 0 0 0 calc(var(--t, 0) * 1.5px + var(--ly-focus) * 0.5px) color-mix(in srgb, var(--c) calc(var(--ly-o) * 100%), transparent), 0 0 calc(var(--ly-focus) * 60px) calc(var(--ly-focus) * -6px) color-mix(in srgb, var(--c) calc(var(--ly-focus) * 100%), transparent); }
/* While walking through the layers, those above the one in focus fade smoothly to 20%, and those below it stay visible. stage.js
   tweens --ly-o and --ly-focus on each layer, and the outline, the glass and the parts all follow them. The fade is set on
   each part rather than as opacity on the 3D layer, and as a filter so it combines with the parts' own opacity animations. */
.ly > * { filter: opacity(var(--ly-o)); }
.ly-only-open { opacity: var(--t, 0); }
/* Fully out of the assembled device, whatever a browser does with opacity on a 3D layer. */
.dev.is-closed .ly-only-open { visibility: hidden; }
/* The layer in focus darkens its glass a little through --ly-focus, leaving the layers below it visible through it. */
.ly-glass { background: rgba(calc(40 - var(--ly-focus) * 32), calc(40 - var(--ly-focus) * 32), calc(48 - var(--ly-focus) * 36), calc(var(--t, 0) * (0.22 + var(--ly-focus) * 0.2) * var(--ly-o))); }
/* Blocks also scatter a little inside their layer at full explosion. */
.bk { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%); transform: translate3d(calc(var(--sx, 0) * var(--t, 0) * 1px), calc(var(--sy, 0) * var(--t, 0) * 1px), calc(var(--sz, 0) * var(--t, 0) * 1px)); }
.bk-img { object-fit: cover; border-radius: var(--br, 12px); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%); max-width: none; }
.bk-surface { background: var(--ink-3); border-radius: var(--br, 12px); }
.bk-frame { background: #08080b; border-radius: var(--r); box-shadow: 0 0 0 var(--bezel) #26262c, 0 40px 80px -20px #000; }
.bk-wire { border: 1px dashed rgba(241, 242, 255, 0.55); border-radius: 6px; background: linear-gradient(to top right, transparent calc(50% - 0.5px), rgba(241, 242, 255, 0.3) 50%, transparent calc(50% + 0.5px)); }
.bk-col { background: rgba(25, 194, 255, 0.16); border-inline: 1px solid rgba(25, 194, 255, 0.5); }
.bk-safe { border: 2px dashed var(--c); }
.bk-text { color: var(--text); font-weight: var(--fw, 400); font-size: calc(var(--fs) * 1px); line-height: 1.12; }
.bk-muted { color: var(--muted); }
.bk-btn { display: grid; place-items: center; background: var(--text); color: var(--ink); border-radius: 999px; font-weight: 600; font-size: calc(var(--fs) * 1px); }
.bk-pill { display: grid; place-items: center; border: 1px solid var(--line); background: var(--ink-2); color: var(--text); border-radius: 999px; font-size: calc(var(--fs) * 1px); }
.bk-ai { display: flex; align-items: center; gap: 8px; padding: 0 12px; background: rgba(255, 46, 136, 0.16); border: 1px solid var(--ai); color: var(--ai); border-radius: 12px; font-size: calc(var(--fs) * 1px); font-weight: 500; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* Its lower right corner meets the device's corner, so it takes the device's radius. */
.bk-zone { border-radius: 50% 50% var(--r) 0 / 60% 60% var(--r) 0; background: radial-gradient(90% 100% at 80% 100%, rgba(25, 194, 255, 0.5), rgba(25, 194, 255, 0.05)); }
.bk-ring { border: 3px solid var(--text); border-radius: var(--br, 12px); box-shadow: 0 0 24px 2px rgba(241, 242, 255, 0.7); }
.bk-target { border: 2px solid var(--ai); border-radius: 50%; animation: target 1.6s ease-out infinite; }
@keyframes target { from { transform: scale(0.7); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.bk-cursor { width: 0; height: 0; border-left: 11px solid var(--text); border-right: 11px solid transparent; border-top: 20px solid var(--text); transform: rotate(-22deg); }

/* Middle of the layer's bottom edge, the long lower diagonal once the device tilts, so the line's dot lands on the border. */
.ly-anchor { position: absolute; left: 50%; top: 100%; width: 1px; height: 1px; }
.stage-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.stage-lines line { stroke: var(--line); stroke-width: 1; }
.stage-lines line.is-active { stroke: var(--c); stroke-width: 1.5; }
.stage-lines circle { fill: var(--line); }
.stage-lines circle.is-active { fill: var(--c); }
.stage-lines line, .stage-lines circle { transition: stroke 0.2s, opacity 0.6s ease; }
.stage-lines .is-faded { opacity: 0.2; }
.stage-labels { position: relative; z-index: 2; align-self: center; margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; opacity: var(--labels, 0); }
.stage-label { padding: 7px 0 7px 14px; border-left: 2px solid var(--line); color: var(--muted); font-size: 16px; line-height: 1.3; transition: color 0.2s, border-color 0.2s; }
.stage-label b { font-weight: 500; }
.stage-label p { display: grid; grid-template-rows: 0fr; overflow: hidden; font-size: 15px; transition: grid-template-rows 0.3s var(--ease); }
.stage-label p > span { min-height: 0; }
.stage-label.is-active { color: var(--text); border-color: var(--c); }
.stage-label.is-active b { color: var(--c); }
.stage-label.is-active p { grid-template-rows: 1fr; padding-top: 3px; }
@media (max-width: 960px) {
  .stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; padding: 72px 20px 18px; gap: 6px; }
  .stage-intro .section-title { font-size: clamp(22px, 6.6vw, 34px); }
  .stage-intro .lede { display: none; }
  .stage-tabs { margin-top: 10px; }
  .stage-lines { display: none; }
  .stage-labels { min-height: 112px; align-self: start; }
  .stage-label:not(.is-active) { display: none; }
}