/* ============================================================================
   case.css: the eight case studies as editorial stories (2026-09-25).

   Loaded after pages.css by /project/<slug> only. pages.css section 2 is the
   room shell these pages have always had (the frame, TOAI MEDIA, HOME, SCROLL
   FOR INFO, the blurred plate behind the page); this file sets the story in
   it:

     the opening     the case's own hero picture, full bleed, pushing in
                     slowly; the kicker and the title set big over it; the
                     headline result as a huge count-up
     the story       the intro set as a lead with a drop capital, the section
                     labels numbered, the highlights as a numbered list
     the receipts    every screenshot framed as a panel with a caption; a
                     press opens it full size (case.js)
     the charts      only the figures the page itself states, drawn by case.js
                     from the sentence that states them

   Reduced motion: nothing moves, nothing waits to be revealed.
   ========================================================================== */

.case {
  --case-col: 1100px;
  --case-measure: 760px;
  --case-face: var(--font-display, 'Orbitron', sans-serif);
  --case-label: var(--font-label, 'Share Tech Mono', monospace);
  --case-body: var(--font-body, 'DM Mono', monospace);
  --case-accent: var(--cyan-hot, #00f5ff);
  --case-line: rgba(242, 242, 245, 0.14);
  padding-top: 0;
}

/* HOME keeps the place it had before the opening went full bleed */
.case .room-btn--corner {
  top: calc(var(--room-pad) + 20px);
}

@media (max-width: 767px) {
  .case .room-btn--corner {
    top: calc(var(--room-pad) + 10px);
  }
}

/* ---- the opening ---------------------------------------------------------- */

.case-open {
  position: relative;
  align-self: center;
  display: grid;
  align-items: end;
  width: 100vw;
  min-height: 560px;
  height: 100vh;
  height: 100svh;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
}

.case-open-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--void);
  animation: caseDrift 18s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

.case-open-media .case-hero {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 45%;
  will-change: transform;
}

/* legibility for the words: UI over the picture, never in it */
.case-open::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 7, 7, 0.55) 0%, rgba(7, 7, 7, 0) 22%),
    linear-gradient(0deg, rgba(7, 7, 7, 0.94) 0%, rgba(7, 7, 7, 0.6) 32%, rgba(7, 7, 7, 0) 62%),
    linear-gradient(90deg, rgba(7, 7, 7, 0.55) 0%, rgba(7, 7, 7, 0) 60%);
}

.case-open-text {
  display: grid;
  justify-items: start;
  padding: 0 max(calc(var(--room-pad) + 20px), calc((100vw - var(--case-col)) / 2)) calc(var(--cue-space, 92px) + 16px);
}

/* the site's first-paint rule keeps the cue's height clear under a page's
   opening block: here that is the opening text's own bottom padding */
:root .case .case-open .case-head {
  max-width: none;
  margin: 0;
  padding-bottom: 0;
  gap: 18px;
}

.case-open .case-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--case-label);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.3em;
  color: rgba(242, 242, 245, 0.8);
}

.case-open .case-kicker::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--case-accent);
  box-shadow: 0 0 12px rgba(0, 245, 255, 0.6);
}

.case-open .case-h1 {
  max-width: 15ch;
  font-family: var(--case-face);
  font-size: var(--fs-hero, clamp(44px, 7vw, 120px));
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: var(--tracking-display, 0.02em);
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}

/* the headline result */
.case-stat {
  display: grid;
  justify-items: start;
  margin: 34px 0 0;
  padding-top: 26px;
  border-top: 1px solid rgba(242, 242, 245, 0.22);
}

.case-stat-num {
  display: block;
  font-family: var(--case-face);
  font-size: clamp(48px, 9vw, 150px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 60px rgba(0, 245, 255, 0.3), 0 2px 18px rgba(0, 0, 0, 0.4);
}

.case-stat-line {
  display: block;
  max-width: 62ch;
  margin-top: 14px;
  font-family: var(--case-label);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.22em;
  color: var(--case-accent);
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .case-open {
    min-height: 520px;
  }

  .case-open-text {
    padding: 0 calc(var(--room-pad) + 2px) 112px;
  }

  .case-open .case-kicker {
    font-size: 11px;
    letter-spacing: 0.24em;
  }

  /* the longest single words (DEALERSHIP, HAIRSTYLIST, CONSULTING) fit
     between the frame's bars */
  .case-open .case-h1 {
    font-size: clamp(28px, 10vw, 44px);
    line-height: 1.02;
  }

  .case-stat {
    margin-top: 22px;
    padding-top: 18px;
  }

  .case-stat-line {
    font-size: 11px;
    letter-spacing: 0.18em;
  }
}

/* ---- the story ------------------------------------------------------------- */

.case-body {
  max-width: var(--case-col);
  gap: 96px;
  padding-top: 40px;
}

.case-body .case-prose {
  width: 100%;
  max-width: var(--case-measure);
  font-family: var(--case-body);
  font-size: 16px;
  line-height: 1.7;
  color: #c9cbd1;
}

.case-body .case-prose a {
  color: var(--case-accent);
  text-underline-offset: 3px;
}

/* the lead: the first words of the story, larger, with a drop capital */
.case-body > .case-prose:first-child {
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.6;
  color: #eceef2;
}

.case-body > .case-prose:first-child p:first-child::first-letter {
  float: left;
  margin: 0.08em 0.14em 0 0;
  font-family: var(--case-face);
  font-size: 3.3em;
  font-weight: 700;
  line-height: 0.8;
  color: var(--case-accent);
  text-shadow: 0 0 24px rgba(0, 245, 255, 0.35);
}

/* the three chapters are numbered */
.case-body {
  counter-reset: chapter;
}

.case-part {
  gap: 30px;
  max-width: var(--case-col);
}

.case-part-label {
  counter-increment: chapter;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: var(--case-measure);
  font-family: var(--case-label);
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.32em;
  color: var(--case-accent);
}

.case-part-label::before {
  content: counter(chapter, decimal-leading-zero);
  font-family: var(--case-face);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #fff;
}

.case-part-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--case-line);
}

/* the highlights: a numbered editorial list */
.case-part ul {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: highlight;
  border-top: 1px solid var(--case-line);
}

.case-part li {
  counter-increment: highlight;
  position: relative;
  margin: 0;
  padding: 22px 0 21px 96px;
  border-bottom: 1px solid var(--case-line);
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.5;
  color: #e6e7ea;
}

.case-prose li + li {
  margin-top: 0;
}

.case-part li::before {
  content: counter(highlight, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 20px;
  font-family: var(--case-face);
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--case-accent);
  text-shadow: 0 0 22px rgba(0, 245, 255, 0.25);
}

/* case.js marks the figures in the copy so they read first */
.case-fig {
  color: #fff;
  font-weight: 500;
}

/* the empty spacer paragraphs the Webflow build left in the copy */
.case-prose p:empty {
  display: none;
}

@media (max-width: 767px) {
  .case-body {
    gap: 72px;
    padding-top: 28px;
  }

  .case-body .case-prose {
    font-size: 14.5px;
  }

  .case-part li {
    padding: 18px 0 17px 56px;
  }

  .case-part li::before {
    top: 18px;
  }
}

/* ---- the receipts ------------------------------------------------------------ */

.case-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  max-width: var(--case-col);
}

.case-receipt {
  position: relative;
  display: grid;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 14px;
  background: rgba(10, 12, 18, 0.72);
  border: 1px solid rgba(0, 245, 255, 0.16);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

/* four corner ticks, one gradient stack */
.case-receipt::before {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  --t: var(--case-accent);
  background-image:
    linear-gradient(var(--t), var(--t)), linear-gradient(var(--t), var(--t)),
    linear-gradient(var(--t), var(--t)), linear-gradient(var(--t), var(--t)),
    linear-gradient(var(--t), var(--t)), linear-gradient(var(--t), var(--t)),
    linear-gradient(var(--t), var(--t)), linear-gradient(var(--t), var(--t));
  background-repeat: no-repeat;
  background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px;
  background-position:
    left top, left top,
    right top, right top,
    right bottom, right bottom,
    left bottom, left bottom;
}

.case-receipt .case-img {
  display: block;
  width: 100%;
  height: clamp(280px, 34vw, 460px);
  object-fit: contain;
  background: rgba(0, 0, 0, 0.4);
}

.case-receipt--wide {
  max-width: var(--case-col);
}

.case-receipt--wide .case-img {
  height: auto;
  max-height: 78vh;
}

.case-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  font-family: var(--case-label);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: rgba(242, 242, 245, 0.76);
  text-transform: uppercase;
}

.case-cap-n {
  color: var(--case-accent);
  letter-spacing: 0.24em;
  white-space: nowrap;
}

/* the press to see it full size (case.js wraps the picture in a button) */
.case-zoom-btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.case-zoom-btn::after {
  content: '';
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(0, 245, 255, 0.5);
  background:
    linear-gradient(var(--case-accent), var(--case-accent)) 50% 50% / 12px 1px no-repeat,
    linear-gradient(var(--case-accent), var(--case-accent)) 50% 50% / 1px 12px no-repeat,
    rgba(7, 7, 7, 0.7);
  opacity: 0.8;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.case-zoom-btn:hover::after,
.case-zoom-btn:focus-visible::after {
  opacity: 1;
  transform: scale(1.08);
}

.case-zoom-btn:focus-visible {
  outline: 2px solid var(--case-accent);
  outline-offset: 4px;
}

/* the full size view */
.case-zoom {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 64px 24px 28px;
  border: 0;
  color: var(--white);
  background: rgba(4, 5, 9, 0.94);
  overflow: hidden;
}

.case-zoom[open] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: 16px;
  animation: caseZoomIn 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.case-zoom::backdrop {
  background: rgba(4, 5, 9, 0.8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.case-zoom-img {
  display: block;
  max-width: min(100%, 1400px);
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.case-zoom-cap {
  max-width: 70ch;
  margin: 0;
  font-family: var(--case-label);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-align: center;
  color: rgba(242, 242, 245, 0.78);
  text-transform: uppercase;
}

.case-zoom-x {
  position: absolute;
  top: 18px;
  right: 22px;
}

@keyframes caseZoomIn {
  from { opacity: 0; transform: scale(0.985); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 767px) {
  .case-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .case-receipt {
    padding: 10px;
  }

  .case-receipt .case-img {
    height: auto;
    max-height: 70vh;
  }

  .case-zoom {
    padding: 60px 12px 20px;
  }
}

/* ---- the charts ---------------------------------------------------------------- */

.case-chart {
  position: relative;
  width: 100%;
  max-width: var(--case-measure);
  margin: 0;
  padding: 22px 24px 18px;
  background: rgba(10, 12, 18, 0.72);
  border: 1px solid rgba(0, 245, 255, 0.16);
}

.case-chart figcaption {
  margin-bottom: 14px;
  font-family: var(--case-label);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: rgba(242, 242, 245, 0.76);
  text-transform: uppercase;
}

.case-chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.case-chart .c-axis {
  stroke: rgba(242, 242, 245, 0.24);
  stroke-width: 1;
}

.case-chart .c-grid {
  stroke: rgba(242, 242, 245, 0.07);
  stroke-width: 1;
}

.case-chart .c-line {
  fill: none;
  stroke: var(--case-accent);
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(0, 245, 255, 0.7));
}

.case-chart .c-area {
  opacity: 0.9;
}

.case-chart .c-dot {
  fill: #fff;
  stroke: var(--case-accent);
  stroke-width: 2;
}

.case-chart .c-dot--end {
  fill: var(--magenta, #e218bd);
  stroke: #fff;
}

.case-chart text {
  font-family: var(--case-label);
  fill: rgba(242, 242, 245, 0.72);
  font-size: 13px;
  letter-spacing: 0.14em;
}

.case-chart .c-val {
  font-family: var(--case-face);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  fill: #fff;
}

.case-chart .c-val--end {
  font-size: 30px;
}

/* the drawing, when case.js adds .is-drawn on enter */
.case-chart.is-armed .c-line {
  stroke-dasharray: var(--len) var(--len);
  stroke-dashoffset: var(--len);
}

.case-chart.is-armed .c-area,
.case-chart.is-armed .c-dot--end,
.case-chart.is-armed .c-val--end {
  opacity: 0;
}

.case-chart.is-drawn .c-line {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.45, 0, 0.2, 1);
}

.case-chart.is-drawn .c-area {
  opacity: 0.9;
  transition: opacity 1.2s ease 0.5s;
}

.case-chart.is-drawn .c-dot--end,
.case-chart.is-drawn .c-val--end {
  opacity: 1;
  transition: opacity 0.4s ease 1.2s;
}

/* the PageSpeed rings on the website builds */
.case-gauges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.case-gauge {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.case-gauge svg {
  width: min(128px, 100%);
}

.case-gauge .g-track {
  fill: none;
  stroke: rgba(242, 242, 245, 0.12);
  stroke-width: 7;
}

.case-gauge .g-arc {
  fill: none;
  stroke: var(--case-accent);
  stroke-width: 7;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 5px rgba(0, 245, 255, 0.6));
}

.case-chart.is-drawn .case-gauge .g-arc {
  transition: stroke-dashoffset 1.6s cubic-bezier(0.45, 0, 0.2, 1);
}

.case-gauge .g-num {
  font-family: var(--case-face);
  font-size: 30px;
  font-weight: 700;
  fill: #fff;
  letter-spacing: 0;
}

.case-gauge span {
  font-family: var(--case-label);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(242, 242, 245, 0.8);
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .case-chart {
    padding: 16px 14px 14px;
  }

  .case-chart .c-val {
    font-size: 18px;
  }

  .case-chart .c-val--end {
    font-size: 22px;
  }

  .case-gauges {
    gap: 8px;
  }

  .case-gauge span {
    font-size: 9.5px;
    letter-spacing: 0.1em;
  }
}

@keyframes caseDrift {
  from { scale: 1; }
  to { scale: 1.05; }
}

@media (prefers-reduced-motion: reduce) {
  .case-open-media {
    animation: none;
  }

  .case-open-media .case-hero {
    will-change: auto;
  }

  .case-zoom[open] {
    animation: none;
  }

  .case-zoom-btn::after {
    transition: none;
  }
}

/* ------------------------------------------------------------ the next case
   Amir, 2026-09-25 (top 5 item 5): every case study ended in a dead end. Now
   the next one's opening picture fills the frame at the foot of the page,
   with its name and its number, and one tap goes on to it (the site's own
   page transition carries it); the last case goes on to the brief. Built
   like the opening frame, so leaving a case looks like arriving at one. */
.case-next {
  position: relative;
  display: grid;
  align-content: end;
  justify-items: start;
  width: 100vw;
  min-height: 520px;
  height: 88vh;
  height: 88svh;
  margin: 120px 0 0;
  padding: 0 max(calc(var(--room-pad) + 20px), calc((100vw - var(--case-col)) / 2)) calc(var(--cue-space, 92px) + 16px);
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}

/* the picture fades in from the page above rather than starting on an edge */
.case-next-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: #070707;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 24%);
}

.case-next-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: scale(1.08);
  filter: brightness(0.62) saturate(0.9);
  transition: transform 1.4s cubic-bezier(0.2, 0.7, 0, 1), filter 0.8s ease;
}

/* black under the words at the foot */
.case-next::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(7, 7, 7, 0) 0%,
    rgba(7, 7, 7, 0.18) 52%,
    rgba(7, 7, 7, 0.88) 100%
  );
  pointer-events: none;
}

.case-next:hover .case-next-img,
.case-next:focus-visible .case-next-img {
  transform: scale(1.02);
  filter: brightness(0.82) saturate(1);
}

.case-next:focus-visible {
  outline: 2px solid var(--case-accent);
  outline-offset: -8px;
}

.case-next-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--case-label);
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(242, 242, 245, 0.8);
}

.case-next-kicker::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--case-accent);
  box-shadow: 0 0 12px rgba(0, 245, 255, 0.6);
}

.case-next-name {
  margin-top: 18px;
  max-width: 15ch;
  font-family: var(--case-face);
  font-size: clamp(40px, 6.4vw, 104px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: var(--tracking-display, 0.02em);
  text-transform: uppercase;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}

.case-next-stat {
  display: grid;
  justify-items: start;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(242, 242, 245, 0.22);
}

.case-next-num {
  display: block;
  font-family: var(--case-face);
  font-size: clamp(44px, 7vw, 120px);
  font-weight: 700;
  line-height: 0.9;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 60px rgba(0, 245, 255, 0.3), 0 2px 18px rgba(0, 0, 0, 0.4);
}

.case-next-line {
  display: block;
  max-width: 62ch;
  margin-top: 12px;
  font-family: var(--case-label);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--case-accent);
}

.case-next--brief .case-next-line {
  margin-top: 0;
}

.case-next-go {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  padding: 12px 0;
  font-family: var(--case-label);
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #fff;
}

.case-next-go::after {
  content: '\2192';
  font-size: 18px;
  letter-spacing: 0;
  transition: transform 0.3s ease;
}

.case-next:hover .case-next-go::after,
.case-next:focus-visible .case-next-go::after {
  transform: translateX(6px);
}

@media (max-width: 767px) {
  .case-next {
    min-height: 480px;
    height: 82svh;
    margin-top: 80px;
    padding: 0 calc(var(--room-pad) + 2px) 112px;
  }

  .case-next-name {
    font-size: clamp(30px, 10vw, 44px);
    line-height: 1.02;
  }

  .case-next-kicker,
  .case-next-line,
  .case-next-go {
    font-size: 11px;
    letter-spacing: 0.24em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-next-img,
  .case-next-go::after {
    transition: none;
  }

  .case-next:hover .case-next-img {
    transform: scale(1.08);
  }
}