/* ============================================================================
   S7 · The Shape of the Work — css/scenes/work.css
   Paper, ink. Six client words, one line-drawn system each.
   Layers:
     1. base  = the still edition and the no-JS page: a vertical list, glyphs drawn. This is the key pose.
     2. html.motion, landscape or ≥1024px: the horizontal track the scrub glides; words cross with difference.
     3. html.motion, portrait <1024px (phones, portrait tablets): the stack; the next word climbs over the stuck one.
   In both motion editions the caption + glyph (.work__body) carry their word's transform and fade on its clock.
   Every class is work__ / work--. Tokens are re-pointed at ink on paper for the whole section so the plate
   never has to be right for this chapter to read.
   ========================================================================== */

.scene--work {
  --fg: var(--ink);
  --fg-2: color-mix(in srgb, var(--ink) 62%, transparent);
  --fg-3: color-mix(in srgb, var(--ink) 42%, transparent);
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --plate-bg: var(--paper);
  --work-word: 16vw;          /* the client word; --fit shrinks the two long ones under 90vw */
  --work-band: max(30svh, calc(var(--header-h) + 60px + 2.3 * var(--serif-xl))); /* top of the word band, clear of the headline */
  --work-foot: max(var(--gutter), 24px);
  --work-glyph: min(34vw, 55svh);
  --gs: 1.2;                   /* glyph render scale (rendered px / 400); JS measures it so strokes stay ~1.5px */
  color: var(--ink);
}
.scene--work .scene__stage {
  background: var(--paper);
  color: var(--ink);
}
.work__panel[data-id="shiseido"] { --fit: 0.9; }
.work__panel[data-id="metrobank"] { --fit: 0.67; }

/* ---------- 1. Base: the list (still edition, no-JS, and the phone flow) ---------- */
.work__h,
.work__nda {
  position: static;
}
.scene--work .scene__stage {
  padding-top: calc(var(--header-h) + 8px);
}
.work__h {
  margin: 0 var(--gutter);
}
.work__nda {
  margin: 28px var(--gutter) 0;
  max-width: 26ch;
}
.work__nda span {
  display: block;
}
.work__track {
  padding-top: clamp(40px, 6svh, 72px);
}
.work__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "word word"
    "card card"
    "foot glyph";
  align-items: end;
  column-gap: clamp(24px, 3vw, 56px);
  row-gap: 20px;
  padding: 0 var(--gutter) clamp(48px, 8svh, 96px);
}
.work__word {
  grid-area: word;
  justify-self: start;
  display: block;
  font-size: calc(var(--work-word) * var(--fit, 1));
  line-height: 0.86;
  white-space: nowrap;
  text-align: left;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.work__card {
  position: static;
  grid-area: card;
  justify-self: start;
}
.work__card-role {
  color: var(--ink);
}
.work__card-months {
  margin-top: 4px;
  color: var(--fg-2);
  letter-spacing: 0.04em;
}
.work__card-stack {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.work__card-stack li + li {
  margin-top: 2px;
}
.work__body {
  display: contents;
}
.work__foot {
  grid-area: foot;
  align-self: end;
}
.work__line {
  max-width: 24ch;
}
.work__meta {
  margin-top: 10px;
}
.work__glyph {
  grid-area: glyph;
  width: var(--work-glyph);
  color: var(--ink);
}
.work__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.work__svg .work__strokes {
  stroke-width: calc(1.5 / var(--gs));
}
.work__space {
  display: none;
}

/* phones in the list: one column, glyph full width, word at 22vw */
@media (max-width: 767px) {
  .scene--work {
    --work-word: 22vw;
    --work-glyph: min(100%, 78vw);
  }
  .work__panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "word"
      "card"
      "foot"
      "glyph";
    row-gap: 18px;
    padding-bottom: clamp(48px, 9svh, 80px);
  }
  .work__panel[data-id="shiseido"] { --fit: 0.66; }
  .work__panel[data-id="metrobank"] { --fit: 0.49; }
  .work__panel[data-id="razer"],
  .work__panel[data-id="gcash"],
  .work__panel[data-id="water"] { --fit: 0.92; }
  .work__word {
    min-height: 48px;
  }
  .work__glyph {
    justify-self: start;
  }
  .work__nda {
    margin-top: 20px;
  }
}

/* tablets: the word and the drawing take more of the screen */
@media (min-width: 768px) and (max-width: 1023px) {
  .scene--work {
    --work-word: 19vw;
    --work-glyph: min(44vw, 55svh);
  }
  .work__panel[data-id="shiseido"] { --fit: 0.76; }
  .work__panel[data-id="metrobank"] { --fit: 0.56; }
}

/* ---------- 2. Motion, landscape and ≥1024px: the horizontal track ---------- */
@media (orientation: landscape), (min-width: 1024px) {
  html.motion .scene--work .scene__stage {
    padding-top: 0;
  }
  html.motion .work__h {
    position: absolute;
    top: calc(var(--header-h) + 8px);
    left: var(--gutter);
    margin: 0;
  }
  html.motion .work__nda {
    position: absolute;
    z-index: 2;
    top: calc(var(--header-h) + 36px);
    left: var(--gutter);
    margin: 0;
  }
  html.motion .work__track {
    display: flex;
    width: 600vw;
    height: 100svh;
    padding: 0;
    background: var(--paper); /* the backdrop the difference blend works against: the track is the isolated group */
  }
  html.motion .work__panel {
    display: block;
    flex: none;
    width: 100vw;
    height: 100svh;
    padding: 0;
  }
  html.motion .work__word {
    position: absolute;
    top: var(--work-band);
    left: var(--gutter);
    margin: 0;
  }
  html.motion .work__card {
    position: absolute;
    top: calc(var(--work-band) + var(--work-word) * var(--fit, 1) * 0.86 + 14px);
    left: var(--gutter);
  }
  /* the unit's caption and glyph: one box, so the word's transform carries both */
  html.motion .work__body {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  html.motion .work__foot {
    position: absolute;
    left: var(--gutter);
    bottom: var(--work-foot);
    z-index: 1;
    max-width: calc(100vw - 2 * var(--gutter) - var(--work-glyph) - 24px);
  }
  html.motion .work__glyph {
    position: absolute;
    right: var(--gutter);
    bottom: var(--work-foot);
  }
}
/* the crossing, in both motion editions */
html.motion .work__word--blend {
  color: #fff;
  mix-blend-mode: difference; /* white ⊖ paper = ink; white ⊖ (white ⊖ paper) = paper: the overlap is a hole */
}

/* landscape phones: the track, words at 14vh, the headline moved to the right so the band can sit higher */
@media (max-height: 500px) and (orientation: landscape) {
  html.motion .scene--work {
    --work-word: 14vh;
    --work-band: 27svh;
    --work-glyph: min(34vw, 50svh);
    --serif-l: 18px;
    --serif-xl: 20px;
  }
  html.motion .work__nda {
    left: auto;
    right: var(--gutter);
    top: calc(var(--header-h) + 6px);
    text-align: right;
  }
  html.motion .work__panel[data-id="shiseido"],
  html.motion .work__panel[data-id="metrobank"] { --fit: 1; }
  html.motion .work__line {
    max-width: 30ch;
  }
  html.motion .work__meta {
    margin-top: 6px;
  }
}

/* ---------- 3. Motion, portrait below 1024px (phones, portrait tablets): the stack ----------
   The panels sit on top of each other in the sticky stage. One unit at a time: word, then its one-liner and
   employer line, then its glyph, as one column. The next word climbs from below, overlaps the stuck one
   (difference: a hole), pushes it off the top whole, and takes the band. */
@media (orientation: portrait) and (max-width: 1023px) {
  html.motion .scene--work {
    --work-word: 22vw;
    --work-glyph: min(calc(100vw - 2 * var(--gutter)), 60svh);
    --work-band: max(30svh, calc(var(--header-h) + 64px + 2.3 * var(--serif-xl)));
    --work-gap: clamp(18px, 2.6svh, 28px);
  }
  html.motion .scene--work .scene__stage {
    padding-top: 0;
  }
  html.motion .work__h {
    position: absolute;
    top: calc(var(--header-h) + 8px);
    left: var(--gutter);
    margin: 0;
  }
  html.motion .work__nda {
    position: absolute;
    z-index: 2;
    top: calc(var(--header-h) + 34px);
    left: var(--gutter);
    right: var(--gutter);
    margin: 0;
  }
  html.motion .work__track {
    position: relative;
    height: 100svh;
    padding: 0;
    background: var(--paper);
  }
  html.motion .work__panel {
    position: absolute;
    inset: 0;
    display: block;
    padding: 0;
  }
  html.motion .work__word {
    position: absolute;
    top: var(--work-band);
    left: var(--gutter);
    margin: 0;
    min-height: 48px;
  }
  html.motion .work__card {
    position: absolute;
    z-index: 6;
    top: calc(var(--work-band) + var(--work-word) * var(--fit, 1) * 0.86 + 12px);
    left: var(--gutter);
  }
  html.motion .work__body {
    display: block;
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    top: calc(var(--work-band) + var(--work-word) * var(--fit, 1) * 0.86 + var(--work-gap));
    pointer-events: none;
  }
  html.motion .work__line {
    max-width: 26ch;
  }
  html.motion .work__glyph {
    width: var(--work-glyph);
    margin-top: calc(var(--work-gap) + 6px);
  }
  html.motion .work__space {
    display: none;
  }
}
/* portrait tablets: the same column, the drawing held to the lower half */
@media (orientation: portrait) and (min-width: 600px) and (max-width: 1023px) {
  html.motion .scene--work {
    --work-word: 19vw;
    --work-glyph: min(72vw, 36svh * 1.667);
  }
}