/* ============================================================
   CASE PAGES — shared shell for the Figma case-study layouts.
   The design canvas is 1440px wide; --u maps it onto the viewport
   the same way the main site does (scaled below 1440, capped at 1px).
   Sections are absolutely positioned inside .case-page at the
   Figma coordinates, all in --u units.
   ============================================================ */

:root {
  --u: min(calc(100vw / 1440), 1px);
}

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

body {
  margin: 0;
  background: #000;
  font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  overflow-x: clip;
}

.case-page {
  position: relative;
  z-index: 0;
  width: 100%;
}
/* the page color runs edge to edge on screens wider than the 1440 canvas */
.case-page::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: inherit;
  z-index: -1;
}

/* full-bleed brand color band: header and footer color runs edge to edge
   even when the 1440 canvas is centered on a wider screen */
.case-bleed {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
}

.case-page img { display: block; }
.case-page a { text-decoration: none; }

/* state-entry choreography: the cover assembles element by element */
html.case-enter .case-cover > * { opacity: 0; transform: translateY(26px); }

/* ============================================================
   FULLSCREEN DECK: each case ("state") is a stack of viewport
   screens the visitor flips through. Figma's 830-tall bands are
   the designer's stand-in for "one screen" — heights map to 100vh,
   horizontal coordinates stay in u.
   ============================================================ */

.case-screen {
  position: relative;
  width: calc(var(--u) * 1440);
  height: 100vh;
  margin: 0 auto;
}
/* editorial screens: the Figma block (height inline, u) centers vertically */
.case-canvas {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
}
/* full-bleed media screens: the image/video covers the whole viewport */
.case-screen--bleed > img,
.case-screen--bleed > video,
.case-screen--bleed > figure {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  margin: 0;
  object-fit: cover;
}
.case-screen--bleed figure img,
.case-screen--bleed figure video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- case video player (same rules as the main page's campaign video):
   glass center button = play/pause, ring = progress + drag-to-seek --- */
.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--u) * 91.5);
  height: calc(var(--u) * 91.5);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #fff;
  cursor: pointer;
  touch-action: none; /* ring drag = seek */
}
.vp-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vp-progress { transition: opacity 0.2s ease; }
.vp-icon { opacity: 0; transition: opacity 0.25s ease; }
.video-play:not(.is-paused) .vp-icon-pause { opacity: 1; }
.video-play.is-paused .vp-icon-play { opacity: 1; }
/* centered-collage screens: the image fits inside the viewport
   (max-width inline = design width) */
.case-screen--fit {
  display: flex;
  align-items: center;
  justify-content: center;
}
.case-screen--fit > img {
  width: auto;
  height: auto;
  max-height: 86vh;
}
/* taller-than-a-screen panoramas keep natural height and scroll through
   (case-flow.js adds intermediate stops) */
.case-flow {
  position: relative;
  width: calc(var(--u) * 1440);
  margin: 0 auto;
}
.case-flow img { display: block; margin: 0 auto; height: auto; }

/* --- cover (shared chrome: logo, CTA, MENU, location) ---
   one full screen; chrome hugs the viewport edges, the brand block
   keeps the design's vertical proportions via --cvh (design height 830) */
.case-cover {
  position: relative;
  width: calc(var(--u) * 1440);
  height: 100vh;
  margin: 0 auto;
  --cvh: calc(100vh / 830);
}
.case-cover-brand { position: absolute; }
.case-cover-brand img { position: absolute; }
.case-cover::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: var(--cover-bg);
  z-index: -1;
}
.case-cover-logo {
  position: absolute;
  left: calc(var(--u) * 40);
  top: calc(var(--u) * 36);
  font-weight: 700;
  font-size: calc(var(--u) * 20);
  line-height: 1.05;
}
.case-talk {
  position: absolute;
  left: calc(var(--u) * 1286);
  top: calc(var(--u) * 32);
  padding: calc(var(--u) * 12) calc(var(--u) * 22);
  background: #fff;
  border-radius: calc(var(--u) * 24);
  color: #141414;
  font-weight: 700;
  font-size: calc(var(--u) * 13);
  letter-spacing: 0.02em;
  line-height: 1.54;
  white-space: nowrap;
}
.case-menu {
  position: absolute;
  left: calc(var(--u) * 40);
  bottom: calc(var(--u) * 33);
  font-weight: 700;
  font-size: calc(var(--u) * 16);
  line-height: 1.1;
}
.case-place {
  position: absolute;
  left: calc(var(--u) * 1221);
  bottom: calc(var(--u) * 33);
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: calc(var(--u) * 14);
  white-space: pre;
}
.case-meta {
  position: absolute;
  display: flex;
  gap: calc(var(--u) * 120);
}
.case-meta > div {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 6);
  align-items: center;
}
.case-meta dt {
  margin: 0;
  font-family: "Reddit Mono", monospace;
  font-weight: 500;
  font-size: calc(var(--u) * 11);
  letter-spacing: 0.14em;
}
.case-meta dd {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: calc(var(--u) * 17);
}
.case-tagline {
  position: absolute;
  left: calc(var(--u) * 720);
  transform: translateX(-50%);
  bottom: calc(var(--u) * 84);
  font-family: "Inter", sans-serif;
  font-size: calc(var(--u) * 30);
  white-space: nowrap;
}
.case-scroll {
  position: absolute;
  left: calc(var(--u) * 720);
  transform: translateX(-50%);
  bottom: calc(var(--u) * 33);
  font-family: "Inter", sans-serif;
  font-size: calc(var(--u) * 14);
  white-space: nowrap;
}

/* --- shared content blocks --- */
.case-lede {
  position: absolute;
  left: calc(var(--u) * 720);
  transform: translateX(-50%);
  width: calc(var(--u) * 669);
  margin: 0;
  color: #fff;
  font-size: calc(var(--u) * 32);
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: center;
  white-space: pre-wrap;
}

/* graphic shapes exported from Figma keep the design's rotation */
.case-shape {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.case-shape > img { flex: none; }
.case-rot90 > img { transform: rotate(90deg); }
.case-rot-90-flip > img { transform: rotate(-90deg) scaleY(-1); }
.case-rot90-flip > img { transform: rotate(90deg) scaleY(-1); }

.case-mono {
  position: absolute;
  transform: translateX(-50%);
  margin: 0;
  font-family: "Fira Mono", "Reddit Mono", monospace;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

/* --- credits (Figma 2093:35451 / 2093:34781): red mono title, hairline rows --- */
.case-credits {
  position: absolute;
  left: calc(var(--u) * 265);
  width: calc(var(--u) * 910);
  margin: 0;
  --credits-line: rgba(22, 22, 22, 0.18);
}
.case-credits-title {
  margin: 0 0 calc(var(--u) * 24);
  font-family: "Reddit Mono", monospace;
  font-weight: 500;
  font-size: calc(var(--u) * 11);
  letter-spacing: calc(var(--u) * 1.54);
  color: #e22d27;
}
.case-credits-row {
  display: flex;
  align-items: center;
  margin: 0;
  padding: calc(var(--u) * 26) 0;
  border-top: calc(var(--u) * 1) solid var(--credits-line);
  color: #8b8880;
}
.case-credits-row:last-child { border-bottom: calc(var(--u) * 1) solid var(--credits-line); }
.case-credits-row dt {
  width: calc(var(--u) * 420);
  font-family: "Reddit Mono", monospace;
  font-weight: 500;
  font-size: calc(var(--u) * 11);
  letter-spacing: calc(var(--u) * 1.1);
}
.case-credits-row dd {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: calc(var(--u) * 16);
}


/* --- editorial blocks (Figma 2335/2308 system): mono side label,
   794-wide content column offset +230 from the label --- */
.s-img { position: absolute; height: auto; }
.s-label {
  position: absolute;
  left: calc(var(--u) * 99);
  margin: 0;
  font-family: "Reddit Mono", monospace;
  font-weight: 500;
  font-size: calc(var(--u) * 12);
  letter-spacing: calc(var(--u) * 1.2);
  color: #8b8880;
  white-space: nowrap;
}
.s-head {
  position: absolute;
  left: calc(var(--u) * 329);
  width: calc(var(--u) * 794);
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: calc(var(--u) * 40);
  line-height: calc(var(--u) * 48);
  letter-spacing: -0.01em;
  color: #161616;
}
.s-body {
  position: absolute;
  left: calc(var(--u) * 329);
  width: calc(var(--u) * 794);
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: calc(var(--u) * 16);
  line-height: calc(var(--u) * 24);
  color: #161616;
}
.s-brief-text {
  position: absolute;
  left: calc(var(--u) * 329);
  width: calc(var(--u) * 794);
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: calc(var(--u) * 36);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #161616;
}
.s-table { position: absolute; left: calc(var(--u) * 329); width: calc(var(--u) * 794); margin: 0; font-family: "Inter", sans-serif; --hairline: #e6e6e6; }
.s-table > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(var(--u) * 68);
  border-top: calc(var(--u) * 1) solid var(--hairline);
  font-size: calc(var(--u) * 16);
  color: inherit;
}
.s-table > div:last-child { border-bottom: calc(var(--u) * 1) solid var(--hairline); }
.s-summary-list {
  position: absolute;
  left: calc(var(--u) * 329);
  width: calc(var(--u) * 794);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "Inter", sans-serif;
  font-size: calc(var(--u) * 16);
  line-height: calc(var(--u) * 24);
  color: #161616;
}
.s-summary-list li { padding: calc(var(--u) * 9) 0 calc(var(--u) * 9) calc(var(--u) * 28); }
.s-summary-list li::before { content: "\2726"; display: inline-block; width: calc(var(--u) * 28); margin-left: calc(var(--u) * -28); font-size: calc(var(--u) * 14); }

/* --- next-project teaser (Figma 2377/2310) ---
   a full-viewport closing screen; when the user scrolls past the last stop,
   js/case-flow.js plays the exit choreography (counter 1→100%, the giant
   name rises and dissolves into the brand color) and navigates; the next
   page opens on the same color and its cover eases in element by element */
.next-case {
  position: relative;
  width: calc(var(--u) * 1440);
  height: 100vh;
  margin: 0 auto;
  display: block;
}
/* clips the giant name at the teaser's edges without clipping the ::before
   color bleed (an overflow on .next-case itself would cut it to 1440) */
.next-case-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.next-case::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: var(--next-bg);
  transition: background-color 0.5s ease;
  z-index: -1;
}
.next-case-logo { position: absolute; left: calc(var(--u) * 40); top: calc(var(--u) * 36); margin: 0; font-weight: 700; font-size: calc(var(--u) * 20); line-height: 1.05; }
.next-case-talk {
  position: absolute;
  left: calc(var(--u) * 1286);
  top: calc(var(--u) * 32);
  padding: calc(var(--u) * 12) calc(var(--u) * 22);
  background: #fff;
  border-radius: calc(var(--u) * 24);
  color: #141414;
  font-weight: 700;
  font-size: calc(var(--u) * 13);
  line-height: 1.54;
}
.next-case-lbl { position: absolute; left: calc(var(--u) * 720); transform: translateX(-50%); top: calc(var(--u) * 42); margin: 0; font-family: "Inter", sans-serif; font-weight: 500; font-size: calc(var(--u) * 17); white-space: nowrap; }
.next-case-scroll, .next-case-pct {
  position: absolute;
  top: calc(50vh - var(--u) * 8);
  margin: 0;
  font-family: "Reddit Mono", monospace;
  font-weight: 500;
  font-size: calc(var(--u) * 13);
  letter-spacing: 0.14em;
  opacity: 0.75;
}
.next-case-scroll { left: calc(var(--u) * 533); }
.next-case-pct { left: calc(var(--u) * 980); opacity: 1; }
.next-case-giant {
  position: absolute;
  left: calc(var(--u) * 720);
  transform: translateX(-50%);
  bottom: calc(var(--u) * -223); /* design: giant peeks from the bottom edge */
  margin: 0;
  will-change: transform;
  font-weight: 800;
  font-size: calc(var(--u) * 330);
  line-height: 1.5;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.next-case-menu { position: absolute; left: calc(var(--u) * 40); bottom: calc(var(--u) * 40); margin: 0; font-weight: 700; font-size: calc(var(--u) * 16); line-height: 1.5; }
.next-case-place { position: absolute; left: calc(var(--u) * 1221); bottom: calc(var(--u) * 40); margin: 0; font-family: "Inter", sans-serif; font-weight: 500; font-size: calc(var(--u) * 14); opacity: 0.7; white-space: pre; }

/* ============================================================
   MOBILE (< 768px): the absolute 1440-canvas becomes a linear
   stack in DOM order; piecewise mosaics swap to baked exports
   (.m-desktop → .m-mobile), covers become centered columns.
   ============================================================ */

.m-mobile { display: none !important; }

@media (max-width: 767px) {
  .case-page { width: 100%; height: auto !important; padding-bottom: 48px; }

  /* --- cover: centered column --- */
  .case-cover {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 20px 20px 44px;
    text-align: center;
  }
  .case-cover { height: auto !important; }
  .case-cover > * { position: static !important; transform: none !important; }
  .case-cover-logo { align-self: flex-start; font-size: 18px; text-align: left; }
  .case-menu, .case-place, .case-scroll { display: none !important; }
  .case-talk { order: 10; margin-top: 26px; padding: 12px 22px; font-size: 12px; border-radius: 22px; }
  .case-cover-brand { position: static !important; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 30px; width: auto !important; height: auto !important; }
  .case-cover-brand img { position: static !important; width: auto !important; height: 46px !important; }
  .case-cover h1 { margin-top: 12px; font-size: 56px !important; line-height: 1.2 !important; }
  .case-meta { gap: 40px; margin-top: 24px; }
  .case-meta dt { font-size: 10px; }
  .case-meta dd { font-size: 15px; }
  .case-tagline { margin-top: 22px; font-size: 18px; white-space: normal; }

  /* --- content: linear stack (screens unfold, canvases go static) --- */
  .case-page > *:not(.case-cover):not(script) {
    position: static !important;
    transform: none !important;
    margin: 26px auto 0 !important;
  }
  .case-screen { height: auto !important; width: 100% !important; }
  .case-canvas, .case-flow { position: static !important; transform: none !important; height: auto !important; width: 100% !important; }
  .case-canvas > *, .case-flow > * {
    position: static !important;
    transform: none !important;
    margin: 26px auto 0 !important;
  }
  .case-canvas img, .case-flow img, .case-screen--fit > img {
    display: block;
    width: calc(100% - 32px) !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
  }
  .case-screen--bleed > img, .case-screen--bleed > video, .case-screen--bleed > figure {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 26px 0 0 !important;
  }
  .case-screen--bleed figure img, .case-screen--bleed figure video { width: 100% !important; height: auto !important; }
  .video-play { width: 64px; height: 64px; }
  /* keep the play button anchored over the video when the layout linearizes */
  .case-screen--bleed > figure.case-player { position: relative !important; }
  .case-lede {
    width: auto !important;
    max-width: 460px;
    padding: 0 24px;
    font-size: 19px !important;
    line-height: 1.4 !important;
  }
  .m-hide, .case-bleed { display: none !important; }
  figure[data-glass] canvas { display: none !important; }
  .m-desktop { display: none !important; }
  .m-mobile { display: block !important; }

  /* outro: lede + logo grouped on the brand color */
  .case-page > .case-outro-band {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: 100% !important;
    margin: 48px 0 0 !important;
    padding: 56px 0 48px;
  }
  .case-outro-band > * { position: static !important; transform: none !important; margin: 0 !important; }

  /* footer brand logos (small icon+name rows) */
  .f-logo { display: flex; justify-content: center; }
  .f-logo img { height: 30px !important; width: auto !important; }

  /* --- credits --- */
  .case-credits { width: auto !important; margin: 44px 20px 0 !important; }
  .case-credits-title { font-size: 11px; letter-spacing: 1.5px; margin-bottom: 16px; }
  .case-credits-row { display: block; padding: 14px 0; }
  .case-credits-row dt { width: auto; font-size: 10px; }
  .case-credits-row dd { margin-top: 5px; font-size: 15px; }

  .s-label { display: block; padding: 0 24px; font-size: 10px; letter-spacing: 1px; }
  .s-head { width: auto; padding: 0 24px; font-size: 24px; line-height: 1.25; }
  .s-body { width: auto; padding: 0 24px; font-size: 15px; line-height: 1.5; }
  .s-brief-text { width: auto !important; padding: 0 24px; font-size: 19px; line-height: 1.45; }
  .s-table { width: calc(100% - 48px) !important; }
  .s-table > div { height: auto; padding: 13px 0; font-size: 13px; gap: 16px; }
  .s-table > div > span:last-child { text-align: right; }
  .s-summary-list { width: auto !important; padding: 0 24px; font-size: 15px; line-height: 1.5; }
  .case-page > a.next-case { position: relative !important; top: auto !important; width: 100% !important; height: auto !important; padding: 32px 20px 0; }
  html.case-enter .case-cover > * { opacity: 1; transform: none; }
  .next-case > *, .next-case-clip > * { position: static !important; transform: none !important; }
  .next-case-logo, .next-case-talk, .next-case-menu, .next-case-place { display: none; }
  .next-case-lbl, .next-case-scroll { text-align: center; }
  .next-case-scroll { margin-top: 10px; opacity: 0.75; }
  .next-case-pct { display: none; }
  .next-case-giant { font-size: 26vw; line-height: 1.2; text-align: center; margin-bottom: -7vw; }
}