/* mt-s2.css: section 2 of /divorce-maintenance/ - 家庭資產狀況與贍養費的關係 (the precept "Process Orbit").
   Spec: docs/design/maintenance-v4/section-2.md rows 1-7 + the judge's work order (rulings LAYOUT, CURVE,
   STEP BLOCK, SCROLL FEEL, ART). Measured source: docs/research/2026-09-24-precept-redecode/SPEC.md.

   Rules this file keeps:
   1. DEFAULT = FINAL STATE. Without JS or under reduced motion mt-s2.js never adds .s2-armed /
      .is-pinned, so the section reads: title block, then the three steps stacked, each with its still.
      No pin, no dial, no draw-in.
   2. ONE WRITER PER PROPERTY. mt-s2.js writes, per frame: the dial group's SVG transform, the lit arc
      and lit ticks paths, each ruler label's transform + opacity, the odometer column transform and
      the art zoom transform. On resize only: the layout custom properties (--s2-*) and the SVG
      geometry. Everything below is either derived from those properties or a class-keyed one-shot
      tween on OTHER properties (step text, pill, scene fade, line draw-in, amber bloom, video fade).
   3. ONE TYPE SCALE. H2 = the site's .h2 unmodified; step titles = .mt-h3; numbers = .mt-num (serif
      400, never bold); label/intro/body = the page's shared .mt-label/.mt-intro/.mt-body. */

.mt .mt-s2 {
  --s2-ease: cubic-bezier(0.08, 0.78, 0.56, 1);
  --s2-cream: #F2F3EE;
  --s2-num-fs: clamp(48px, 4.4vw, 76px);
  --s2-row: calc(var(--s2-num-fs) * 2.2);
  position: relative; padding: 140px 0; background: var(--green); color: var(--on-dark);
}
.mt .mt-s2 .mt-label, .mt .mt-s2 .mt-intro, .mt .mt-s2 .mt-body { color: var(--on-dark-mute); }
.mt .mt-s2 .h2 { margin: 12px 0 0; color: var(--on-dark); }
/* lesson 4: the H2 may only break BETWEEN its two phrases, never inside one, at any width */
.mt .s2-ph { display: inline-block; white-space: nowrap; }

/* ================= the static reading (default, reduced motion, no JS) ================= */
.mt .s2-stage { width: min(var(--wrap), calc(100% - 2 * var(--pad))); margin-inline: auto; }
.mt .s2-dial, .mt .s2-art, .mt .s2-odo { display: none; }
.mt .s2-head { max-width: 640px; }
.mt .s2-copy { margin-top: 56px; }
.mt .s2-list { display: grid; gap: 72px; margin: 0; padding: 0; list-style: none; }
.mt .s2-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; column-gap: clamp(28px, 4vw, 64px); align-content: center; }
/* the still spans every row; the spare height goes to the two 1fr rows, so the text stays together
   and centred beside its still instead of being stretched apart */
.mt .s2-step > * { grid-column: 1; }
.mt .s2-count-row { grid-row: 2; }
.mt .s2-h3 { grid-row: 3; }
.mt .s2-text { grid-row: 4; }
.mt .s2-still { grid-column: 2; grid-row: 1 / -1; align-self: center; margin: 0; }
.mt .s2-still img { display: block; width: 100%; height: auto; }
.mt .s2-count-row { display: flex; align-items: center; gap: 16px; }
.mt .s2-num { font-size: 56px; color: var(--on-dark); }
.mt .s2-count {
  display: inline-block; padding: 5px 12px 4px; border: 1px solid rgba(242,243,238,.34); border-radius: 999px;
  font-family: var(--sans); font-weight: 400; font-size: 13px; line-height: 1.3; letter-spacing: .08em; color: var(--on-dark-mute);
  white-space: nowrap;
}
.mt .s2-h3 { margin: 14px 0 0; color: var(--on-dark); white-space: nowrap; }
.mt .s2-text { margin: 10px 0 0; max-width: 30em; text-wrap: pretty; }

/* ================= armed (JS on, motion allowed) ================= */
.mt .mt-s2.s2-armed { padding: 0; }
.mt .s2-pin.is-pinned { height: calc(var(--screen) * 3); }
.mt .is-pinned .s2-stage { position: sticky; top: 0; width: auto; height: var(--screen); margin: 0; overflow: hidden; }

/* the dial: one SVG over the whole stage; geometry comes from mt-s2.js (viewBox = stage px) */
.mt .is-pinned .s2-dial { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mt .s2-arc, .mt .s2-ticks { fill: none; stroke: rgba(242,243,238,.30); stroke-width: 1; }
.mt .s2-lit { stroke: var(--s2-cream); }
.mt .s2-brackets { fill: none; stroke: rgba(242,243,238,.55); stroke-width: 1; }
.mt .s2-dot { fill: #E9A93A; }
.mt .s2-cap { font-family: var(--sans); font-weight: 400; font-size: 13px; letter-spacing: .12em; fill: var(--s2-cream); dominant-baseline: central; }

/* the title block: inside the stage, all three steps, one left edge with the step text */
.mt .is-pinned .s2-head { position: absolute; left: var(--s2-l); top: var(--s2-head-t); width: var(--s2-head-w); max-width: none; }
.mt .is-pinned .s2-head .mt-intro { margin-top: 12px; max-width: 34em; }

/* the step block */
.mt .is-pinned .s2-copy { position: absolute; left: var(--s2-l); top: var(--s2-copy-t); width: var(--s2-col); margin: 0; display: grid; }
.mt .is-pinned .s2-odo {
  display: block; grid-area: 1 / 1; align-self: start; justify-self: start; height: var(--s2-row); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.mt .s2-odo-col { will-change: transform; }
.mt .s2-odo-col > span { display: block; height: var(--s2-row); line-height: var(--s2-row); font-size: var(--s2-num-fs); color: var(--on-dark); white-space: nowrap; }
.mt .is-pinned .s2-list { grid-area: 1 / 1; display: grid; gap: 0; }
/* align-content:start is load-bearing: the static rule's align-content:center also applies to a BLOCK
   container in current Chromium, and centred the shorter steps 14px lower than the tallest one */
.mt .is-pinned .s2-step { grid-area: 1 / 1; display: block; align-content: start; visibility: hidden; }
.mt .is-pinned .s2-step.is-on { visibility: visible; }
.mt .is-pinned .s2-still, .mt .is-pinned .s2-num { display: none; }
/* the pill rides beside the odometer, centred on its row */
.mt .is-pinned .s2-count-row { height: var(--s2-row); padding-left: calc(var(--s2-odo-w, 1.3em) + 18px); }
.mt .is-pinned .s2-h3 { margin-top: 2px; }

/* step change (precept one-shot): the outgoing block is cut (no transition), the incoming pill fades
   up 14px, then each rendered line slides up inside its own mask, +90ms per line (inline delay). */
.mt .is-pinned .s2-count { opacity: 0; transform: translateY(14px); transition: none; }
.mt .is-pinned .is-on .s2-count { opacity: 1; transform: none; transition: opacity .76s var(--s2-ease), transform .76s var(--s2-ease); }
.mt .s2-ln { display: block; overflow: hidden; }
.mt .s2-ln-i { display: block; }
/* transition:none is load-bearing: each line carries an inline transition-delay (the +90ms enter
   stagger); without it the default 'all 0s <delay>' also delayed the inherited visibility:hidden, so
   an outgoing step's lower lines lingered up to 0.36s instead of being cut (probe-mt-s2 check d) */
.mt .is-pinned .s2-ln-i { transform: translateY(110%); transition: none; }
.mt .is-pinned .is-on .s2-ln-i { transform: none; transition: transform .76s var(--s2-ease); }

/* the art: right column (stacked layouts: between title and step text); the box is a fitted 4:3
   (mt-s2.js) so the ink-box percentages map straight onto it; the zoom (1 -> 1.06, raw progress)
   is written on .s2-zoom and the box is pre-shrunk by 1.06 so the zoomed art stays in its lane. */
.mt .is-pinned .s2-art { display: block; position: absolute; left: var(--s2-art-l); top: var(--s2-art-t); width: var(--s2-art-w); height: var(--s2-art-h); }
.mt .s2-zoom { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
/* the zoom wrapper is an isolated group (transform), so the screened loop blends against what is
   painted INSIDE it: the section green is painted here, else the loop's black would show as black */
.mt .is-pinned .s2-zoom { background: var(--green); }
/* EDIT ROUND 1 (R2): the scene change is SCROLL-LINKED. mt-s2.js writes, per frame, from each scene's
   approach p = 1 - |u - k| (0..1): the scene's opacity (smoothstep(p): two neighbours always sum to
   1, so a dissolve never shows an empty frame), its drift (translateY 16px -> 0, scale 1.02 -> 1),
   the lines' draw-in mask position (fully drawn by p = .6) and the amber bloom over the last 40%
   (opacity 0 -> 1, scale .85 -> 1 from the amber's own centre). Nothing here transitions any of
   those properties; the values below are only the state before the first frame. */
.mt .s2-scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform-origin: 50% 50%; }
.mt .s2-scene > img, .mt .s2-scene > video, .mt .s2-amber-b, .mt .s2-amber-b > img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
/* the lines' draw-in: a soft diagonal mask edge, top-left -> bottom-right. Mask 300% of the box; the
   soft edge is 45%-55% of the gradient, so position 83% = fully hidden and 17% = fully shown. */
.mt .s2-lines {
  -webkit-mask-image: linear-gradient(to bottom right, #000 45%, transparent 55%);
          mask-image: linear-gradient(to bottom right, #000 45%, transparent 55%);
  -webkit-mask-size: 300% 300%; mask-size: 300% 300%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 83% 83%; mask-position: 83% 83%;
  transition: opacity .2s linear;
}
/* the amber's bloom is written every frame (opacity + scale): its own compositor layer keeps that off the
   raster path (A/B at 1440, 1x CPU: removing the amber layer took frame p95 from 33 to 17ms in 2 of 3 runs) */
.mt .s2-amber { opacity: 0; transform: scale(.85); will-change: transform, opacity; }
/* the loop (LINES ONLY, cream ink on pure black, screened onto the green) sits between the lines still
   and the amber still. It idles at .01 (so the browser keeps presenting its frames) and fades in over
   300ms only once mt-s2.js has SEEN it present frames (requestVideoFrameCallback; fallback: currentTime
   advancing across 2 timeupdates) -> .is-playing; 300ms later the lines still fades out under it
   (.is-looping). R2/R3: the moment u leaves the step (|u - k| > .02) both cross back over 200ms (the
   loop keeps playing through the fade, then pauses). If the loop stalls, errors, pauses or is not
   ready, .s2-now puts the lines still back AT ONCE (no transition). */
.mt .s2-scene > video { opacity: .01; mix-blend-mode: screen; transition: opacity .2s linear; }
.mt .s2-scene > video.is-playing { opacity: 1; transition: opacity .3s linear; }
.mt .s2-scene.is-looping .s2-lines { opacity: 0; transition: opacity .3s linear; }
.mt .s2-scene.s2-now .s2-lines, .mt .s2-scene.s2-now > video { transition: none !important; }
/* the amber breathes while a step is settled (.is-settled, mt-s2.js): opacity 1 <-> .9, scale
   1 <-> 1.02 from the amber's own centre, 3s. On the WRAPPER, so it never shares a property with
   the bloom tween on the img inside it. */
.mt .s2-scene.is-settled .s2-amber-b { animation: s2-breathe 3s ease-in-out infinite; }
@keyframes s2-breathe { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: .9; transform: scale(1.02); } }

/* ================= phone (< 768): thin arc on the left edge, labels hidden ================= */
@media (max-width: 767px) {
  .mt .mt-s2 { padding: 80px 0; --s2-num-fs: 36px; --s2-row: calc(var(--s2-num-fs) * 1.8); }
  .mt .s2-copy { margin-top: 36px; }
  .mt .s2-list { gap: 48px; }
  .mt .s2-step { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .mt .s2-step > * { grid-row: auto; }
  .mt .s2-still { grid-column: 1; grid-row: auto; order: -1; margin-bottom: 16px; }
  .mt .s2-num { font-size: 40px; }
  .mt .s2-cap { display: none; }
  .mt .mt-s2 .mt-intro { font-size: 15px; line-height: 1.7; }
  .mt .s2-text { font-size: 15px; line-height: 1.7; }
  .mt .is-pinned .s2-count-row { padding-left: calc(var(--s2-odo-w, 1.3em) + 12px); }
  .mt .is-pinned .s2-head .mt-intro { margin-top: 8px; }
  .mt .is-pinned .s2-h3 { margin-top: 0; }
  .mt .is-pinned .s2-text { margin-top: 6px; }
}
/* short phones (320x568 class): buy vertical room for the art without touching the H2/H3 scale */
@media (max-width: 767px) and (max-height: 700px) {
  .mt .mt-s2 { --s2-num-fs: 32px; --s2-row: calc(var(--s2-num-fs) * 1.7); }
  .mt .mt-s2 .mt-intro, .mt .s2-text { font-size: 14px; line-height: 1.6; }
  .mt .is-pinned .s2-head .mt-intro { margin-top: 6px; }
  .mt .mt-s2 .h2 { margin-top: 6px; }
}
/* tablet / portrait: the stacked stage keeps the desktop dial, numbers a notch smaller */
@media (min-width: 768px) and (max-width: 1099px) {
  .mt .mt-s2 { --s2-num-fs: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .mt .s2-scene, .mt .s2-lines, .mt .s2-amber, .mt .s2-count, .mt .s2-ln-i { transition: none !important; }
  .mt .s2-amber-b { animation: none !important; }
}