/* motion.css - every optional effect lives here, scoped to html[data-fx~="name"].
   Remove a token from <html data-fx="..."> and the effect is gone. html[data-motion="off"] is the master kill.
   Only transform and opacity move, except the one-off target outline. Hover effects need a real hover pointer. */

/* press: the printed bar gives way under the finger */
html[data-fx~="press"] .btn, html[data-fx~="press"] .site-nav a, html[data-fx~="press"] .link-arrow {
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
html[data-fx~="press"] .btn:active, html[data-fx~="press"] .site-nav a:active, html[data-fx~="press"] .link-arrow:active { transform: translateY(1px) scale(0.97); }

/* smooth-anchor: jump links glide instead of teleporting */
@media (prefers-reduced-motion: no-preference) { html[data-fx~="smooth-anchor"] { scroll-behavior: smooth; } }

/* target-flash: arriving on a plan or a section outlines it once */
@keyframes target-flash { from { outline: 4px solid var(--accent); outline-offset: 12px; } to { outline: 4px solid transparent; outline-offset: 0; } }
html[data-fx~="target-flash"] :target { animation: target-flash 900ms var(--ease-out) 1; }

/* form-states: the context chip and each error slide into place */
html[data-fx~="form-states"] .form-context { transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
@starting-style { html[data-fx~="form-states"] .form-context { opacity: 0; transform: translateY(4px); } }
html[data-fx~="form-states"] .field__error { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
html[data-fx~="form-states"] .field__error > span { overflow: hidden; }
html[data-fx~="form-states"] .field--error .field__error { grid-template-rows: 1fr; opacity: 1; }

/* hero-entrance: the work order and its copies rise into place on first paint */
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } }
html[data-fx~="hero-entrance"] .hero-stack { animation: rise-in 700ms var(--ease-out) both; }

/* display-reveal: each headline line is written up from its own baseline, once */
html[data-fx~="display-reveal"] .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
html[data-fx~="display-reveal"] .line > span { display: block; transform: translateY(105%); animation: line-up 520ms var(--ease-out) forwards; }
html[data-fx~="display-reveal"] .line:nth-child(2) > span { animation-delay: 80ms; }
@keyframes line-up { to { transform: none; } }

/* group-reveal: lines of a group fill in one after another as it scrolls into view (js/core.js adds .is-in) */
html.js[data-fx~="group-reveal"] [data-reveal="group"] > * { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
html.js[data-fx~="group-reveal"] [data-reveal="group"].is-in > * { opacity: 1; transform: none; }
html.js[data-fx~="group-reveal"] [data-reveal="group"] > :nth-child(2) { transition-delay: var(--stagger); }
html.js[data-fx~="group-reveal"] [data-reveal="group"] > :nth-child(3) { transition-delay: calc(var(--stagger) * 2); }
html.js[data-fx~="group-reveal"] [data-reveal="group"] > :nth-child(4) { transition-delay: calc(var(--stagger) * 3); }
html.js[data-fx~="group-reveal"] [data-reveal="group"] > :nth-child(5) { transition-delay: calc(var(--stagger) * 4); }
html.js[data-fx~="group-reveal"] [data-reveal="group"] > :nth-child(6) { transition-delay: calc(var(--stagger) * 5); }

/* stamp-land: a rubber stamp lands when its sheet comes into view */
@keyframes stamp-land { from { opacity: 0; transform: rotate(-9deg) scale(1.3); } to { opacity: 1; transform: rotate(-5deg) scale(1); } }
html.js[data-fx~="stamp-land"] [data-reveal] .stamp { opacity: 0; }
html.js[data-fx~="stamp-land"] [data-reveal].is-in .stamp { animation: stamp-land 360ms var(--ease-stamp) 500ms both; }

/* hero-scroll: scrolling separates the copies behind the white original (scroll-driven, no JS) */
@keyframes copy-mustard { to { transform: translate(2.6rem, 2.2rem) rotate(2.8deg); } }
@keyframes copy-teal { to { transform: translate(5.2rem, 4.2rem) rotate(5.6deg); } }
@supports (animation-timeline: scroll()) {
  html[data-fx~="hero-scroll"] .hero-stack::before { animation: copy-mustard linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }
  html[data-fx~="hero-scroll"] .hero-stack::after { animation: copy-teal linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }
}

/* sheet-stack: the three step copies stack over each other as you scroll */
@media (min-width: 960px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  html[data-fx~="sheet-stack"] .step-sheet { position: sticky; box-shadow: var(--shadow-lift); }
  html[data-fx~="sheet-stack"] .step-sheet:nth-child(1) { top: var(--nav-clear); }
  html[data-fx~="sheet-stack"] .step-sheet:nth-child(2) { top: calc(var(--nav-clear) + 1.25rem); }
  html[data-fx~="sheet-stack"] .step-sheet:nth-child(3) { top: calc(var(--nav-clear) + 2.5rem); }
  html[data-fx~="sheet-stack"] .steps { gap: 30vh; padding-bottom: 12vh; }
}

/* sheet-lift: a plan sheet is one big target, so it lifts on hover */
html[data-fx~="sheet-lift"] .plan .btn::after { content: ""; position: absolute; inset: 0; }
@media (hover: hover) and (pointer: fine) {
  html[data-fx~="sheet-lift"] .plan { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
  html[data-fx~="sheet-lift"] .plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
}

/* draw-on: the confirmation tick is drawn in with the pen */
@keyframes draw-tick { to { stroke-dashoffset: 0; } }
html[data-fx~="draw-on"] .tick-draw { stroke-dasharray: 26; stroke-dashoffset: 26; animation: draw-tick 500ms var(--ease-out) 300ms forwards; }

/* finder step: each plan-finder question or result eases in (part of form-states; a form step changing) */
@keyframes finder-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: no-preference) { html[data-fx~="form-states"] .finder__step { animation: finder-in var(--dur-base) var(--ease-out) both; } }

/* logo-intro: on the first page of a visit the mark builds up and the letters drop into the wordmark like blocks stacking.
   The inline script sets html.intro once per session, so later pages and the persistent header never replay it. */
@keyframes logo-drop { from { opacity: 0; transform: translateY(-0.75em); } }
@keyframes logo-bar { from { transform: scaleY(0); } }
@keyframes caret-in { from { opacity: 0; transform: scaleX(0); } }
@media (prefers-reduced-motion: no-preference) {
  html.intro[data-fx~="logo-intro"] .site-header .brand__name > span { animation: logo-drop 560ms var(--ease-stamp) both; }
  html.intro[data-fx~="logo-intro"] .site-header .brand__name > span:nth-child(1) { animation-delay: 100ms; }
  html.intro[data-fx~="logo-intro"] .site-header .brand__name > span:nth-child(2) { animation-delay: 135ms; }
  html.intro[data-fx~="logo-intro"] .site-header .brand__name > span:nth-child(3) { animation-delay: 170ms; }
  html.intro[data-fx~="logo-intro"] .site-header .brand__name > span:nth-child(4) { animation-delay: 205ms; }
  html.intro[data-fx~="logo-intro"] .site-header .brand__name > span:nth-child(5) { animation-delay: 240ms; }
  html.intro[data-fx~="logo-intro"] .site-header .brand__name > span:nth-child(6) { animation-delay: 275ms; }
  html.intro[data-fx~="logo-intro"] .site-header .brand__name > span:nth-child(7) { animation-delay: 310ms; }
  html.intro[data-fx~="logo-intro"] .site-header .brand__name > span:nth-child(8) { animation-delay: 345ms; }
  html.intro[data-fx~="logo-intro"] .site-header .brand__name > span:nth-child(9) { animation-delay: 380ms; }
  html.intro[data-fx~="logo-intro"] .site-header .brand__co { animation: logo-drop 560ms var(--ease-stamp) 460ms both; }
  html.intro[data-fx~="logo-intro"] .site-header .brand__caret { transform-origin: 0 50%; animation: caret-in 300ms var(--ease-out) 850ms both; }
  html.intro[data-fx~="logo-intro"] .site-header .brand__mark i { transform-origin: 50% 100%; animation: logo-bar 520ms var(--ease-out) both; }
  html.intro[data-fx~="logo-intro"] .site-header .brand__mark i:nth-child(2) { animation-delay: 90ms; }
  html.intro[data-fx~="logo-intro"] .site-header .brand__mark i:nth-child(3) { animation-delay: 180ms; }
}

/* logo-caret: a terminal cursor blinks after the name; it stays solid under reduced motion */
@keyframes caret-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) { html[data-fx~="logo-caret"] .brand__caret i { animation: caret-blink 1.15s steps(1) infinite; } }

/* logo-hover: pointing at the wordmark sends a hop through the letters and bumps the bars */
@keyframes logo-hop { 40% { transform: translateY(-0.16em); } }
@keyframes logo-bump { 40% { transform: scaleY(1.24); } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html[data-fx~="logo-hover"] .brand:hover .brand__name > span { animation: logo-hop 420ms var(--ease-out); }
  html[data-fx~="logo-hover"] .brand:hover .brand__name > span:nth-child(2) { animation-delay: 28ms; }
  html[data-fx~="logo-hover"] .brand:hover .brand__name > span:nth-child(3) { animation-delay: 56ms; }
  html[data-fx~="logo-hover"] .brand:hover .brand__name > span:nth-child(4) { animation-delay: 84ms; }
  html[data-fx~="logo-hover"] .brand:hover .brand__name > span:nth-child(5) { animation-delay: 112ms; }
  html[data-fx~="logo-hover"] .brand:hover .brand__name > span:nth-child(6) { animation-delay: 140ms; }
  html[data-fx~="logo-hover"] .brand:hover .brand__name > span:nth-child(7) { animation-delay: 168ms; }
  html[data-fx~="logo-hover"] .brand:hover .brand__name > span:nth-child(8) { animation-delay: 196ms; }
  html[data-fx~="logo-hover"] .brand:hover .brand__name > span:nth-child(9) { animation-delay: 224ms; }
  html[data-fx~="logo-hover"] .brand:hover .brand__co { animation: logo-hop 420ms var(--ease-out) 252ms; }
  html[data-fx~="logo-hover"] .brand:hover .brand__mark i { transform-origin: 50% 100%; animation: logo-bump 420ms var(--ease-out); }
  html[data-fx~="logo-hover"] .brand:hover .brand__mark i:nth-child(2) { animation-delay: 60ms; }
  html[data-fx~="logo-hover"] .brand:hover .brand__mark i:nth-child(3) { animation-delay: 120ms; }
}

/* art-signal: the hero illustration runs live. Bars grow in once, data pulses climb the traces, LEDs blink, nodes ping. */
@keyframes bar-grow { from { transform: scaleY(0); } }
@keyframes pulse-u1 { 0% { opacity: 0; transform: none; } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-44px); } }
@keyframes pulse-u2 { 0% { opacity: 0; transform: none; } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-64px); } }
@keyframes pulse-u3 { 0% { opacity: 0; transform: none; } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-84px); } }
@keyframes led-blink { 50% { opacity: 0.2; } }
@keyframes node-ping { from { opacity: 0.9; transform: scale(0.7); } to { opacity: 0; transform: scale(2.1); } }
@keyframes arc-glow { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  html[data-fx~="art-signal"] .hero__art .bars rect { transform-box: fill-box; transform-origin: 50% 100%; animation: bar-grow 800ms var(--ease-out) both; }
  html[data-fx~="art-signal"] .hero__art .bars rect:nth-child(2) { animation-delay: 70ms; }
  html[data-fx~="art-signal"] .hero__art .bars rect:nth-child(3) { animation-delay: 140ms; }
  html[data-fx~="art-signal"] .hero__art .bars rect:nth-child(4) { animation-delay: 210ms; }
  html[data-fx~="art-signal"] .hero__art .bars rect:nth-child(5) { animation-delay: 280ms; }
  html[data-fx~="art-signal"] .hero__art .bars rect:nth-child(6) { animation-delay: 350ms; }
  html[data-fx~="art-signal"] .hero__art .pl { animation: pulse-u1 5.5s var(--ease-drawer) infinite both; }
  html[data-fx~="art-signal"] .hero__art .pl.u2 { animation-name: pulse-u2; }
  html[data-fx~="art-signal"] .hero__art .pl.u3 { animation-name: pulse-u3; }
  html[data-fx~="art-signal"] .hero__art .pl.d2 { animation-delay: 2.7s; }
  html[data-fx~="art-signal"] .hero__art .led { animation: led-blink 2.4s steps(1) infinite; }
  html[data-fx~="art-signal"] .hero__art .led.d2 { animation-delay: 0.8s; }
  html[data-fx~="art-signal"] .hero__art .led.d3 { animation-delay: 1.6s; }
  html[data-fx~="art-signal"] .hero__art .ping { transform-box: fill-box; transform-origin: 50% 50%; animation: node-ping 3s var(--ease-out) infinite; }
  html[data-fx~="art-signal"] .hero__art .arc { animation: arc-glow 3s var(--ease-drawer) infinite; }
  html[data-fx~="art-signal"] .hero__art .arc.a2 { animation-delay: 0.5s; }
}

/* reduced motion: state stays legible, nothing travels. Opacity only, under 150ms. */
@media (prefers-reduced-motion: reduce) {
  html[data-fx] .hero-stack, html[data-fx] .line > span { animation: none; transform: none; }
  html[data-fx] .hero-stack::before, html[data-fx] .hero-stack::after { animation: none; }
  html[data-fx] :target { animation: none; outline: 4px solid var(--accent); outline-offset: 6px; }
  html.js[data-fx~="group-reveal"] [data-reveal="group"] > * { transform: none; transition: opacity 120ms ease; transition-delay: 0s; }
  html.js[data-fx~="stamp-land"] [data-reveal].is-in .stamp { animation: none; opacity: 1; transform: rotate(-5deg); }
  html[data-fx~="draw-on"] .tick-draw { animation: none; stroke-dashoffset: 0; }
  html[data-fx~="sheet-lift"] .plan:hover { transform: none; }
}

/* master switch: html[data-motion="off"] shows everything in its final state */
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-motion="off"] [data-reveal="group"] > * { opacity: 1 !important; transform: none !important; }
html[data-motion="off"] [data-reveal] .stamp { opacity: 1 !important; }
html[data-motion="off"] .line > span { transform: none !important; }
html[data-motion="off"] .tick-draw { stroke-dashoffset: 0 !important; }