/* =====================================================================
 * Case-study page styles for KH Portfolio.
 * Reference viewport: 1440px. Matches Figma node 2:4 at this width.
 *
 * Covers the SHARED SHELL for all five case pages: page surface, main
 * grid (rail + content column), and the day aquarium footer.
 *
 * Landing-page styles live in layout.css. Do not add landing rules here
 * and do not add case rules to layout.css.
 *
 * All values reference tokens from tokens.css. Never hard-code a color,
 * size, or spacing here.
 *
 * No motion, transitions, or interactive states in this file.
 * Motion belongs in motion.css.
 * ===================================================================== */


/* -------------------- Reset (mirrors layout.css so case pages stand alone) -------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
}

/* Hash jumps land clear of the fixed nav rather than under it. */
html { scroll-padding-top: var(--nav-h); }

body {
  font-family: var(--font-body);
  color: var(--ink-title);
  background: var(--surface-page-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Damage control: pin the layout to the 1440 design width. Below 1440  */
  /* the browser scrolls horizontally rather than collapsing. Not a       */
  /* mobile layout — nothing rearranges, nothing clips.                    */
  min-width: var(--layout-max);
}

img,
video {
  display: block;
  max-width: 100%;
}

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4, p { margin: 0; }


/* -------------------- Nav (mirrors layout.css) -------------------- */
/* Sits fixed to the viewport, spans the full width. The inner cap keeps   */
/* logo + links inside the 1440 content column. Fully opaque background    */
/* matches the pale case surface so the seam between nav and page          */
/* disappears at scrollY = 0. The scrolled state (translucent + backdrop-  */
/* blur) is a scroll-driven interaction and lives in motion.css.           */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100%;
  color: var(--ink-title);
  background-color: var(--surface-page-light);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: var(--nav-pad-y) var(--nav-pad-x);
}

.nav__logo {
  font-family: var(--font-display);
  font-size: var(--fs-title-l);
  letter-spacing: var(--track-kh-logo);
  line-height: var(--lh-tight);
}

.nav__links {
  display: flex;
  gap: var(--nav-gap);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-nav);
  letter-spacing: var(--track-nav);
}

.nav__link { opacity: var(--opacity-nav-link); }


/* -------------------- Page surface -------------------- */

.case-page {
  width: 100%;
  max-width: var(--layout-max);
  margin: 0 auto;
  background: var(--surface-page-light);
  color: var(--ink-title);
  display: flex;
  flex-direction: column;
  /* Reserve space for the fixed nav so case-main geometry matches the      */
  /* pre-sticky layout (case-main content ends up at the same y as before). */
  padding-top: var(--nav-h);

  /* Per-case accent theming. Defaults to Perfect Match; each case page
     overrides via `data-case="…"`. The three variables below cascade to
     rail active state, marker, tags, stats, press pills, outcome block,
     pullout border, and see-next cards — anywhere the case's color shows. */
  --case-accent:      var(--card-pm-accent);
  --case-chip:        var(--card-pm-chip);
  --case-accent-soft: color-mix(in srgb, var(--case-accent) 30%, transparent);
}

.case-page[data-case="watchlight"] {
  --case-accent: var(--card-watchlight-accent);
  --case-chip:   var(--card-watchlight-chip);
}

.case-page[data-case="wnr-romans"] {
  --case-accent: var(--card-romans-accent);
  --case-chip:   var(--card-romans-chip);
}

.case-page[data-case="i-wish"] {
  --case-accent: var(--card-iwish-accent);
  --case-chip:   var(--card-iwish-chip);
}

.case-page[data-case="illi-minate"] {
  --case-accent: var(--card-illi-accent);
  --case-chip:   var(--card-illi-chip);
}


/* -------------------- Main grid: rail + content column -------------------- */
/* Rail is a fixed 140 wide track. Content fills the remaining width, which */
/* at the 1440 reference resolves to 952 (1440 - 150*2 - 140 - 48).         */

.case-main {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--case-main-gap);
  width: 100%;
  padding: var(--case-main-pad-top)
           var(--case-main-pad-x)
           var(--case-main-pad-bottom);
}

.case-rail {
  flex: 0 0 var(--rail-w);
  width: var(--rail-w);
}

.case-content {
  flex: 1 1 0;
  min-width: 0;
}


/* -------------------- Aquarium footer (day) -------------------- */
/* Full-viewport-width so gradient and sand strip bleed past 1440.  */
/* .aquarium__inner caps the positioning context so the content     */
/* block, back link, and ambient graphics stay at Figma coords.     */

.aquarium {
  position: relative;
  width: 100%;
  height: var(--footer-h);
  background: var(--gradient-aquarium-day);
  overflow: hidden;
}

.aquarium__inner {
  position: relative;
  max-width: var(--layout-max);
  height: 100%;
  margin: 0 auto;
}

.aquarium__sand {
  position: absolute;
  left: 0;
  top: var(--footer-sand-top);
  width: 100%;
  height: var(--footer-sand-h);
  background: var(--surface-sand-day);
}

.aquarium__content {
  position: absolute;
  left: var(--footer-content-x);
  top: var(--footer-content-y);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--footer-content-gap);
}

.aquarium__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-display-footer);
  line-height: var(--lh-tight);
  color: var(--ink-title);
  white-space: nowrap;
}

.aquarium__buttons {
  display: flex;
  gap: var(--footer-btn-gap);
}

.btn {
  display: inline-flex;
  align-items: center;
  padding: var(--footer-btn-pad);
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-btn);
  line-height: var(--lh-tight);
  white-space: nowrap;
}

.btn--day-outline {
  background: var(--surface-linkedin-day);
  border: 1px solid var(--ink-title);
  color: var(--ink-title);
}

.btn--day-solid {
  background: var(--ink-title);
  color: var(--ink-day-email);
}

.aquarium__signoff {
  display: flex;
  align-items: baseline;
  gap: var(--footer-signoff-gap);
  color: var(--ink-day-signature);
  white-space: nowrap;
}

.aquarium__monogram {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-monogram-footer);
  line-height: var(--lh-tight);
}

.aquarium__tag {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-bubble);
  line-height: var(--lh-tight);
}

.aquarium__back {
  position: absolute;
  left: var(--footer-back-x);
  top: var(--footer-back-y);
  /* .aquarium__sand comes after .aquarium__inner in DOM and stacks    */
  /* above it. Without an explicit z-index the sand would cover this   */
  /* link — same sibling-stacking pattern as .footer__back on the      */
  /* landing page.                                                     */
  z-index: 2;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-title-s);
  line-height: var(--lh-tight);
  color: var(--ink-day-signature);
  white-space: nowrap;
}


/* -------------------- Aquarium footer: ambient graphics -------------------- */
/* Positions are absolute from the .aquarium origin (top-left of footer),    */
/* not from the sand strip. Values read from Figma node 102:18.              */

.aquarium__ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.aquarium__seaweed,
.aquarium__glint {
  position: absolute;
  display: block;
}


/* -------------------- Section rail -------------------- */

.rail__project {
  padding-bottom: var(--rail-project-pad-b);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-rail-project);
  line-height: 1.2;
  color: var(--case-accent);
}

.rail__rule {
  height: 1px;
  width: 100%;
  background: #d6dede;
  margin-bottom: var(--rail-item-gap);
}

.rail__list {
  display: flex;
  flex-direction: column;
  gap: var(--rail-item-gap);
  list-style: none;
  padding: 0;
  margin: 0;
}

.rail__item {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-rail-label);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-rail-label);
  color: var(--ink-card-sub);
  white-space: nowrap;
}

.rail__item--active {
  color: var(--case-accent);
}

.rail__item--active::before {
  content: "* ";
  font-family: var(--font-display);
  font-weight: 400;
}


/* -------------------- Case content: outer stack -------------------- */

.case-section {
  display: flex;
  flex-direction: column;
  gap: var(--case-section-gap);
  width: 100%;
}

.case-block {
  display: flex;
  flex-direction: column;
  gap: var(--case-block-gap);
  width: 100%;
}

.case-block--hero {
  gap: var(--case-hero-gap);
}

.case-stack {
  display: flex;
  flex-direction: column;
  gap: var(--case-stack-gap);
  width: 100%;
}

.case-prose {
  display: flex;
  flex-direction: column;
  gap: var(--case-media-gap);
  width: 100%;
}


/* -------------------- Case content: eyebrow / heading / body -------------------- */

.case-eyebrow {
  width: var(--case-text-w);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-case-eyebrow);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-case-eyebrow);
  color: var(--ink-card-sub);
}

.case-heading {
  width: var(--case-text-w);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-case-heading);
  line-height: var(--lh-case-heading);
  color: var(--ink-card-title);
}

.case-heading em {
  font-style: italic;
  font-weight: 700;
}

.case-body {
  width: var(--case-text-w);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-case-body);
  line-height: var(--lh-case-body);
  color: var(--ink-card-body);
}

.case-body + .case-body {
  margin-top: var(--case-media-gap);
}

.case-caption {
  width: var(--case-text-w);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-chip);
  line-height: var(--lh-case-caption);
  color: var(--ink-card-sub);
}


/* -------------------- Case content: media -------------------- */

.case-media {
  position: relative;
  width: 100%;
  height: var(--case-media-h);
  border-radius: var(--radius-chip);
  overflow: hidden;
}

.case-media--tall {
  height: var(--case-media-h-lg);
}

.case-media--plate {
  background: var(--surface-hero-plate);
}

.case-media--surface-light {
  background: var(--surface-page-light);
}

.case-media__img,
.case-media__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-media__overlay {
  position: absolute;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-case-eyebrow);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-case-eyebrow);
  color: var(--ink-card-sub);
  white-space: nowrap;
  pointer-events: none;
}

.case-media__overlay--sm {
  font-size: var(--fs-case-eyebrow-sm);
  letter-spacing: var(--track-case-eyebrow-sm);
  text-align: center;
  white-space: normal;
}

.case-pair {
  display: flex;
  gap: var(--case-pair-gap);
  height: var(--case-media-h);
  width: 100%;
}

.case-pair > .case-media {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
}

.case-media--shadow {
  box-shadow: var(--shadow-case-media);
}


/* -------------------- Case content: hero -------------------- */

.case-hero__title {
  width: 874px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-case-hero-title);
  line-height: var(--lh-case-hero-title);
  color: var(--ink-card-title);
  white-space: pre-line;
}

/* Watchlight uses a larger hero title on the narrower body text column. */
.case-hero__title--lg {
  width: var(--case-text-w);
  font-size: var(--fs-case-hero-title-lg);
}

.case-hero__sub {
  min-width: 100%;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-case-hero-sub);
  line-height: var(--lh-case-tight-body);
  color: var(--ink-card-body);
  white-space: pre-line;
}


/* -------------------- Case content: meta (ROLE / DURATION / TOOLS) -------------------- */

.case-meta {
  display: flex;
  gap: var(--case-meta-gap);
  align-items: flex-start;
  width: 100%;
}

.case-meta__item {
  display: flex;
  flex-direction: column;
  gap: var(--case-meta-inner-gap);
  align-self: stretch;
}

.case-meta__label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-case-meta-label);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-case-meta-label);
  color: var(--ink-card-sub);
}

.case-meta__value {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-case-meta-value);
  line-height: var(--lh-tight);
  color: var(--ink-card-title);
}


/* -------------------- Case content: tags -------------------- */

.case-tags {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--case-tag-gap-y);
  column-gap: var(--tag-gap);
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

.case-tag {
  padding: var(--case-tag-pad);
  border-radius: var(--radius-case-tag);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-chip);
  line-height: var(--lh-tight);
  white-space: nowrap;
}

.case-tag--accent {
  background: var(--case-chip);
  color: var(--case-accent);
}


/* -------------------- Case content: stats + press -------------------- */

.case-stats {
  display: flex;
  gap: var(--case-section-gap);
  width: 100%;
}

.case-stat {
  display: flex;
  flex-direction: column;
  gap: var(--case-tight-gap);
  flex: 1 1 0;
  min-width: 0;
}

.case-stat__value {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-title-m);
  line-height: var(--lh-tight);
  color: var(--case-accent);
}

.case-stat__label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-chip);
  line-height: var(--lh-case-stat-label);
  color: var(--ink-card-sub);
}

.case-press {
  display: flex;
  align-items: center;
  gap: var(--case-press-gap);
  width: 100%;
  white-space: nowrap;
}

.case-press__label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-case-press-label);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-case-press-label);
  color: var(--ink-card-sub);
}

.case-press-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--case-press-pill-gap);
  padding: var(--case-press-pill-pad);
  border-radius: var(--radius-pill-full);
  background: var(--case-chip);
  border: 1px solid var(--case-accent-soft);
  color: var(--case-accent);
}

.case-press-pill__name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-case-eyebrow);
  line-height: var(--lh-tight);
}

.case-press-pill__arrow {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-case-arrow);
  line-height: var(--lh-tight);
}


/* -------------------- Case content: outcome + pullout -------------------- */

.case-outcome {
  display: flex;
  flex-direction: column;
  gap: var(--case-outcome-gap);
  width: var(--case-text-w);
  padding: var(--case-outcome-pad);
  border-radius: var(--radius-outcome);
  background: var(--case-chip);
  list-style: none;
  margin: 0;
}

.case-outcome__label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-case-eyebrow-sm);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-case-eyebrow-sm);
  color: var(--case-accent);
  white-space: nowrap;
}

.case-outcome__item {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-case-body);
  line-height: var(--lh-case-tight-body);
  color: var(--ink-card-title);
}

.case-note {
  width: var(--case-text-w);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-btn);
  line-height: var(--lh-case-tight-body);
  color: var(--ink-card-sub);
}

.case-pullout {
  display: flex;
  flex-direction: column;
  gap: var(--case-media-gap);
  width: var(--case-text-w);
  padding: var(--case-pullout-pad);
  border-left: var(--case-pullout-border-w) solid var(--case-accent);
}

.case-pullout__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-case-pullout);
  line-height: var(--lh-case-pullout);
  color: var(--ink-card-title);
}

.case-pullout__body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-case-body);
  line-height: var(--lh-case-body);
  color: var(--ink-card-body);
}


/* -------------------- Case content: See Next -------------------- */

.case-see-next {
  display: flex;
  gap: var(--case-pair-gap);
  width: 100%;
  white-space: nowrap;
}

.case-see-next__card {
  display: flex;
  flex-direction: column;
  gap: var(--case-tight-gap);
  flex: 1 1 0;
  min-width: 0;
  padding: var(--case-see-next-pad);
  border-radius: var(--radius-chip);
  background: var(--case-chip);
}

.case-see-next__label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-case-meta-label);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-case-meta-label);
  color: var(--ink-card-sub);
}

.case-see-next__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-case-see-next-title);
  line-height: var(--lh-tight);
  color: var(--ink-card-title);
}


/* -------------------- Perfect Match: partnership composite (Figma 100:113) -------------------- */

.pm-partnership__item {
  position: absolute;
  display: block;
  object-fit: cover;
}


/* -------------------- Perfect Match: 2026 palette + laptop composite (Figma 348:180) -------- */

.case-composite__img {
  position: absolute;
  display: block;
}


/* -------------------- Perfect Match: Cuffed or Not composite (Figma 100:128) -------------------- */

.case-composite__laptop,
.case-composite__phone,
.case-composite__notch {
  position: absolute;
  display: block;
}

.case-composite__phone {
  width: var(--case-phone-w);
  height: var(--case-phone-h);
  background: var(--surface-device-shell);
  border-radius: var(--radius-phone);
  box-shadow: var(--shadow-case-phone);
}

.case-composite__phone-screen {
  position: absolute;
  top: var(--case-phone-screen-inset);
  bottom: var(--case-phone-screen-inset);
  left: 50%;
  transform: translateX(-50%);
  width: var(--case-phone-screen-w);
  border-radius: var(--radius-phone-screen);
  overflow: hidden;
}

.case-composite__laptop-screen,
.case-composite__phone-screen-video {
  position: absolute;
  display: block;
  object-fit: cover;
  pointer-events: none;
}

.case-composite__phone-screen-video {
  inset: 0;
  width: 100%;
  height: 100%;
}


/* -------------------- Case media: extra height + object-fit variants -------- */
/* Watchlight's workflow-map plate is 500 tall (Figma node 125:54).            */

.case-media--h500 { height: 500px; }

/* When the media child should show the whole graphic instead of cover-crop.  */
.case-media--contain .case-media__img { object-fit: contain; }


/* -------------------- Case press label: LIVE variant -------------------- */
/* Same font/size/color/tracking as PRESS; distinct class keeps the reader   */
/* intent readable at the HTML level. Watchlight uses `.case-live` for the   */
/* label + `.case-press-pill` for the pills.                                 */

.case-live {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-case-press-label);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-case-press-label);
  color: var(--ink-card-sub);
}


/* -------------------- Case carousel (Figma 355:11 / 357:16) -------------------- */
/* Horizontal scroll-snap viewport, prev/next buttons, dots, counter.            */
/* JS (scripts/carousel.js) syncs the drawn controls to the current slide.       */

.case-carousel {
  position: relative;
  width: 100%;
}

.case-carousel__viewport {
  position: relative;
  width: 100%;
  height: 460px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  outline: none;
  /* Hide scrollbar; users navigate via drag or the drawn controls. */
  scrollbar-width: none;
}
.case-carousel__viewport::-webkit-scrollbar { display: none; }
.case-carousel__viewport:focus-visible { box-shadow: 0 0 0 2px var(--case-accent); }

/* Viewport is 952 wide, slide is 720. Padding of 116 on each side lets the  */
/* first/last slide center-snap. Adjacent slides peek into the 116 gutter,   */
/* matching Figma 355:11.                                                    */
.case-carousel__track {
  display: flex;
  gap: 16px;
  height: 100%;
  padding-left: 116px;
  padding-right: 116px;
}

.case-carousel__slide {
  flex: 0 0 720px;
  height: 460px;
  border-radius: var(--radius-chip);
  overflow: hidden;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  opacity: 0.45;
  transition: opacity 0.3s ease;
}

.case-carousel__slide--active { opacity: 1; }

.case-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-carousel__control {
  position: absolute;
  top: 208px;
  width: 44px;
  height: 44px;
  background: var(--surface-page-light);
  border: 1px solid color-mix(in srgb, var(--ink-card-sub) 25%, transparent);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(18, 51, 61, 0.12);
  color: var(--case-accent);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: opacity 0.2s ease;
}
.case-carousel__control:disabled {
  opacity: 0.35;
  cursor: default;
}
.case-carousel__control--prev { left: 20px; }
.case-carousel__control--next { right: 20px; }
.case-carousel__control:focus-visible { outline: 2px solid var(--case-accent); outline-offset: 2px; }

.case-carousel__controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 12px;
}

.case-carousel__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.case-carousel__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink-card-sub) 40%, transparent);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}
.case-carousel__dot--active {
  width: 22px;
  background: var(--case-accent);
}
.case-carousel__dot:focus-visible { outline: 2px solid var(--case-accent); outline-offset: 2px; }

.case-carousel__counter {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-case-eyebrow);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-case-eyebrow);
  color: var(--ink-card-sub);
}


/* -------------------- Film controls (Romans brand film only) -------------------- */
/* Injected by scripts/video-controls.js next to [data-video-controls="film"].     */
/* Thin progress bar + circular play/pause; fade in on hover, out on leave.        */

.film-controls {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease-out;
}
.film-controls[data-state="visible"] { opacity: 1; }
.film-controls > * { pointer-events: auto; }

.film-controls__toggle {
  position: absolute;
  left: 16px;
  bottom: 22px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--case-accent);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 150ms ease-out, background 200ms ease-out;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.film-controls__toggle:hover { background: #ffffff; transform: scale(1.04); }
.film-controls__toggle:focus-visible {
  outline: 2px solid var(--case-accent);
  outline-offset: 2px;
}

.film-controls__icon { display: none; width: 12px; height: 14px; fill: currentColor; }
.film-controls__toggle[data-state="paused"] .film-controls__icon--play {
  display: block;
  margin-left: 2px; /* optical centering for the play triangle */
}
.film-controls__toggle[data-state="playing"] .film-controls__icon--pause {
  display: block;
}

/* Invisible 20px hit target wrapping the 2px visible track. Padding absorbs
   the extra height so the track stays flush to the bottom of the video. */
.film-controls__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20px;
  padding: 9px 0;
  cursor: pointer;
  box-sizing: border-box;
  touch-action: none; /* let the pointer drag override touch-scroll */
  user-select: none;
}

.film-controls__track {
  position: relative;
  height: 2px;
  width: 100%;
  background: rgba(255, 255, 255, 0.32);
  transition: height 150ms ease-out;
}
.film-controls__progress:hover .film-controls__track {
  height: 3px;
}

.film-controls__fill {
  height: 100%;
  width: 0;
  background: var(--case-accent);
}

@media (prefers-reduced-motion: reduce) {
  .film-controls,
  .film-controls__toggle,
  .film-controls__track { transition: none; }
}


/* =====================================================================
 * Scroll reveal + stat counters (driven by scripts/case.js).
 *
 * Mirror of the About-page reveal contract (styles/about.css → same
 * @media gate, same 24px rise, same 540ms cubic-bezier overshoot,
 * same .is-revealed toggle) so About and case pages read as one system.
 *
 * @media (scripting: enabled) gates the hidden state so no-JS visitors
 * see the final render — nothing gets stuck offscreen if the script
 * doesn't load. Reduced-motion users bypass the block entirely.
 * ===================================================================== */

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity   540ms cubic-bezier(0.34, 1.56, 0.64, 1),
      transform 540ms cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  [data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Counters: equal-width digits keep the number from jittering as digits
   swap during the count-up. Width reservation (min-width set inline by
   case.js) prevents layout shift; tabular-nums prevents intra-glyph jitter. */
.case-stat__value,
[data-count] {
  font-variant-numeric: tabular-nums;
}