/* * The introduction film, and the player it opens in. * * Loaded only by the home page, alongside book.css and intro.css. Everything here hangs off the * Index.cshtml renders closed: with the stylesheet and without video-intro.js * the markup is an inert, invisible dialog, which is the same fallback intro.css already relies on. * * The open/close transition is *not* here. It is a FLIP -- the player grows out of the rectangle the * book's front cover occupies on screen, and only book.js knows where that is -- so the transform * keyframes are built at run time by video-intro.js and played through the Web Animations API. What * this file owns is where the player comes to rest, the perspective that transition is seen through, * and every piece of chrome inside it. */ /* ================================================================ * 1. The dialog, the backdrop, the shell * ================================================================ */ .vp { /* A is centred by its own UA margins; these override that with a box that fills the viewport, so .vp__shell can be laid out in the middle of it and measured by the FLIP without the dialog's own size changing under the animation. */ position: fixed; inset: 0; inline-size: 100%; max-inline-size: 100%; block-size: 100%; max-block-size: 100%; margin: 0; padding: clamp(var(--space-3), 3vh, var(--space-7)); border: 0; background: transparent; overflow: hidden; /* The shell arrives out of the book, which is lying at 60 degrees on a desk. Without a perspective on the containing element the rotateX video-intro.js animates is an affine squash and reads as a rendering fault rather than as a plane turning to face the viewer. */ perspective: 1800px; perspective-origin: 50% 42%; direction: rtl; color: var(--color-text); font-family: var(--font-body); } /* `display` is set here and *only* here, behind [open] -- the same shape .intro[open] uses, and for a reason that is easy to get wrong. A closed is hidden by `dialog:not([open]) { display: none }` in the user-agent stylesheet, and an author declaration beats a user-agent one whatever the specificity says: putting `display: grid` on the bare `.vp` above would override it and paint the player over the page from the moment it loads, without showModal() ever being called. Which then looks like a second, unrelated bug -- the close button appears dead, because dismiss() correctly refuses to close a dialog that was never open. */ .vp[open] { display: grid; place-items: center; } .vp::backdrop { background: rgb(4 9 7 / 78%); backdrop-filter: blur(14px) saturate(0.85); -webkit-backdrop-filter: blur(14px) saturate(0.85); animation: vp-backdrop 380ms ease both; } .vp[data-closing]::backdrop { animation: vp-backdrop 300ms ease reverse both; } @keyframes vp-backdrop { from { opacity: 0; } to { opacity: 1; } } /* The player itself. * * The film's own shape first, then bounded by both axes, so it fills whatever the viewport actually * gives it: on a wide desktop the height runs out first and the width follows from the ratio; on a * phone held upright the width runs out first and the box is short. `min()` on the inline size * rather than a media query, because the constraint is continuous and a breakpoint would only * approximate it. * * ---- on 3 / 2, and on the 1176px ---- * * intro.mp4 is 1176x784, which is exactly 3:2. This box was 16/9 to begin with, which is wider, and * `object-fit: contain` did the honest thing with the mismatch -- it letterboxed the film with a * pillar of black down each side. The two numbers below are the film's, so there is nothing to * letterbox: the shell *is* the picture. * * The cap is the film's own width rather than a round 1280 for the same reason. Past 1176 every * extra pixel is upscaled, and a 3:2 film stretched to fill a wide monitor is softer than the same * film shown at the size it was made. Raise it if a bigger, slightly softer picture is the better * trade on a large screen -- it is the one number here that is a judgement rather than a fact. * * Both of these follow the file. If intro.mp4 is ever re-encoded at another shape, this rule and the * portrait one below are what have to change with it. */ .vp__shell { position: relative; inline-size: min(100%, 1176px, calc((100vh - 2 * clamp(12px, 3vh, 48px)) * 3 / 2)); aspect-ratio: 3 / 2; max-block-size: 100%; border-radius: var(--radius-lg); overflow: hidden; background: #05100b; box-shadow: 0 40px 120px rgb(0 0 0 / 70%), 0 0 0 1px rgb(255 255 255 / 8%), 0 0 90px color-mix(in oklab, var(--color-accent) 12%, transparent); will-change: transform, opacity; } /* Fullscreen is the shell, not the