/* "And the rest of it": a glass prism that turns with the scroll.
   Layers inside the pinned stage, back to front: the back canvas (glass body, floor,
   light), the CSS 3D faces carrying the notch cards, the front canvas (reflections
   and edges), then the words. prism.js writes every --pr-* value from one camera. */

.prism { position: relative; background: var(--sc-canvas); color: var(--sc-ink); }

/* The engine makes the stage sticky, 100svh tall and clipped. Never set position here. */
.prism .prism__stage {
  isolation: isolate;
  background:
    radial-gradient(46% 30% at var(--pr-cx, 64%) var(--pr-floor, 74%), rgb(255 211 161 / 0.06), transparent 72%),
    linear-gradient(180deg, #0B0E1A 0%, #0D1121 38%, #0E1325 62%, #0B0E1A 100%);
}

.prism .prism__gl {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  pointer-events: none; opacity: 0; transition: opacity 700ms var(--sc-ease-out);
}
.prism.prism--gl .prism__gl { opacity: 1; }
.prism .prism__gl--back { z-index: 0; }
/* The stage meets the page ground cleanly at both ends while it slides in and out. */
.prism .prism__stage::before, .prism .prism__stage::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none;
}
.prism .prism__stage::before { top: 0; height: calc(var(--menubar-h) + 56px); background: linear-gradient(180deg, var(--sc-canvas) 0%, var(--sc-canvas) 40%, transparent); }
.prism .prism__stage::after { bottom: 0; height: 90px; background: linear-gradient(0deg, var(--sc-canvas), transparent); }
.prism .prism__gl--front { z-index: 2; }

/* The CSS camera. prism.js matches the WebGL camera to it: same eye, same distance. */
.prism .prism__scene {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  perspective: var(--pr-d, 1200px);
  perspective-origin: var(--pr-ox, 64%) var(--pr-oy, 18%);
}

/* A face: a small Mac screen. The notch hangs from its top edge, below a menu bar. */
.prism .prism__face {
  position: absolute; left: var(--pr-ox, 64%); top: var(--pr-oy, 18%);
  width: var(--pr-fw, 600px); height: var(--pr-fh, 372px);
  margin-left: calc(var(--pr-fw, 600px) / -2); margin-top: calc(var(--pr-fh, 372px) / -2);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  will-change: transform;
}
.prism .prism__screen { position: absolute; inset: 0; }
.prism .prism__bar {
  position: absolute; left: 0; right: 0; top: 0; height: var(--pr-bar, 32px);
  background: linear-gradient(180deg, rgb(4 6 12 / 0.72), rgb(8 11 20 / 0.6));
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / 0.05);
}
.prism .prism__notch { position: absolute; top: 0; left: var(--pr-nl, 0px); }

/* Before the glass loads, and wherever WebGL is missing: a CSS finish on the same prism.
   It crossfades out as the WebGL glass fades in. */
.prism .prism__screen { transition: opacity 700ms var(--sc-ease-out); }
.prism.prism--gl .prism__screen { opacity: 0; }
.prism .prism__screen {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.07), transparent 30%),
    linear-gradient(168deg, rgb(196 210 255 / 0.10) 0%, rgb(196 210 255 / 0.035) 46%, rgb(255 211 161 / 0.05) 100%);
  box-shadow:
    inset 0 0 0 1px rgb(222 230 255 / 0.16),
    inset 0 1px 0 rgb(255 255 255 / 0.42),
    inset 0 -1px 0 rgb(255 226 196 / 0.22);
}

/* ------------------------------------------------------------------ words */
.prism .prism__head {
  position: absolute; z-index: 3; left: var(--sc-gutter);
  top: calc(var(--menubar-h) + clamp(1.25rem, 7vh, 4.5rem));
  width: var(--pr-headw, 30rem); max-width: calc(100% - 2 * var(--sc-gutter));
  display: grid; gap: var(--sc-4);
}
.prism .prism__lede { max-width: 26ch; }

.prism .prism__captions {
  position: absolute; z-index: 3; left: var(--sc-gutter);
  bottom: var(--pr-capb, clamp(3.25rem, 12vh, 7.5rem));
  width: var(--pr-col, 23rem); max-width: calc(100% - 2 * var(--sc-gutter));
  height: var(--pr-caph, 12rem);
}
.prism .prism__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  opacity: 0; transform: translate3d(0, 10px, 0); pointer-events: none;
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}
.prism .prism__caption.is-current {
  opacity: 1; transform: none;
  transition: opacity 380ms var(--sc-ease-out) 90ms, transform 520ms var(--sc-ease-out) 90ms;
}
.prism .prism__caption h3 {
  margin: 0 0 var(--sc-3);
  font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-xl);
  line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance;
}
.prism .prism__caption p {
  margin: 0; font-size: var(--sc-t-base); line-height: 1.55; color: var(--sc-ink-soft); text-wrap: pretty;
}
.prism .prism__caption--closing p {
  font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-lg);
  line-height: 1.32; letter-spacing: -0.01em; color: var(--sc-ink); text-wrap: balance;
}


.prism .prism__note {
  position: absolute; z-index: 3; left: var(--sc-gutter); bottom: clamp(1rem, 3.2vh, 1.75rem);
  margin: 0; font-size: var(--sc-t-xs); color: rgb(163 171 194 / 0.86);
}

/* Narrow and tall screens: words above and below the prism instead of beside it. */
.prism [data-layout="stack"] .prism__captions { right: var(--sc-gutter); width: auto; top: var(--pr-capt, 60%); bottom: auto; }
.prism [data-layout="stack"] .prism__caption { top: 0; bottom: auto; }
.prism [data-layout="stack"] .prism__lede { max-width: 34ch; }

@media (max-width: 560px) {
  .prism .prism__head { gap: var(--sc-2); top: calc(var(--menubar-h) + 1.25rem); }
  .prism .prism__lede { font-size: var(--sc-t-base); }
  .prism .prism__caption h3 { font-size: 1.5rem; margin-bottom: var(--sc-2); }
  .prism .prism__caption p { font-size: 0.97rem; }
}

/* Short phones keep the heading and give the lede's room to the prism. */
@media (max-width: 560px) and (max-height: 740px) {
  .prism .prism__lede { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .prism .prism__caption, .prism .prism__caption.is-current { transform: none; transition: opacity 200ms ease-out; }
  .prism .prism__gl { transition: none; }
}