/* Motion system. Everything here is additive: content is visible without JS and under reduced motion. */
/* Reveal on scroll: only applied when JS is present AND motion is allowed */
html.js:not(.reduce-motion) .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
html.js:not(.reduce-motion) .reveal.is-in { opacity: 1; transform: none; }
html.js:not(.reduce-motion) .reveal--clip { clip-path: inset(0 0 100% 0); transform: none; transition: clip-path var(--dur-4) var(--ease-inout), opacity var(--dur-2); }
html.js:not(.reduce-motion) .reveal--clip.is-in { clip-path: inset(0 0 0 0); }
html.js:not(.reduce-motion) .reveal--line { transform: scaleX(0); transform-origin: var(--origin, left); opacity: 1; }
html[dir="rtl"] .reveal--line { --origin: right; }
html.js:not(.reduce-motion) .reveal--line.is-in { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; } }

/* Hero signature: Start → Direction → Progress → Resolution */
.sig { width: 100%; max-width: 560px; margin-inline: auto; }
.sig .sig-dot { fill: var(--blue); }
.sig .sig-vec, .sig .sig-path { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sig .sig-path--soft { stroke: var(--soft); stroke-width: 2; }
.sig .sig-grid line { stroke: var(--soft-200); stroke-width: 1; }
.sig .sig-logo { opacity: 1; }
html.js:not(.reduce-motion) .sig[data-ready] .sig-vec, html.js:not(.reduce-motion) .sig[data-ready] .sig-path { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); }
html.js:not(.reduce-motion) .sig[data-ready] .sig-logo { opacity: 0; }
html.js:not(.reduce-motion) .sig[data-ready] .sig-dot { transform-box: fill-box; transform-origin: center; transform: scale(0); }
html.js:not(.reduce-motion) .sig.is-playing .sig-dot { transform: scale(1); transition: transform var(--dur-2) var(--ease-out); }
html.js:not(.reduce-motion) .sig.is-playing .sig-vec { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-3) var(--ease-draw) var(--dur-2); }
html.js:not(.reduce-motion) .sig.is-playing .sig-path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-4) var(--ease-draw) calc(var(--dur-2) + var(--dur-3) + var(--i, 0) * 120ms); }
html.js:not(.reduce-motion) .sig.is-playing .sig-logo { opacity: 1; transition: opacity var(--dur-3) var(--ease-out) calc(var(--dur-2) + var(--dur-3) + var(--dur-4) + 200ms); }
html.js:not(.reduce-motion) .sig.is-playing .sig-vec, html.js:not(.reduce-motion) .sig.is-playing .sig-path { transition-property: stroke-dashoffset, opacity; }
html.js:not(.reduce-motion) .sig.is-resolved .sig-vec, html.js:not(.reduce-motion) .sig.is-resolved .sig-path { opacity: 0.35; transition: opacity var(--dur-3); }

/* Connection graph (hero) */
.cgraph { position: relative; }
.cgraph svg { width: 100%; height: auto; }
.cgraph .g-grid line { stroke: var(--soft-200); stroke-width: 1; }
.cgraph .g-path { fill: none; stroke: var(--soft-300); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--dur-2), stroke-width var(--dur-2), opacity var(--dur-2); }
.cgraph .g-node { fill: var(--white); stroke: var(--soft-300); stroke-width: 2.5; transition: fill var(--dur-2), stroke var(--dur-2), r var(--dur-2); }
.cgraph .g-hub { fill: var(--blue); }
.cgraph .g-label { font-size: 11px; fill: var(--muted); font-weight: 600; }
.cgraph[data-active] .g-path:not(.is-active) { opacity: 0.35; }
.cgraph .g-path.is-active { stroke: var(--blue); stroke-width: 3.5; }
.cgraph .g-node.is-active { fill: var(--blue); stroke: var(--blue); }
.cgraph .g-label.is-active { fill: var(--blue); }
html.js:not(.reduce-motion) .cgraph .g-path.is-active { stroke-dasharray: var(--len, 600); stroke-dashoffset: 0; animation: draw var(--dur-3) var(--ease-draw); }
@keyframes draw { from { stroke-dashoffset: var(--len, 600); } to { stroke-dashoffset: 0; } }
.challenge-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.challenge-btn { width: 100%; text-align: start; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75rem; padding: 0.7rem 0.9rem; border: 1.5px solid var(--line); background: var(--white); border-radius: var(--radius); font: inherit; color: var(--ink); cursor: pointer; text-decoration: none; transition: border-color var(--dur-1), background var(--dur-1), transform var(--dur-2) var(--ease-out); }
.challenge-btn .k { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--soft); transition: background var(--dur-1), border-color var(--dur-1); }
.challenge-btn:hover, .challenge-btn:focus-visible { border-color: var(--blue); background: var(--soft-100); }
.challenge-btn[aria-pressed="true"] { border-color: var(--blue); background: var(--soft-100); font-weight: 700; }
.challenge-btn[aria-pressed="true"] .k { background: var(--blue); border-color: var(--blue); }
.challenge-btn .arrow { width: 1em; height: 1em; opacity: 0; transition: opacity var(--dur-1), transform var(--dur-2) var(--ease-out); }
html[dir="rtl"] .challenge-btn .arrow { transform: scaleX(-1); }
.challenge-btn:hover .arrow, .challenge-btn[aria-pressed="true"] .arrow { opacity: 1; }
.challenge-detail { border-inline-start: 3px solid var(--blue); padding: 0.5rem var(--space-2); margin-top: var(--space-2); min-height: 4.5rem; }
.challenge-detail p { margin-bottom: 0.5rem; }
html.js:not(.reduce-motion) .challenge-detail.is-swapping { animation: swap-in var(--dur-2) var(--ease-out); }
@keyframes swap-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Scroll story: four stages */
.story { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .story { grid-template-columns: 5fr 7fr; align-items: start; } .story-visual { position: sticky; top: 90px; } }
.story-steps { display: grid; gap: var(--space-3); }
.story-step { padding: var(--space-2) 0 var(--space-2) 0; border-inline-start: 2px solid var(--line); padding-inline-start: var(--space-3); transition: border-color var(--dur-2); }
.story-step.is-active { border-color: var(--blue); }
.story-step .step-n { font-family: var(--font-en); font-weight: 800; color: var(--soft); font-size: var(--fs-0); letter-spacing: 0.1em; }
.story-step.is-active .step-n { color: var(--blue); }
.story-step h3 { font-size: var(--fs-2); margin: 0.25rem 0; }
.story-step p { color: var(--muted); font-size: var(--fs-0); margin: 0; }
.story-visual svg { width: 100%; height: auto; }
.story-visual .s-node { fill: var(--soft-300); transition: fill var(--dur-3), transform var(--dur-4) var(--ease-inout); transform-box: fill-box; transform-origin: center; }
.story-visual .s-link { stroke: var(--soft-300); stroke-width: 2; fill: none; stroke-linecap: round; opacity: 0; transition: opacity var(--dur-3), stroke var(--dur-3); stroke-dasharray: 400; stroke-dashoffset: 400; }
.story-visual .s-hub { fill: var(--blue); opacity: 0; transition: opacity var(--dur-3); }
.story-visual .s-label { font-size: 11px; fill: var(--muted); font-weight: 600; }
.story-visual[data-stage="1"] .s-node { transform: translate(var(--dx), var(--dy)); }
.story-visual[data-stage="2"] .s-node { transform: translate(calc(var(--dx) * 0.45), calc(var(--dy) * 0.45)); fill: var(--soft); }
.story-visual[data-stage="2"] .s-hub { opacity: 1; }
.story-visual[data-stage="3"] .s-node, .story-visual[data-stage="4"] .s-node { transform: none; fill: var(--blue); }
.story-visual[data-stage="3"] .s-hub, .story-visual[data-stage="4"] .s-hub { opacity: 1; }
.story-visual[data-stage="3"] .s-link, .story-visual[data-stage="4"] .s-link { opacity: 1; stroke-dashoffset: 0; transition: opacity var(--dur-3), stroke-dashoffset var(--dur-4) var(--ease-draw); }
.story-visual[data-stage="4"] .s-link { stroke: var(--blue); }
.story-visual[data-stage="4"] .s-ring { opacity: 1; transition: opacity var(--dur-3) var(--dur-3); }
.story-visual .s-ring { fill: none; stroke: var(--soft); stroke-width: 1; opacity: 0; }
html.reduce-motion .story-visual .s-node, html.reduce-motion .story-visual .s-link { transition: none; }

/* Plan drawing */
.plan-phase { position: relative; padding-inline-start: var(--space-3); }
.plan-phase::before { content: ""; position: absolute; inset-inline-start: 6px; top: 1.2rem; bottom: 0; width: 2px; background: var(--line); transform-origin: top; }
html.js:not(.reduce-motion) .plan-phase.reveal::before { transform: scaleY(0); transition: transform var(--dur-4) var(--ease-draw); }
html.js:not(.reduce-motion) .plan-phase.reveal.is-in::before { transform: scaleY(1); }
.plan-phase h3 { position: relative; }
.plan-phase h3::before { content: ""; position: absolute; inset-inline-start: calc(-1 * var(--space-3) + 1px); top: 0.55em; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); }
.plan-action { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); background: var(--white); display: grid; gap: 0.5rem; }
.plan-action.is-done { opacity: 0.6; }
.plan-action.is-done .pa-title { text-decoration: line-through; }
.plan-action .pa-title { font-weight: 700; color: var(--ink); font-size: var(--fs-1); }
.plan-action dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0; font-size: var(--fs-0); }
.plan-action dt { color: var(--muted); } .plan-action dd { margin: 0; color: var(--ink-2); }
.plan-action .pa-tools { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.plan-action [contenteditable="true"] { border-bottom: 1px dashed var(--soft); padding: 0 0.15rem; }
.plan-action [contenteditable="true"]:focus { background: var(--soft-100); outline: 2px solid var(--blue); border-radius: 2px; }
.plan-action .baseline-flag { color: var(--warn-ink); font-size: var(--fs-0); font-weight: 600; }