/* ===========================================================================
   Shared by the home page AND every case page. Everything here is what the
   two documents must agree on pixel for pixel, so the navigation between them
   is invisible: the view-transition opt-in, the hero slot, its image, and the
   hero text above it. Change it once, here, never per page.
   =========================================================================== */

/* Cross-document View Transitions: both pages opt in, so a same-origin
   navigation crossfades the old page's last frame into the new page's first.
   The hero is identical in both, so the crossfade has nothing to show there. */
@view-transition{ navigation:auto; }
::view-transition-group(root){ animation-duration:.24s; }
/* The default root crossfade blends old and new with plus-lighter. Measured:
   on the transition's first frame both are fully opaque, so paper + paper
   saturated to one frame of white. Instead the old frame holds still and the
   new one fades in over it with normal blending, which for identical pixels
   is a true no-op. */
::view-transition-old(root),::view-transition-new(root){ animation:none; mix-blend-mode:normal; }
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(root){ animation-duration:0s; }
}

/* The home page is scroll-locked (no scrollbar) and the case page is not.
   Without a reserved gutter, classic scrollbars (Windows) would make the case
   page's column ~15px narrower than the one the card landed in. */
html{ scrollbar-gutter:stable; }

/* style.css paints the paper on <body>; the root carries it too, so nothing
   can ever show the browser's default white behind the page. */
html{ background:var(--paper); }

/* ---- hero text -----------------------------------------------------------
   The name is a label above the card, not the billboard it is on the static
   case pages (see case-study-page-test/app.css for the reasoning).

   Every length above the slot is rounded to a whole pixel. Viewport units
   otherwise put the slot at e.g. top 229.73px, and the browser and WebGL round
   that differently: measured as a one-device-pixel jump at the handoff. On
   whole pixels there is nothing to round. The unrounded line is the fallback
   for browsers without CSS round(); both pages share it, so they still match. */
.cs-hero{
  padding:clamp(96px,12vh,140px) 0 clamp(22px,3vh,34px);
  padding:round(clamp(96px,12vh,140px),1px) 0 round(clamp(22px,3vh,34px),1px);
}
.cs-hero .cs-hero__title{
  --t-fs:clamp(2rem,4.4vw,3.4rem);
  --t-fs:round(clamp(2rem,4.4vw,3.4rem),1px);
  font-size:var(--t-fs);
  line-height:round(calc(var(--t-fs) * .94),1px);
  margin-top:clamp(14px,2.4vh,26px);
  margin-top:round(clamp(14px,2.4vh,26px),1px);
}
.cs-hero-meta{ padding-block:clamp(26px,4vh,46px) 0; }
.cs-hero-meta .cs-hero__row{ margin-top:0; align-items:start; }

/* ---- the hero slot -------------------------------------------------------
   On the home page the WebGL card is drawn into this rect, reading
   --slot-radius so its corners match. On both pages it holds the same <img>,
   cover-fit and centred exactly like the shader's cover mode. */
/* The slot's parent is a size container so the height can be derived from
   the width and rounded, where aspect-ratio would leave it fractional. */
.case-article,.ghost{ container-type:inline-size; }
.cs-hero-slot{
  --slot-aspect:2.265625;   /* exactly 2320 / 1024: an approximate ratio leaves a sub-pixel crop the two renderers round differently */
  --slot-radius:20px;
  --slot-w:min(100cqw - 40px,var(--max-w));
  position:relative;
  width:var(--slot-w);
  margin-inline:auto;
  aspect-ratio:var(--slot-aspect);
  max-height:68svh;
  height:min(round(down,calc(var(--slot-w) / var(--slot-aspect)),1px), round(down,68svh,1px));
  border-radius:var(--slot-radius);
  overflow:hidden;
}
.cs-hero-slot img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
  display:block;
}
@media (max-width:720px){
  .cs-hero-slot{ --slot-aspect:1.1; max-height:52svh; }
}