/* Motion layer — loaded after styles.css. Everything is disabled under prefers-reduced-motion. */
@keyframes rise { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes letter { from { opacity: 0; transform: translateY(0.5em) rotate(4deg); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { from { opacity: 0; scale: .85; } to { opacity: 1; scale: 1; } }
@keyframes hatch { to { background-position: 32px 0; } }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--ok) 0%, transparent); } }
@keyframes stageOn { 0%, 30%, 100% { stroke: var(--muted); stroke-opacity: .7; } 8%, 20% { stroke: var(--fg); stroke-opacity: 1; } }
@keyframes ring { to { transform: rotate(360deg); } }
@keyframes caret { 50% { opacity: 0; } }

.motion .load { opacity: 0; animation: rise .7s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i, 0) * 80ms + 100ms); }
.motion .profile h1 .ch { display: inline-block; opacity: 0; animation: letter .6s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--c) * 35ms + 350ms); }
.motion .stage { opacity: 0; transform-box: fill-box; transform-origin: center; animation: pop .5s ease forwards; animation-delay: calc(var(--s) * 120ms + 200ms); }
.motion .stage rect { animation: stageOn 3s linear infinite; animation-delay: calc(var(--s) * 0.5s + 1s); }
.motion .wire { stroke-dasharray: 700; stroke-dashoffset: 700; animation: draw 1.6s ease forwards .2s; }
.motion .wire.drawn { stroke-dasharray: 3 4; stroke-dashoffset: 0; animation: none; }
.status__dot { animation: pulse 2.4s ease-in-out infinite; }
.hatch { animation: hatch 6s linear infinite; }

.profile__avatar { position: relative; }
.profile__avatar::before { content: ""; position: absolute; inset: -7px; border-radius: 999px; border: 1px dashed var(--muted); opacity: .55; animation: ring 24s linear infinite; }
.profile__avatar img { transition: transform .4s ease; }
.profile__avatar:hover img { transform: scale(1.05); }

.typed::after { content: "▍"; margin-left: 2px; animation: caret 1s steps(1) infinite; }

.motion .reveal { opacity: 0; transform: translateY(18px); filter: blur(4px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1), filter .7s ease; transition-delay: calc(var(--i, 0) * 60ms); }
.motion .reveal.in { opacity: 1; transform: none; filter: none; }

.chip { transition: transform .15s ease, border-color .15s ease, color .15s ease; }
.chip:hover { transform: translateY(-2px); border-color: var(--muted); color: var(--fg); }
.facts li > svg, .role__icon, .certs svg { transition: color .2s ease, border-color .2s ease, transform .2s ease; }
.facts li:hover > svg, .role summary:hover .role__icon, .certs li:hover svg { color: var(--fg); border-color: var(--muted); transform: rotate(-8deg); }
.stack > div { transition: background .2s ease; }
.stack > div:hover { background: var(--hover); }
.social a { position: relative; overflow: hidden; }
.social a::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--fg) 9%, transparent), transparent 70%); opacity: 0; transition: opacity .25s; }
.social a:hover::before { opacity: 1; }
.nav a { position: relative; transition: color .2s; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--fg); transform: scaleX(0); transform-origin: right; transition: transform .25s ease; }
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); transform-origin: left; }
.nav a.active { color: var(--fg); }
.role__body { overflow: hidden; }
.stats dd { font-variant-numeric: tabular-nums; }
.mark { transition: background .2s, color .2s, transform .2s; }
.mark:hover { transform: rotate(-6deg); }
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: var(--fg); transform-origin: 0 50%; transform: scaleX(0); z-index: 60; pointer-events: none; }

/* Reduced motion: opt-out via the nav toggle (html[data-motion="reduced"]) */
[data-motion="reduced"] .load, [data-motion="reduced"] .reveal, [data-motion="reduced"] .profile h1 .ch { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
[data-motion="reduced"] .hatch, [data-motion="reduced"] .status__dot, [data-motion="reduced"] .profile__avatar::before, [data-motion="reduced"] .typed::after { animation: none !important; }
[data-motion="reduced"] *, [data-motion="reduced"] *::before, [data-motion="reduced"] *::after { transition: none !important; }
html:not([data-motion="reduced"]) { scroll-behavior: smooth; }
.t-still { display: none; }
[data-motion="reduced"] .t-still { display: block; }
[data-motion="reduced"] .t-play { display: none; }

/* ---------- fx.js: conveyor, logo chips, wordmark ---------- */
.belt { display: block; width: 100%; height: 100%; }

.chip--logo { display: inline-flex; align-items: center; gap: 6px; }
.ico {
  width: 1em; height: 1em; flex: none; display: inline-block;
  background: var(--c, var(--fg));
  -webkit-mask: var(--src) center / contain no-repeat;
  mask: var(--src) center / contain no-repeat;
  transition: transform .2s cubic-bezier(.2,.7,.2,1);
}
.chip--logo:hover .ico { transform: scale(1.18) rotate(-6deg); }

.wordmark { max-width: 1200px; margin: 8px auto 0; padding: 0 16px; overflow: hidden; height: clamp(90px, 16vw, 210px); user-select: none; }
.wordmark svg { width: 100%; height: auto; display: block; overflow: visible; }
.wordmark text { font-family: var(--sans); font-weight: 700; font-size: 236px; letter-spacing: -6px; fill: none; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.wm-base { stroke: var(--line); }
:root[data-theme="light"] .wm-base { stroke: #d4d4d8; }
.wm-glow { stroke-width: 1.6; }

/* Press feedback: controls feel weighted (Invisible Details) */
.btn:active, .icon-btn:active, .social a:active, .role summary:active { transform: scale(.97); }
.icon-btn, .social a { transition: transform .12s ease, background .15s ease; }

/* ---------- ruler.js: scroll ruler in the left gutter ---------- */
:root { --accent: #ff6a1a; }
:root[data-theme="light"] { --accent: #ea580c; }
.ruler { display: none; }
@media (min-width: 1400px) {
  .ruler {
    display: block; position: fixed; z-index: 40;
    left: max(12px, calc((100vw - var(--rail)) / 2 - 170px));
    top: 18vh; height: 64vh; width: 130px;
    touch-action: none; user-select: none;
  }
}
.ruler__track { position: absolute; inset: 0 auto 0 14px; width: 116px; cursor: ns-resize; }
.ruler__tick {
  position: absolute; left: 0; height: 1px;
  width: calc(10px + var(--m, 0) * 16px);
  background: var(--muted);
  opacity: calc(.35 + var(--m, 0) * .65);
  transition: width .18s cubic-bezier(.2,.7,.2,1), opacity .18s;
}
.ruler__tick.is-major { width: calc(20px + var(--m, 0) * 12px); opacity: calc(.7 + var(--m, 0) * .3); background: var(--fg); }
.ruler__label {
  position: absolute; left: 34px; transform: translateY(-50%);
  font-size: 10px; letter-spacing: .02em; color: var(--muted); white-space: nowrap;
  padding: 2px 4px; border-radius: 4px;
  transition: color .2s, transform .25s cubic-bezier(.2,.7,.2,1);
}
.ruler__label b { font-weight: 500; opacity: .6; }
.ruler__label:hover { color: var(--fg); text-decoration: none; transform: translate(3px, -50%); }
.ruler__label.is-active { color: var(--fg); transform: translate(4px, -50%); }
.ruler__label.is-active b { color: var(--accent); opacity: 1; }
.ruler__pointer { position: absolute; left: 0; top: 0; height: 0; will-change: transform; pointer-events: none; }
.ruler__tri {
  position: absolute; left: 0; top: -4px; width: 0; height: 0;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 7px solid var(--accent);
}
.ruler__read {
  position: absolute; left: -2px; top: 7px; font-size: 9.5px; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.ruler__ghost { position: absolute; left: 14px; top: 0; width: 34px; height: 1px; background: var(--fg); opacity: 0; pointer-events: none; transition: opacity .15s; }
.ruler.is-hover .ruler__ghost { opacity: .5; }
[data-motion="reduced"] .ruler__tick, [data-motion="reduced"] .ruler__label { transition: none; }