/* ═══════════════════════════════════════════════════
   Motion layer (his picks, 3 Oct 2026: 2, 3, 4, 6 and 7; 1 and 5 dropped).
   Each effect is switched on by a class on <html>, set by the head snippet
   (js/motion-head.js, inlined): m2 m3 m4 m6 m7. Everything here moves only
   transform and opacity (the compositor's work), except the title settle,
   which animates letter-spacing on a single line for one second.
   Nothing applies when the visitor's system asks for reduced motion: the
   head snippet sets no classes then.
   ═══════════════════════════════════════════════════ */

/* ── 2 · Lights up on the set ──
   Pictures beside the text and in galleries arrive dim and slightly pushed
   in, then light up and settle, once, as they reach the screen. */
html.m2 .cs-imgs .cs-fig img,
html.m2 .gallery .row img {
  opacity: .22; transform: scale(1.045);
  transition: opacity 1.3s cubic-bezier(.3, .6, .25, 1), transform 1.6s cubic-bezier(.2, .7, .2, 1);
}
html.m2 .cs-imgs .cs-fig img.lit,
html.m2 .gallery .row img.lit { opacity: 1; transform: none; }
html.m2 .cs-imgs .cs-fig, html.m2 .gallery .row { overflow: hidden; }

/* ── 3 · Living thumbnails (Work page) ──
   A slow push-in on hover; cards with a preview clip play it over the still. */
html.m3 .work-card img { transition: transform 2.6s cubic-bezier(.2, .7, .2, 1); }
html.m3 .work-card:hover img { transform: scale(1.07); }
html.m3 .work-card .frame { position: relative; }
.card-clip {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .7s ease; pointer-events: none; background: transparent;
}
.card-clip.on { opacity: 1; }

/* ── 4 · Titles that settle ──
   Page, project and chapter titles (and the name on the splash) open from a
   slightly wider tracking and fade up into their set spacing. --ls0 (the
   starting letter-spacing) is measured per title by js/motion.js. */
html.m4:not(.m4-ready) .page-title,
html.m4:not(.m4-ready) .proj-title,
html.m4:not(.m4-ready) .lockup .name,
html.m4 .cs-open h2:not(.settled) { opacity: 0; }
html.m4 .settled { animation: m4-settle 1.15s cubic-bezier(.2, .7, .2, 1) both; white-space: nowrap; }
@keyframes m4-settle { from { letter-spacing: var(--ls0); opacity: 0; } }
@media (max-width: 900px) { html.m4 .settled { white-space: normal; } }

/* ── 6 · Reading cues (case studies) ──
   The paragraph whose pictures are passing is at full ink; the others rest
   a step dimmer. The chapter number on the left carries a reading line. */
html.m6 .cs-scene .cs-txt { transition: opacity .7s ease; }
html.m6 .cs-scene:not(.reading) .cs-txt { opacity: .42; }
html.m6 .chap-rail a::after {
  content: ""; position: absolute; left: 12px; right: -14px; bottom: -5px; height: 1px;
  background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0));
  opacity: 0; transition: opacity .4s ease;
}
html.m6 .chap-rail a.on::after { opacity: .7; }
@media (max-width: 900px) { html.m6 .cs-scene:not(.reading) .cs-txt { opacity: 1; } }

/* ── 7 · Cinematic letterbox (full-width breaks) ──
   Thin bars ease in to a 2.39:1 frame as the picture reaches the middle of
   the screen, and back out as it leaves. Bars are scaled, never resized. */
html.m7 .cs-bleed { position: relative; overflow: hidden; }
.lb-bar {
  position: absolute; left: 0; right: 0; height: var(--bar, 0); background: #000;
  transform: scaleY(0); pointer-events: none; z-index: 2; will-change: transform;
}
.lb-bar.t { top: 0; transform-origin: top; }
.lb-bar.b { bottom: var(--capH, 0); transform-origin: bottom; }

/* ── preview panel (preview build only) ── */
.motion-panel {
  position: fixed; right: 14px; bottom: 14px; z-index: 300; background: rgba(11, 11, 12, .92);
  border: 1px solid #2a2a2c; padding: 12px 14px 10px; color: var(--ink); font: 11px/1.5 var(--font);
  letter-spacing: .06em; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); max-width: 260px;
}
.motion-panel b { display: block; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-dim); font-weight: 400; margin-bottom: 6px; }
.motion-panel label { display: flex; gap: 8px; align-items: center; cursor: pointer; padding: 2px 0; }
.motion-panel input { accent-color: #e9e8e4; }
.motion-panel .row2 { display: flex; gap: 10px; margin-top: 8px; }
.motion-panel button { background: none; border: 1px solid #3a3a3c; color: var(--ink-dim); font: inherit; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 4px 8px; cursor: pointer; }
.motion-panel button:hover { color: var(--ink); border-color: var(--ink-dim); }
.motion-panel.min label, .motion-panel.min .row2 { display: none; }
@media (max-width: 700px) { .motion-panel { left: 10px; right: 10px; max-width: none; bottom: 10px; } }