/* Motion is opt-in through JS; the static document is always readable. */
.hero h1>.headline-line{display:block;color:var(--text);transform-origin:0 100%}
.hero h1>.headline-line:first-of-type{color:var(--text)}
.hero h1>.headline-line:last-child{color:var(--accent)}
.brand-logo{background:#26351c;border:1px solid #4c5b3e}
.brand-logo img{width:27px;height:27px;display:block}
.motion-toggle{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--line);border-radius:4px;color:var(--muted);font:10px var(--mono);padding:9px 12px;min-height:40px;margin-left:auto;cursor:pointer}
.motion-toggle:hover{border-color:var(--accent);color:var(--text)}
.motion-toggle[aria-pressed="true"] .motion-indicator{background:var(--accent);box-shadow:0 0 10px #c6f36b66}
.motion-indicator{width:5px;height:5px;background:var(--muted);border-radius:50%}
.motion-toggle:disabled{cursor:default;opacity:.7}
.strip-year{margin-left:0}
.core-logo{display:block;width:132px;height:132px;filter:drop-shadow(0 0 20px #c6f36b20)}
.signal-paths{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.signal-paths path{fill:none;stroke:#c6f36b;stroke-width:1;opacity:.25;vector-effect:non-scaling-stroke}
.signal-paths .signal{stroke-width:2;stroke-dasharray:8 170;opacity:.9;filter:drop-shadow(0 0 4px #c6f36b)}
.system-visual::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at var(--pointer-x,50%) var(--pointer-y,45%),#b9f36118,transparent 55%);pointer-events:none}
.system-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 47%,#c6f36b08 50%,transparent 53%);background-size:100% 200%;pointer-events:none;opacity:0}
.motion-on .system-visual::after{opacity:1;animation:scan 7s linear infinite}
.motion-on .orbit-one{animation:orbit-turn 32s linear infinite;border-style:dashed;border-color:#81966565}
.motion-on .orbit-two{animation:orbit-turn 48s linear infinite reverse}
.motion-on .signal{animation:signal-travel 5s linear infinite}
.motion-on .signal:nth-child(4){animation-delay:-1.6s}
.motion-on .signal:nth-child(6){animation-delay:-3.3s}
.motion-on .system-node{animation:node-float 6s ease-in-out infinite}
.motion-on .node-code{animation-delay:-2s}.motion-on .node-check{animation-delay:-4s}
.motion-on .core-logo{animation:core-breathe 5s ease-in-out infinite}
.motion-on .video-mountain{animation:video-pan 12s ease-in-out infinite alternate;transform-origin:50% 60%}
.motion-on .timeline>span{animation:playhead 8s ease-in-out infinite alternate}
.motion-on .vocab-card:not(.back-card){animation:card-float 7s ease-in-out infinite}
.motion-on .back-card{animation:card-back 7s ease-in-out infinite}
.motion-on .tahoe-orb{animation:planet-breathe 9s ease-in-out infinite}
.motion-on .lane-lines{animation:equalizer 1.8s steps(4) infinite;transform-origin:center bottom}
.motion-on .project{transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .35s ease-out,border-color .2s,box-shadow .3s;will-change:auto}
.motion-on .project:hover{box-shadow:0 18px 48px #0005}
.project-art::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,50%),#fff2,transparent 55%);opacity:0;pointer-events:none;transition:opacity .3s}
.motion-on .project:hover .project-art::after{opacity:1}
.motion-on .project-link>span,.motion-on .contact-link>span{transition:transform .25s}
.motion-on .project-link:hover>span,.motion-on .contact-link:hover>span{transform:translate(3px,-3px)}
.motion-on .primary{transition:transform .3s,box-shadow .3s,background .2s}
.motion-on .primary:hover{transform:translateY(-3px);box-shadow:0 8px 32px #c6f36b25}
.motion-on .motion-outside *,.motion-on.motion-suspended *,.motion-on.motion-suspended *::after{animation-play-state:paused!important}
.motion-on .motion-outside::after{animation-play-state:paused!important}
.motion-on .contact{position:relative;isolation:isolate;overflow:hidden}
.motion-on .contact::before{content:"↗";position:absolute;z-index:-1;right:-25px;top:-100px;font-size:340px;line-height:1;color:#233b0b0c;animation:contact-arrow 10s ease-in-out infinite}
@keyframes orbit-turn{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes signal-travel{to{stroke-dashoffset:-356}}
@keyframes scan{from{background-position:0 120%}to{background-position:0 -120%}}
@keyframes node-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes core-breathe{0%,100%{transform:scale(.97);filter:drop-shadow(0 0 14px #c6f36b22)}50%{transform:scale(1.05);filter:drop-shadow(0 0 30px #c6f36b55)}}
@keyframes video-pan{to{transform:scale(1.18) translateX(-4%)}}
@keyframes playhead{from{left:12%}to{left:87%}}
@keyframes card-float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-9px) rotate(1deg)}}
@keyframes card-back{0%,100%{transform:rotate(5deg)}50%{transform:rotate(9deg) translateX(6px)}}
@keyframes planet-breathe{0%,100%{transform:scale(1);filter:hue-rotate(0deg)}50%{transform:scale(1.12) rotate(8deg);filter:hue-rotate(20deg)}}
@keyframes equalizer{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1.3)}}
@keyframes contact-arrow{0%,100%{transform:translate(0,0)}50%{transform:translate(15px,-15px)}}
.motion-on .effect-layer-front{animation:effect-front 7s ease-in-out infinite}
.motion-on .effect-layer-back{animation:effect-back 7s ease-in-out infinite}
.motion-on .effect-curve path{stroke-dasharray:8 5;animation:curve-flow 6s linear infinite}
.motion-on .film-frames>span{animation:film-frame 6s ease-in-out infinite}
.motion-on .film-frames>span:nth-child(2){animation-delay:-2s}
.motion-on .film-frames>span:nth-child(3){animation-delay:-4s}
.motion-on .film-tracks>i{animation:playhead 7s ease-in-out infinite alternate}
@keyframes effect-front{0%,100%{transform:translate(-25%,-50%) rotate(13deg)}50%{transform:translate(-15%,-57%) rotate(-3deg)}}
@keyframes effect-back{0%,100%{transform:translate(-75%,-50%) rotate(-17deg)}50%{transform:translate(-85%,-45%) rotate(3deg)}}
@keyframes curve-flow{to{stroke-dashoffset:-78}}
@keyframes film-frame{0%,100%{transform:rotateY(-8deg) translateY(0)}50%{transform:rotateY(8deg) translateY(-6px)}}
@media(max-width:800px){.core-logo{width:100px;height:100px}.motion-toggle{margin-left:0}.strip-year{display:none}}
@media(max-width:560px){.motion-toggle{font-size:9px;min-height:36px;padding:7px 10px}.focus-strip{gap:12px}.motion-on .project{transform:none}.motion-on .contact::before{font-size:240px;top:-40px}}
@media(prefers-reduced-motion:reduce){.motion-on *,.motion-on *::before,.motion-on *::after{animation:none!important;transition:none!important}.motion-on .project{transform:none}}