/* =======================================================================
   Case study — Germs.sg website  (Figma node 4005:810)
   A long-scroll case page that reuses the portfolio's paper / tape / grid
   language. Built in real px against the 1440-wide Figma frame; the content
   lives in a centred 1092px "paper sheet" column.
   ======================================================================= */

:root {
  --canvas-bg: #ededed;
  --ink:       #000000;
  --paper:     #ffffff;
  --rule:      rgba(0, 0, 0, 0.08);
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --font-sans: 'Open Sans', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* base font stays mono (matches homepage) so the reused nav + footer inherit
   correctly; body copy opts into Open Sans per-element below */
body.case {
  margin: 0;
  background: var(--canvas-bg);
  color: var(--ink);
  font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
}

/* ---------- fixed grid backdrop — verticals frame the centred column ---- */
.case-grid { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.case-grid__v {
  position: absolute; top: 0; height: 100%; width: 1px;
  left: calc(50% + (var(--x) - 720) * 1px);
  background: var(--rule);
}

/* ---------- the paper-sheet column ---------- */
.case-main {
  position: relative; z-index: 1;
  width: min(874px, calc(100% - 48px));   /* ~20% narrower than the Figma 1092 */
  margin: 160px auto 140px;   /* bottom gap keeps the sheet clear of the footer */
  background: var(--paper);
  padding: 32px;
  display: flex; flex-direction: column; gap: 32px;
}
/* subtle paper grain over the sheet, like the Figma texture layer */
.case-main::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: url('assets/case-germs/paper.png') repeat;
  background-size: 720px auto;
  opacity: 0.12; mix-blend-mode: multiply; pointer-events: none;
}
.case-main > * { position: relative; z-index: 1; }

/* corner tape */
.case-tape { position: absolute; width: 233px; height: auto; z-index: 3; pointer-events: none; }
.case-tape--tl { top: -58px; left: -82px; transform: scaleY(-1) rotate(-3deg); }
.case-tape--tr { top: -58px; right: -82px; transform: scaleX(-1) scaleY(-1) rotate(-3deg); }
.case-tape--bl { bottom: -54px; left: -82px; transform: rotate(182deg); }
.case-tape--br { bottom: -54px; right: -82px; transform: scaleY(-1) rotate(2deg); }

/* hero image */
.case-hero { width: 100%; aspect-ratio: 1028 / 530; overflow: hidden; }
.case-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* title bar */
.case-titlebar {
  background: var(--ink); color: #fff;
  display: flex; gap: 8px; align-items: flex-start; padding: 16px;
}
.case-titlebar__text { flex: 1 1 0; min-width: 0; text-transform: uppercase; }
.case-titlebar__title {
  margin: 0; font-family: var(--font-mono); font-weight: 700;
  font-size: 32px; letter-spacing: -0.96px; line-height: normal;
}
.case-titlebar__client {
  margin: 0; font-family: var(--font-mono); font-weight: 400;
  font-size: 16px; letter-spacing: -0.48px; line-height: normal;
}

/* buttons */
.case-btn {
  font-family: var(--font-mono); font-weight: 700; font-size: 18px;
  letter-spacing: -0.54px; text-transform: uppercase; text-decoration: none;
  color: #fff; border: 1px solid #fff; padding: 16px; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.case-btn:hover { background: #fff; color: var(--ink); }
.case-btn--solid { background: var(--ink); }

/* ---------- body ---------- */
.case-body {
  background: var(--paper); padding: 32px;
  display: flex; flex-direction: column; gap: 64px;
}
.case-sec { display: flex; flex-direction: column; gap: 12px; }
.case-sec h2 {
  margin: 0; font-family: var(--font-mono); font-weight: 700; font-size: 32px;
  letter-spacing: -0.96px; text-transform: uppercase; line-height: normal;
}
.case-sec p, .case-p {
  margin: 0; font-family: var(--font-sans); font-weight: 400; font-size: 16px;
  line-height: 1.5; letter-spacing: -0.48px; color: var(--ink);
}

/* ---------- scroll-driven phrase highlight (after jh3y) ----------
   Hand-picked phrases (<mark><span>…</span></mark>) get a lime highlighter
   sweep as they scroll in. A discrete --highlighted flip — driven by the
   scroll-driven view() timeline on Chrome, or the IntersectionObserver
   fallback in the page script elsewhere — moves a gradient's position, and
   the CSS transition makes the sweep glide. Text stays solid black. */
.case mark {
  --hl: #a3e635;         /* lime green — reads well under black text */
  --highlighted: 1;      /* default ON (no-JS / unsupported → shown) */
  background: transparent;
  color: inherit;
}

@supports (animation-timeline: view()) {
  .case mark {
    --highlighted: 0;    /* start OFF; the timeline flips it on */
    animation: case-hl steps(1) both;
    animation-timeline: view();
    animation-range: entry 100% cover 12%;
  }
}

.case mark span {
  background:
    linear-gradient(120deg, var(--hl) 50%, transparent 50%)
    110% 0 / 200% 100% no-repeat;
  background-position: calc((1 - var(--highlighted)) * 110%) 0;
  transition: background-position 0.8s ease;
  padding: 0.02em 0.08em;
  /* so the highlighter wraps cleanly onto each line of a multi-line phrase */
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

@keyframes case-hl { to { --highlighted: 1; } }

@media (prefers-reduced-motion: reduce) {
  .case mark { --highlighted: 1; animation: none; }
  .case mark span { transition: none; }
}

/* design-direction sub-group (tighter 24px rhythm, images + captions) */
.case-dd { display: flex; flex-direction: column; gap: 24px; align-items: center; }
.case-dd > * { width: 100%; }
.case-caption {
  margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.5;
  letter-spacing: -0.42px; color: rgba(0, 0, 0, 0.8); text-align: center;
}

.case-imgrow { display: flex; gap: 8px; align-items: center; }
.case-imgrow--h352 { height: 282px; }
.case-imgrow--h218 { height: 174px; }
.case-img { position: relative; overflow: hidden; height: 100%; }
.case-img--grow  { flex: 1 1 0; min-width: 0; }
.case-img--fixed { flex: 0 0 264px; width: 264px; }
.case-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-img--contain img { object-fit: contain; }
.case-plus {
  margin: 0; flex: 0 0 auto; font-family: var(--font-sans); font-weight: 700;
  font-size: 64px; letter-spacing: -1.92px; line-height: 1;
}
.case-half { flex: 1 1 0; min-width: 0; display: flex; align-items: center; }

/* outro */
.case-outro { display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; }
.case-outro__text {
  margin: 0; font-family: var(--font-mono); font-weight: 700; font-size: 24px;
  line-height: 1.5; letter-spacing: -0.72px; text-transform: uppercase;
}

/* Nav + footer are reused verbatim from the homepage (styles.css). */

/* ---------- mobile (≤700px) — matches the homepage nav breakpoint ----------
   The sheet fills the width, image rows collapse to a single column (images
   at natural aspect so nothing gets cropped), the title bar stacks, and the
   corner tape scales down so it frames without overflowing the narrow sheet. */
@media (max-width: 700px) {
  .case-main {
    margin: 84px auto 56px;   /* clears the sticky paper nav */
    padding: 18px;
    gap: 22px;
  }
  .case-body { padding: 18px; gap: 40px; }

  /* corner tape scaled down */
  .case-tape { width: 104px; }
  .case-tape--tl { top: -26px; left: -30px; }
  .case-tape--tr { top: -26px; right: -30px; }
  .case-tape--bl { bottom: -24px; left: -30px; }
  .case-tape--br { bottom: -24px; right: -30px; }

  /* title bar stacks; visit button goes full-width */
  .case-titlebar { flex-direction: column; align-items: stretch; gap: 14px; }
  .case-titlebar__title { font-size: 24px; letter-spacing: -0.02em; }
  .case-titlebar .case-btn { align-self: stretch; }

  .case-sec h2 { font-size: 23px; letter-spacing: -0.02em; }
  .case-dd { gap: 20px; }
  .case-outro__text { font-size: 18px; letter-spacing: -0.01em; }

  /* every image row collapses to one column; images show at natural aspect */
  .case-imgrow { flex-direction: column; height: auto; align-items: stretch; gap: 12px; }
  .case-img { width: 100%; flex: none; height: auto; }
  .case-img img { height: auto; object-fit: contain; }
  .case-img--fixed { width: 100%; }
  .case-plus { font-size: 38px; align-self: center; }
  .case-half { width: 100%; }
}