/* cu-motto.css: section 2 of /child-custody/ — the motto statement + the three parts.
   A copy of public/components/mt-s1.css (贍養費 v4 section 1, rulings A to I), renamed s1- -> cm- and
   scoped to .cu. What differs: the motto and the heading are two planned phrases each (one line per
   phrase at every width, sized to the longest, 12 units), and the seven photo cards are three text
   cards (no photo, no height spring, no drift): they keep only the pull-up and the kora row reveal.

   1. DEFAULT = FINAL STATE. Without JS or under reduced motion cu-motto.js never adds .is-pinned, so the
      section reads: eyebrow B, the two heading lines, the sub-line, then the three parts.
   2. ONE WRITER PER PROPERTY. cu-motto.js writes per frame: the knob transform, the ground opacity, the
      hero media opacity and two custom properties (--cm-a, --cm-m-s). The flip crossfades are
      class-keyed CSS tweens on OTHER elements. */

.cu .cu-motto { padding: 0; background: var(--paper); color: var(--ink); --cm-e: cubic-bezier(.44,0,.56,1); --cm-soft: #2F6B55; }
.cu .cm-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 120px; padding-bottom: 40px; }
.cu .cm-ebs { display: grid; justify-items: center; }
.cu .cm-eb { grid-area: 1 / 1; margin: 0; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .12em; line-height: 1.4; color: rgba(16,32,27,.62); }
.cu .cm-lines { display: grid; justify-items: center; margin-top: 28px; }
.cu .cm-lead, .cu .cm-head { margin: 0; font-family: var(--serif); font-weight: 500; font-size: min(60px, calc((100vw - 40px) / 12.5)); line-height: 1.22; letter-spacing: -.02em; color: var(--ink); }
/* each phrase stays on ONE line at every width (the 贍養費 judge rule); the size above fits the longest (12 units) */
.cu .cm-head > span, .cu .cm-lead-in { display: block; white-space: nowrap; }
/* edit round 1 (#83 row 1): the motto is ONE plain line (11 units), big: 26px at 320, 80px from 1000 up */
.cu .cm-lead { font-size: clamp(26px, 8vw, 80px); line-height: 1.2; }
.cu .cm-l2 { color: var(--cm-soft); }
.cu .cm-sub { margin: 24px 0 0; font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.8; color: var(--cu-mute); max-width: 34em; }

.cu .cm-switch { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; }
.cu .cm-track { position: relative; width: 44px; height: 24px; border-radius: 999px; background: rgba(242,243,238,.22); transition: background-color .8s var(--cm-e); }
.cu .cm-knob { position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #F2F3EE; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.cu .cm-switch-label { font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .12em; color: var(--paper); transition: color .8s var(--cm-e); }

/* ruling I, as amended by FIX 1 R5: the static reading (no JS, reduced motion) shows eyebrow A, the motto
   in ink, then the two heading lines and the sub-line, stacked. Only the switch, the green ground and
   eyebrow B (it names the parts that follow) exist in the moving version alone. */
.cu .cm-eb-b, .cu .cm-switch, .cu .cm-ground { display: none; }
.cu .cm-head { margin-top: 18px; }

/* ================= armed (JS on, motion allowed) ================= */
.cu .cm-pin.is-pinned .cm-lead, .cu .cm-pin.is-pinned .cm-head { grid-area: 1 / 1; margin-top: 0; }
.cu .cm-pin.is-pinned .cm-eb-b { display: block; }
.cu .cm-pin.is-pinned .cm-stage { background: var(--paper); }
.cu .cm-pin.is-pinned .cm-ground { display: block; position: absolute; inset: 0; z-index: 0; background: var(--green); }
.cu .cm-pin.is-pinned .cm-copy { padding-top: clamp(112px, 22vh, 260px); padding-bottom: 0; }
.cu .cm-pin.is-pinned .cm-eb-a { display: block; color: var(--on-dark-mute); }
.cu .cm-pin.is-pinned .cm-lead { display: block; color: var(--paper); }
.cu .cm-pin.is-pinned .cm-switch { display: inline-flex; }

.cu .is-pinned .cm-eb-a, .cu .is-pinned .cm-lead { opacity: 1; visibility: visible; transition: opacity .6s var(--cm-e) .4s, visibility 0s linear 0s; }
.cu .is-pinned .cm-eb-b, .cu .is-pinned .cm-l1, .cu .is-pinned .cm-l2, .cu .is-pinned .cm-sub { opacity: 0; visibility: hidden; transition: opacity .3s var(--cm-e) 0s, visibility 0s linear .3s; }
.cu .is-pinned .is-flipped .cm-eb-a, .cu .is-pinned .is-flipped .cm-lead { opacity: 0; visibility: hidden; transition: opacity .3s var(--cm-e) 0s, visibility 0s linear .3s; }
.cu .is-pinned .is-flipped .cm-eb-b, .cu .is-pinned .is-flipped .cm-l1 { opacity: 1; visibility: visible; transition: opacity .6s var(--cm-e) .4s, visibility 0s linear 0s; }
.cu .is-pinned .is-flipped .cm-l2 { opacity: 1; visibility: visible; transition: opacity .8s var(--cm-e) .4s, visibility 0s linear 0s; }
.cu .is-pinned .is-flipped .cm-sub { opacity: 1; visibility: visible; transition: opacity .8s var(--cm-e) .6s, visibility 0s linear 0s; }
.cu .is-pinned .is-flipped .cm-track { background: #7FA69B; }
.cu .is-pinned .is-flipped .cm-switch-label { color: #4F5754; }

@media (min-width: 900px) {
  .cu .is-pinned .cm-copy { opacity: var(--cm-a, 1); transform: translateY(calc(-300px * (1 - var(--cm-a, 1)))) scale(calc(1.1 - .1 * var(--cm-a, 1))); will-change: transform, opacity; }
}

/* ================= the three parts ================= */
.cu .cu-parts { position: relative; z-index: 2; padding: 0 0 120px; background: transparent; }
.cu .cm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1080px; margin: 0 auto; padding: 0; list-style: none; }
.cu .cm-card { position: relative; border-radius: var(--r-card); color: var(--on-dark); text-align: left; }
/* edit round 1 (#83 row 4): each card is a link to its section; the link carries the green ground */
.cu .cm-card-a { display: block; height: 100%; padding: 24px 26px 26px; border-radius: var(--r-card); background: var(--green); color: var(--on-dark); text-decoration: none; transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1), background-color .35s ease; }
.cu .cm-card-a:hover { transform: translateY(-4px); background: #13493A; box-shadow: 0 16px 32px rgba(15,59,46,.26); }
.cu .cm-card-a:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.cu .cm-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cu .cm-card-num { display: inline-block; font-size: 15px; padding: 5px 11px 4px; border: 1px solid rgba(242,243,238,.34); border-radius: 999px; color: var(--on-dark); }
.cu .cm-card-more { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .08em; color: var(--amber); white-space: nowrap; }
.cu .cm-card-arrow { display: inline-block; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.cu .cm-card-a:hover .cm-card-arrow, .cu .cm-card-a:focus-visible .cm-card-arrow { transform: translateX(4px); }
.cu .cm-card .cu-h3 { margin: 14px 0 0; color: var(--on-dark); }
.cu .cm-card-line { margin: 8px 0 0; color: rgba(242,243,238,.82); }

/* edit round 1 (#83 row 2): THE HOLD. cu-motto.js sets [data-cm-hold] only when the whole frame (heading +
   picture + cards) fits one screen: the cards' wrap sticks at the measured --cm-stick while the ::after
   spacer (--cm-hold px) runs past, exactly as long as the stage's runway is extended, so stage and cards
   hold together and release together (pure CSS sticky: no per-frame write, no snap, any input). */
.cu .cu-parts[data-cm-hold] { padding-bottom: 48px; }
.cu .cu-parts[data-cm-hold] > .wrap { position: sticky; top: var(--cm-stick, 0px); }
.cu .cu-parts[data-cm-hold]::after { content: ''; display: block; height: var(--cm-hold, 0px); }

/* edit round 1 (#83 row 3): the picture between the sub-line and the cards. Static reading = drawn, still.
   Armed: hidden until the flip, lines draw once (is-drawn, cu-motto.js), then a slow amber pulse runs down
   the lines. Ink #10201B + amber #E9A93A: the step pictures' two colours. */
.cu .cm-pic { width: 100%; max-width: 1080px; margin: 20px auto 0; }
.cu .cm-pic svg { display: block; width: 100%; height: auto; overflow: visible; }
.cu .cm-pic .cm-pic-m { display: none; }
.cu .cm-pic path, .cu .cm-pic circle { fill: none; stroke: #10201B; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cu .cm-pic .cm-pic-blob { fill: #E9A93A; stroke: none; opacity: .85; }
.cu .cm-pic .cm-pic-knot { fill: #10201B; stroke: none; }
.cu .cm-pic .cm-pic-node { fill: #E9A93A; stroke: #10201B; }
.cu .cm-pic .cm-pic-pulse { stroke: #E9A93A; stroke-width: 3.5; stroke-dasharray: 8 100; stroke-dashoffset: 8; opacity: 0; }
html[data-cm-armed] .cu .cm-pic .cm-pic-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1) .1s; }
html[data-cm-armed] .cu .cm-pic .cm-pic-blob, html[data-cm-armed] .cu .cm-pic .cm-pic-fam, html[data-cm-armed] .cu .cm-pic .cm-pic-knot { opacity: 0; transition: opacity .5s ease; }
html[data-cm-armed] .cu .cm-pic .cm-pic-node { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; transition: opacity .4s ease 1s, transform .5s cubic-bezier(.34,1.56,.64,1) 1s; }
html[data-cm-armed] .cu .cm-pic.is-drawn .cm-pic-line { stroke-dashoffset: 0; }
html[data-cm-armed] .cu .cm-pic.is-drawn .cm-pic-fam, html[data-cm-armed] .cu .cm-pic.is-drawn .cm-pic-knot { opacity: 1; }
html[data-cm-armed] .cu .cm-pic.is-drawn .cm-pic-blob { opacity: .85; animation: cm-breathe 5s ease-in-out 1.2s infinite; }
html[data-cm-armed] .cu .cm-pic.is-drawn .cm-pic-node { opacity: 1; transform: none; }
html[data-cm-armed] .cu .cm-pic.is-drawn .cm-pic-pulse { animation: cm-pulse 4.2s cubic-bezier(.45,0,.55,1) 1.5s infinite; }
html[data-cm-armed] .cu .cm-pic.is-drawn .cm-pic-pulse:nth-of-type(5) { animation-delay: 1.8s; }
html[data-cm-armed] .cu .cm-pic.is-drawn .cm-pic-pulse:nth-of-type(6) { animation-delay: 2.1s; }
/* the loop only runs while the picture is on screen (cu-motto.js toggles .is-live), never behind the next pin */
html[data-cm-armed] .cu .cm-pic:not(.is-live) * { animation-play-state: paused !important; }
@keyframes cm-pulse { 0% { stroke-dashoffset: 8; opacity: 1; } 62% { stroke-dashoffset: -100; opacity: 1; } 63%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes cm-breathe { 0%, 100% { opacity: .85; } 50% { opacity: .55; } }
.cu .is-pinned .cm-pic { opacity: 0; visibility: hidden; transition: opacity .3s var(--cm-e) 0s, visibility 0s linear .3s; }
.cu .is-pinned .is-flipped .cm-pic { opacity: 1; visibility: visible; transition: opacity .6s var(--cm-e) .5s, visibility 0s linear 0s; }
@media (prefers-reduced-motion: reduce) { .cu .cm-pic * { animation: none !important; transition: none !important; } }
/* a landscape phone (844x390) has no room for the picture inside the 100vh stage: drop it there (wiki trap 7) */
@media (max-width: 899px) and (max-height: 500px) { .cu .cm-pic { display: none; } }

/* ================= phone (< 900) ================= */
@media (max-width: 899px) {
  .cu .cm-copy { padding-top: 88px; padding-bottom: 32px; }
  .cu .cm-lines { margin-top: 22px; }
  .cu .cm-sub { margin-top: 18px; font-size: 15px; }
  .cu .cm-pin.is-pinned .cm-copy { padding-top: calc(var(--nav-h) + 9vh); }
  /* the per-character motto reveal (dp-stage.js:202-245 recipe, via mt-s1.css), opacity + transform only */
  .cu .is-pinned .cm-ch { display: inline-block; --u: clamp(0, calc((var(--cm-m-s, 99999) - var(--i, 0) * var(--cm-m-stagger, 30)) / 300), 1); opacity: var(--u); transform: scale(calc(.9 + .1 * var(--u))); }
  .cu .cu-parts { padding-bottom: 72px; }
  .cu .cm-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* compact card: [num] [title] [了解更多 →] on one row, the line under it (the frame must fit one screen) */
  .cu .cm-card-a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: center; padding: 14px 16px 15px; }
  .cu .cm-card-top { display: contents; }
  .cu .cm-card-num { grid-column: 1; grid-row: 1; font-size: 13px; padding: 3px 9px 2px; }
  .cu .cm-card .cu-h3 { grid-column: 2; grid-row: 1; margin: 0; }
  .cu .cm-card-more { grid-column: 3; grid-row: 1; font-size: 12px; letter-spacing: .04em; }
  .cu .cm-card-line { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  .cu .cu-parts[data-cm-hold] { padding-bottom: 40px; }
  .cu .cm-pic { margin-top: 14px; }
  .cu .cm-pic .cm-pic-d { display: none; }
  .cu .cm-pic .cm-pic-m { display: block; width: auto; height: 96px; margin: 0 auto; }
}