/* Screen dive. Measured from DUNA Digital's home hero (teardown 09-30), rewritten around our own art.
   A tall pin holds a sticky stage. Scroll zooms a "camera" into a device in the art while a real DOM page,
   warped onto the device's screen with a matrix3d homography, fades in and types itself; the warped screen
   then grows into the full stage and parks as a plain, flat page. All motion is part.js; this file is layout. */
.sdive {
  --sdive-run: 180svh;              /* scroll length of the dive (the source: 180svh) */
  --sdive-bg: #e8e5de;
  position: relative;
}
.sdive__stage {
  position: relative; height: 100svh; overflow: hidden; background: var(--sdive-bg);
}
/* the camera box: covers the stage, sized and placed by part.js; it is what zooms and pans */
.sdive__camera { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.sdive__art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sdive__copy { position: absolute; z-index: 3; }
/* the real DOM page that rides the screen. The surface (its background) gets the full projective warp; each
   [data-sdive-warp] child gets a local affine instead, so text moves with the screen but never smears. */
.sdive__screen { position: absolute; inset: 0; z-index: 5; display: none; pointer-events: none; opacity: 0; }
.sdive__surface { position: absolute; inset: 0; transform-origin: 0 0; }

/* live (JS on, motion allowed): pin the stage and show the screen */
.sdive.is-live { height: calc(100svh + var(--sdive-run)); }
.sdive.is-live .sdive__stage { position: sticky; top: 0; }
.sdive.is-live .sdive__screen { display: flex; }
.sdive.is-live.is-parked .sdive__screen { pointer-events: auto; }
/* optional: the section after the dive rides up over the parked page for the last 30% of the run */
.sdive.is-live + .sdive-next { --sdive-pull: calc(.3 * 180svh); position: relative; z-index: 2; margin-top: calc(-1 * var(--sdive-pull)); }

/* the line that fades up once typing is done (the source: 6px, .5s, house ease) */
.sdive__final { opacity: 0; translate: 0 6px; transition: opacity .5s cubic-bezier(.22, 1, .36, 1), translate .5s cubic-bezier(.22, 1, .36, 1); }
.sdive.is-typed .sdive__final { opacity: 1; translate: 0 0; }

/* typing: every line is full text from the start, revealed by clip-path; the caret rides in ch units */
.sdive__text { display: inline-block; position: relative; vertical-align: top; }
.sdive__caret { display: inline-block; width: .6ch; height: 1.25em; margin-left: 1px; opacity: 0; position: relative; z-index: 1; background: currentColor; }