/* ============================================================================ CARDS — the Work grid card, the Greatest Hits marquee, the award flare, and the outbound half of the signal-drop page transition. Split out of case.css 2026-09-22. Loaded by BOTH the home page and every /work/ page. The home page used to pull all of case.css for this: ~15KB of case-study-page rules (and one real .fig-frame collision with the hero box) on a page with no case study on it. Case-study PAGE styling stays in case.css. A rule whose selector list spans both lives here, because every page that loads case.css also loads this file. ============================================================================ */ /* ============================================================================ CASE STUDIES — shared layer for the Work grid and the case-study pages. Loads after assets/site.css. Tokens and conventions: docs/design-system/SUPERCOLOR.md Art slots, specs and what fills them: docs/case-studies-2026-09-03/10-asset-inventory-and-specs.md The shell: card = color panel (.wc-panel) + ONE art element (.wc-art: a subject cutout, a logo mark, anything transparent) + lower-third chyron. Hover contracts the panel to a circle of the photo (SUPERCOLOR §5) and the art lifts / signal-splits. click = the signal drop (§4b): the page falls to moving static and only the card's art keeps its picture, riding on top of the snow to its spot in the featured band, then losing its signal as the static clears. Cross-document View Transitions (browser- native, no router). Fallback: the channel wipe. Calm modes (reduced-motion / .a11y): plain link. slot = .cs-stage[data-art=…] "tunes in" on arrival: static burst, then the media behind the art appears. Art types: still · loop · facade · pan · anim · idents ============================================================================ */ /* ---------- WORK GRID CARDS ---------- Hover/focus is the card's live state. On touch (no hover) case.js gives .is-on to the card nearest the viewport centre as you scroll, so the one-column grid flips through the cards like channels (Phil, 2026-09-11). */ .wgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; padding-top:48px} /* headroom: art stands above the panel */ .wcard{position:relative; display:block; aspect-ratio:3/4; color:inherit; text-decoration:none; border-radius:16px; --cx:50%; --cy:54%; isolation:isolate} /* its own stacking context, so neighbours never paint over each other's art */ .wcard:focus-visible{outline:3px solid var(--focus); outline-offset:10px} .wc-panel, .wc-photo{position:absolute; inset:0; border-radius:16px; -webkit-clip-path:circle(150% at var(--cx) var(--cy)); clip-path:circle(150% at var(--cx) var(--cy)); transition:clip-path .55s cubic-bezier(.6,0,.2,1), -webkit-clip-path .55s cubic-bezier(.6,0,.2,1), opacity .3s ease} .wc-panel{background:var(--pc); z-index:1; overflow:hidden} .wc-panel .spd{position:absolute; inset:0; background:repeating-linear-gradient(120deg, transparent 0 20px, rgba(18,25,18,.26) 20px 22px); -webkit-mask:linear-gradient(120deg,#000,transparent 60%); mask:linear-gradient(120deg,#000,transparent 60%)} .wc-photo{z-index:2; opacity:0; overflow:hidden} /* the reveal window; the image inside may be larger than the card */ .wc-photo img{position:absolute; left:var(--photo-left, 0); bottom:var(--photo-bottom, 0); height:var(--photo-h, 100%); width:auto; max-width:none; display:block} .wc-photo img:not([style]){left:0; width:100%; height:100%; object-fit:cover} .wcard:hover .wc-panel, .wcard:focus-visible .wc-panel, .wcard.is-on .wc-panel, .wcard:hover .wc-photo, .wcard:focus-visible .wc-photo, .wcard.is-on .wc-photo{-webkit-clip-path:circle(40% at var(--cx) var(--cy)); clip-path:circle(40% at var(--cx) var(--cy))} .wcard:hover .wc-photo, .wcard:focus-visible .wc-photo, .wcard.is-on .wc-photo{opacity:1} /* the art: auto-sized against BOTH max constraints so its aspect is never squished (the 2026-08-13 bug was height + max-width together). Cutouts: portrait, subject touches the bottom edge. Marks/logos: centered instead — add .wc-art--mark */ .wc-art{position:absolute; left:50%; bottom:var(--art-bottom, 0); transform:translateX(-50%); width:auto; height:auto; max-height:104%; max-width:var(--art-maxw, 108%); z-index:3; pointer-events:none; filter:drop-shadow(0 12px 20px rgba(0,0,0,.42)); transition:transform .55s cubic-bezier(.6,0,.2,1), filter .4s ease} .wc-art--mark{bottom:auto; top:var(--mark-top, 38%); transform:translate(-50%,-50%); max-height:var(--mark-h, 52%); max-width:var(--mark-w, 72%)} /* hover state-change on the art: lifts, and the signal splits (chromatic fringes) */ .wcard:hover .wc-art, .wcard:focus-visible .wc-art, .wcard.is-on .wc-art{transform:translateX(-50%) translateY(-10px) scale(1.04); filter:drop-shadow(0 18px 24px rgba(0,0,0,.5)) drop-shadow(4px 0 0 color-mix(in srgb, var(--cyan) 75%, transparent)) drop-shadow(-4px 0 0 color-mix(in srgb, var(--magenta) 75%, transparent))} .wcard:hover .wc-art--mark, .wcard:focus-visible .wc-art--mark, .wcard.is-on .wc-art--mark{transform:translate(-50%,-50%) translateY(-10px) scale(1.06)} /* DE{CODE} mark = the bracket-to-flower spin (alpha video). Idle: the poster, which is the open orange flower four seconds into the loop rather than the brace it starts on. Hover/focus: the loop plays (brace → orange → purple → teal → brace). Where hover doesn't exist or motion is calm, the keyed flower still stands in (.wc-spin-fallback). */ /* WebKit drops a