.project-list { display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; counter-reset:project; }
.project { min-width: 0; }
.project { counter-increment:project; }
.project-featured { grid-column: 1 / -1; }
.project-link { position:relative; height:100%; display:grid; grid-template-rows:auto 1fr; overflow:clip; border:1px solid var(--line); border-radius:3px; background:var(--snow); text-decoration:none; transition:translate var(--motion-medium) var(--ease-route),box-shadow var(--motion-medium) var(--ease-route),border-color var(--motion-fast); }
.project-link::before { content:'TRACE / 0' counter(project); position:absolute; z-index:2; top:1rem; left:1rem; padding:.32rem .5rem; border:1px solid color-mix(in srgb,var(--art-on-panel) 35%,transparent); border-radius:2px; background:color-mix(in srgb,var(--art-panel) 84%,transparent); color:var(--art-on-panel); font:700 .58rem/1.2 var(--mono); letter-spacing:.1em; backdrop-filter:blur(6px); }
.project-link:is(:hover,:focus-visible) { translate:0 var(--motion-hover-lift); box-shadow:var(--raised-shadow); }
.project-link:is(:hover,:focus-visible) { border-color:color-mix(in srgb,var(--copper) 65%,var(--line)); }
.project-visual { background: color-mix(in srgb,var(--paper) 78%,var(--lichen)); overflow: hidden; transition:filter var(--motion-medium) var(--ease-route); }
.project-featured .project-visual { aspect-ratio: 2.45 / 1; }
.project:not(.project-featured) .project-visual { aspect-ratio: 1.55 / 1; }
.project-visual svg { width: 100%; height: 100%; transition:scale var(--motion-page) var(--ease-route),rotate var(--motion-page) var(--ease-route); }
.project-link:is(:hover,:focus-visible) .project-visual { filter:saturate(1.08); }
.project-link:is(:hover,:focus-visible) .project-visual svg { scale:1.018; rotate:-.18deg; }
.project-link:is(:hover,:focus-visible)::before { border-color:var(--art-hot); }
.project-visual text { fill: var(--muted); font: 700 11px var(--mono); letter-spacing: 1.4px; }
.card-grid { fill: none; stroke: color-mix(in srgb,var(--ink) 12%,transparent); stroke-width: 1; }
.visual-ddns .ddns-routes path { fill: none; stroke: var(--art-track); stroke-width: 2.5; stroke-dasharray: 6 9; }
.visual-ddns .ddns-endpoints > g > circle:first-child { fill: var(--paper); stroke: var(--ink); stroke-width: 4; }
.visual-ddns .endpoint-core { fill: var(--lichen); stroke: var(--paper); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: endpoint-pulse 2.4s ease-in-out infinite; }
.visual-ddns .ddns-endpoints > g:nth-child(2) .endpoint-core { animation-delay: -.8s; }.visual-ddns .ddns-endpoints > g:nth-child(3) .endpoint-core { animation-delay: -1.6s; }
.visual-ddns .ddns-packets circle { fill: var(--art-hot); stroke: var(--art-warm); stroke-width: 3; }
.ddns-server rect { fill: var(--art-panel); stroke: var(--art-panel-line); stroke-width: 2; }.ddns-server .server-top { stroke: var(--art-panel-line); stroke-width: 2; }.ddns-server > circle:not(.server-status) { fill: var(--art-hot); }.ddns-server > circle:nth-of-type(2) { fill: var(--art-warm); }.ddns-server .server-lines { fill: none; stroke: var(--art-on-panel); stroke-width: 7; stroke-linecap: round; }.ddns-server .server-status { fill: var(--art-success); animation: status-blink 1.8s ease-in-out infinite; }
@keyframes endpoint-pulse { 50% { fill: var(--art-hot); scale: 1.35; } }
@keyframes status-blink { 50% { opacity: .35; } }
.visual-shield .shield { fill: var(--art-panel); }.visual-shield .shield-inset { fill: none; stroke: var(--art-panel-line); stroke-width: 2; stroke-dasharray: 5 7; }.visual-shield .scan { stroke: var(--art-hot); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 5px color-mix(in srgb,var(--art-hot) 55%,transparent)); animation: scan 2.8s ease-in-out infinite; }.visual-shield .check { fill: none; stroke: var(--art-on-panel); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: check-draw 2.8s ease-out infinite; }.evidence-dots circle { fill: var(--art-warm); stroke: var(--ink); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: evidence-read 2.8s ease-in-out infinite; }.evidence-dots circle:nth-child(2) { animation-delay: -.9s; }.evidence-dots circle:nth-child(3) { animation-delay: -1.8s; }
@keyframes scan { 0%,100% { translate: 0 -35px; opacity: .45; } 50% { translate: 0 45px; opacity: 1; }}
@keyframes check-draw { 0%,48% { stroke-dashoffset: 1; } 72%,100% { stroke-dashoffset: 0; } }
@keyframes evidence-read { 50% { fill: var(--art-hot); scale: 1.35; } }
.visual-devices .device-panel { fill: var(--art-panel); stroke: var(--art-panel-line); stroke-width: 2; }.device-header { stroke: var(--art-panel-line); stroke-width: 2; }.window-dots circle { fill: var(--art-hot); }.window-dots circle:nth-child(2) { fill: var(--art-warm); }.window-dots circle:nth-child(3) { fill: var(--art-success); }.device-icons { fill: none; stroke: var(--art-success); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }.device-labels path { stroke: var(--art-on-panel); stroke-width: 5; stroke-linecap: round; opacity: .82; }.toggle-tracks rect { fill: var(--art-track); }.toggles circle { fill: var(--art-hot); transform-box: fill-box; transform-origin: center; animation: toggle 3.6s steps(1,end) infinite; }.toggles circle:nth-child(2){animation-delay:-1.2s}.toggles circle:nth-child(3){animation-delay:-2.4s}
@keyframes toggle { 50% { fill: var(--art-success); translate: 28px 0; }}
.project-copy { padding: clamp(1.4rem, 3vw, 2.4rem); }
.project-meta { margin: 0 0 1rem; color: var(--muted); font: 700 .75rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.project h3 { display: flex; align-items:center; justify-content: space-between; gap: 1rem; margin: 0; font: 400 clamp(1.8rem,3.6vw,3.1rem)/1.08 var(--serif); letter-spacing: -.032em; }
.project-copy > p:last-child { max-width: 62ch; margin: 1rem 0 0; color: var(--muted); line-height: 1.62; }
.project-evidence { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin:1.25rem 0 0; border-top:1px solid var(--line); background:var(--line); }
.project-evidence div { min-width:0; padding:.85rem .75rem 0 0; background:var(--snow); }
.project-evidence div + div { padding-inline: .75rem 0; }
.project-evidence dt { color:var(--muted); font:700 .64rem/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.project-evidence dd { margin:.22rem 0 0; font:700 .78rem/1.45 var(--sans); }
.all-work { margin: 2.2rem 0 0; text-align: center; }.button-secondary { background: transparent; color: var(--ink); }.button-secondary:is(:hover,:focus-visible) { color: var(--snow); }
.toolbox { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(3rem, 8vw, 8rem); padding-block: clamp(5rem, 10vw, 9rem); border-top: 1px solid var(--line); }
.toolbox dl { margin: 0; }.toolbox dl div { padding: 1.45rem 1rem; border-bottom: 1px solid var(--line); transition:background var(--motion-fast),box-shadow var(--motion-fast); }.toolbox dl div:hover { background:var(--snow); box-shadow:inset 3px 0 var(--copper); }.toolbox dt { position:relative; min-height:1.1rem; margin-bottom:.55rem; padding-left:1.75rem; font:700 .75rem/1.4 var(--mono); text-transform:uppercase; letter-spacing:.11em; }.detail-glyph { position:absolute; top:50%; left:0; width:1.05rem; height:1.05rem; overflow:visible; color:var(--copper); stroke-width:1.65; translate:0 -50%; }.toolbox dd { max-width: 58ch; margin: 0; color: var(--muted); font-size: 1.08rem; line-height: 1.62; }
.current { display:grid; grid-template-columns:.7fr 2.3fr; gap:clamp(2rem,7vw,7rem); padding-block:clamp(4rem,8vw,7rem); border-top:1px solid var(--line); }
.current h2,.contact h2 { max-width:16ch; margin:0; font:400 clamp(2.2rem,4.4vw,4.2rem)/1.03 var(--serif); letter-spacing:-.04em; }
.current h2 + p,.contact div > p { max-width:62ch; margin:1.4rem 0 0; color:var(--muted); font-size:1.06rem; line-height:1.68; }
.current-date { margin:0; color:var(--muted); font:700 .68rem/1.45 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.contact { display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(2rem,7vw,7rem); align-items:end; margin-top:clamp(3rem,7vw,6rem); padding:clamp(3rem,6vw,5.5rem); background:var(--ink); color:var(--paper); }
.contact .eyebrow,.contact div > p { color:color-mix(in srgb,var(--paper) 72%,transparent); }
.contact .button { margin-top:1.6rem; border-color:var(--paper); background:var(--paper); color:var(--ink); }
.contact .button:is(:hover,:focus-visible) { border-color:var(--copper); background:var(--copper); color:var(--paper); }
/* One inherited color phase per badge replaces per-part color animations. */
@property --hobby-emphasis { syntax:'<percentage>'; inherits:true; initial-value:0%; }
.hobbies { display:grid; grid-template-columns:minmax(13rem,.8fr) 2fr; align-items:center; gap:clamp(2rem,6vw,6rem); padding-block:clamp(4rem,8vw,7rem); border-top:1px solid var(--line); }
.hobbies-heading h2 { max-width: 22rem; margin: 0; font: 400 clamp(1.7rem,2.8vw,2.65rem)/1.03 var(--serif); letter-spacing: -.04em; }
.hobby-route { --hobby-badge-size:clamp(3.3rem,5.5vw,4.25rem); --hobby-stagger:1.6rem; container-type:inline-size; position: relative; min-width: 0; isolation: isolate; }
.hobbies[data-motion="paused"] .hobby-route * { animation-play-state: paused!important; }
.hobby-trail,.hobby-flight-layer { position: absolute; inset: auto 0;
 /* Align the flight's beer stop (y=36.9) with the tap center (y=3).
 Container units retain the 1000:96 drawing ratio at every width. */
 top:calc(var(--hobby-stagger) + .65rem + (var(--hobby-badge-size) - 1.3rem - 2px)/16 - 3.69cqw);
 width: 100%; height: auto; overflow: visible; pointer-events: none; }.hobby-trail { z-index: -1; }.hobby-flight-layer { z-index: 2; }
.hobby-trail path { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: .018 .014; vector-effect: non-scaling-stroke; }
.hobby-traveler,.hobby-landed-disc { fill: var(--copper); stroke: var(--paper); stroke-width: 2.5; vector-effect: non-scaling-stroke; }.traveler-disc .disc-body { fill:var(--art-hot);stroke:var(--art-warm); }.traveler-disc .disc-rim { fill:none;stroke:color-mix(in srgb,var(--art-hot) 65%,var(--ink));stroke-width:1.3; }.traveler-disc .disc-mark { fill:var(--scene-celestial);stroke:none; }.hobby-landed-disc { display: none; }
.hobby-thrower { fill: var(--paper); stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; transform-box: view-box; transform-origin: 25px 60px; animation: thrower-exit 24s linear infinite; }.hobby-thrower path { fill: none; }.thrower-body { transform-box: view-box; transform-origin: 25px 47px; animation: drive-lean 24s ease-out infinite; }.throwing-arm { transform-box: view-box; transform-origin: 25px 47px; animation: disc-throw 24s cubic-bezier(.2,.8,.3,1) infinite,throw-arm-visibility 24s linear infinite; }.walking-arm { opacity:0;animation:walk-arm-visibility 24s linear infinite; }.thrower-leg { transform-box: view-box; transform-origin: 25px 60px; }.thrower-leg-front { animation: walk-front 24s ease-in-out infinite; }.thrower-leg-back { animation: walk-back 24s ease-in-out infinite; }
.person-neck,.person-face,.person-clothes,.girl-clothes,.person-shoes { fill:none;stroke-linecap:round;stroke-linejoin:round; }.person-neck,.person-face,.person-hand { stroke:#9b674d; }.person-hand { fill:#d5a17d;stroke-width:.8; }.person-clothes { stroke:#86b2bd;stroke-width:1; }.girl-clothes { stroke:#a8c49a;stroke-width:1; }.person-shoes { stroke:#293b48;stroke-width:2.2; }
.hobby-thrower .man-hair-detail,.hobby-cheerers .man-hair-detail { fill:none;stroke:#7d4435;stroke-width:.75; }
.hobby-thrower .person-skin { fill: #d5a17d; stroke: #9b674d; }.hobby-thrower .man-hair { fill: #d99068; stroke: #d99068; }.hobby-thrower .man-beard { stroke: #8b553d; stroke-width: 1.3; }.hobby-thrower .man-glasses { fill: #111; stroke: #111; stroke-width: .8; }.hobby-thrower .thrower-body { fill: #527f91; stroke: #86b2bd; }.hobby-thrower .throwing-arm,.hobby-thrower .walking-arm { stroke:#d5a17d; }.throwing-hand { transform-box:view-box;transform-origin:25px 47px;animation:disc-throw 24s cubic-bezier(.2,.8,.3,1) infinite,throw-arm-visibility 24s linear infinite; }.walking-hand { opacity:0;animation:walk-arm-visibility 24s linear infinite; }.hobby-thrower .thrower-leg { stroke: #293b48; stroke-width: 2.8; }.walking-girl { opacity: 0; animation: companion-join 24s ease-in-out infinite; }.hobby-thrower .girl-hair { fill: #4a2d25; stroke: #4a2d25; }.hobby-thrower .girl-jacket { fill: #78996d; stroke: #a8c49a; }.hobby-thrower .girl-arms { stroke: #d5a17d; }.hobby-thrower .girl-legs { stroke: #343845; stroke-width: 2.6; }.walking-dog { opacity: 0; animation: dog-join 24s ease-in-out infinite; }.hobby-thrower .dog-body { fill: #f5f2e9; stroke: #f5f2e9; }.hobby-thrower .dog-head { fill: #141919; stroke: #141919; }.hobby-thrower .dog-eye { fill:#f5f2e9;stroke:none; }.hobby-thrower .dog-details,.hobby-thrower .dog-feathering { fill:none;stroke:#f5f2e9;stroke-width:1.25; }
.traveler-disc { transform-box:fill-box;transform-origin:center;animation:traveler-disc-form 24s linear infinite; }.traveler-ufo { opacity: 0; animation: traveler-ufo-form 24s linear infinite; }.traveler-ufo .ufo-shell { fill:var(--art-panel);stroke:var(--art-hot);stroke-width:2.5;transform-box:fill-box;transform-origin:center;scale:.58; }.traveler-ufo .ufo-canopy { fill:var(--art-success);stroke:var(--art-violet);stroke-width:1.2; }.traveler-ufo-lights { fill:var(--art-warm);stroke:none;animation:traveler-ufo-lights 1.8s steps(3,end) infinite; }.traveler-ufo .ufo-beam { fill: color-mix(in srgb,var(--copper) 45%,transparent); stroke: var(--copper); stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center top; animation: ufo-beam-cycle 24s linear infinite; }
.route-bigfoot { fill: #6f4b35; stroke: #d9b18c; stroke-width: 1.8; opacity: 0; scale:1; transform-box:view-box; transform-origin:center; vector-effect: non-scaling-stroke; animation: route-bigfoot-visibility 24s linear infinite,route-rider-depth 24s linear infinite; }
.bigfoot-anatomy { transform-box: fill-box; transform-origin: center bottom; animation: bigfoot-ride-posture 24s ease-in-out infinite; }.bigfoot-leg { transform-box: view-box; transform-origin: 0 13px; }.bigfoot-leg-left { animation: bigfoot-pedal-left 24s ease-in-out infinite; }.bigfoot-leg-right { animation: bigfoot-pedal-right 24s ease-in-out infinite; }.bigfoot-arms { animation: bigfoot-grip 24s ease-in-out infinite; transform-box: view-box; transform-origin: 0 7px; }
.route-bike { fill: none; stroke: var(--copper); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; scale:1; transform-box:view-box; transform-origin:center; vector-effect: non-scaling-stroke; animation: route-bike-visibility 24s linear infinite,route-rider-depth 24s linear infinite; }.route-bike-tires { stroke:var(--ink); }.route-bike-frame { stroke:var(--art-hot); }.route-bike-saddle { stroke:var(--art-warm); }.route-bike-wheel { stroke:var(--art-cool);transform-box:fill-box;transform-origin:center;animation:hobby-pedal 1.2s linear infinite; }
.route-camp-tree-foreground { fill:transparent;stroke:var(--ink);stroke-width:1.7;stroke-linejoin:round;opacity:1;vector-effect:non-scaling-stroke;animation:route-tree-color 24s linear infinite; }
.hobby-cheerers { opacity:0;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;animation:cheerers-arrive 24s ease-out infinite; }.hobby-cheerers .person-skin { fill:#d5a17d;stroke:#9b674d; }.hobby-cheerers .man-hair { fill:#d99068;stroke:#d99068; }.hobby-cheerers .man-beard { fill:none;stroke:#8b553d; }.hobby-cheerers .man-glasses { fill:#111;stroke:#111;stroke-width:.7; }.hobby-cheerers .cheer-man-body { fill:#527f91;stroke:#86b2bd; }.hobby-cheerers .girl-hair { fill:#4a2d25;stroke:#4a2d25; }.hobby-cheerers .girl-jacket { fill:#78996d;stroke:#a8c49a; }.hobby-cheerers .cheer-arm,.hobby-cheerers .cheer-hand { transform-box:view-box; }.hobby-cheerers .cheer-arm { fill:none;stroke:#d5a17d;stroke-width:2.2; }.hobby-cheerers .cheer-arm-left,.hobby-cheerers .cheer-hand-left { transform-origin:4px 36px;animation:cheer-left 24s ease-in-out infinite; }.hobby-cheerers .cheer-arm-right,.hobby-cheerers .cheer-hand-right { transform-origin:12px 36px;animation:cheer-right 24s ease-in-out infinite; }.cheerer-girl .cheer-arm-left,.cheerer-girl .cheer-hand-left { transform-origin:24px 38px; }.cheerer-girl .cheer-arm-right,.cheerer-girl .cheer-hand-right { transform-origin:32px 38px; }.hobby-cheerers .cheer-legs { fill:none;stroke:#343845;stroke-width:2.4; }.hobby-cheerers .dog-body { fill:#f5f2e9;stroke:#f5f2e9; }.hobby-cheerers .dog-head { fill:#141919;stroke:#141919; }.hobby-cheerers .dog-eye { fill:#f5f2e9;stroke:none; }.hobby-cheerers .dog-details,.hobby-cheerers .dog-feathering { fill:none;stroke:#f5f2e9;stroke-width:1.2; }.cheerer-dog { animation:cheer-dog 24s ease-in-out infinite; }
.hobby-thrower .thrower-man>.person-skin,.hobby-cheerers .cheerer-man>.person-skin { stroke:none; }.hobby-thrower .thrower-man>.man-hair,.hobby-cheerers .cheerer-man>.man-hair { fill:#b96345;stroke:none; }
.hobby-thrower .thrower-man>.man-neck,.hobby-cheerers .cheerer-man>.man-neck { fill:#d5a17d;stroke:none; }
.beer-disc-handoff { opacity:0;fill:var(--copper);stroke:var(--paper);stroke-width:1.6;transform-box:view-box;transform-origin:23px 3px;animation:beer-disc-handoff 24s linear infinite; }.beer-disc-handoff path { fill:none; }.beer-tap { opacity:0;transform-box:view-box;transform-origin:23px 6px;animation:traveler-tap-form 24s linear infinite; }.hobby-route .beer-tap .tap-body { stroke-width:2; fill:color-mix(in srgb,var(--copper),var(--art-panel) var(--hobby-emphasis));stroke:color-mix(in srgb,var(--paper),var(--art-warm) var(--hobby-emphasis)); }.tap-badge { fill:var(--art-hot);stroke:var(--art-warm);stroke-width:1; }.tap-badge-mark { fill:var(--art-warm);stroke:none; }.tap-hardware { fill:none;stroke:var(--art-cool);stroke-width:1.35; }.hobby-route .beer-tap .tap-stream { fill:none;stroke:var(--art-warm);stroke-width:2.5;stroke-dasharray:3 2;opacity:0;animation:tap-flow 1s linear infinite,tap-stream-visibility 24s linear infinite; }
.hobby-route ul { display: grid; grid-template-columns: repeat(5,1fr); gap: clamp(.35rem,1.3vw,1rem); margin: 0; padding: 0; list-style: none; }
.hobby-route li { display: grid; justify-items: center; gap: .65rem; min-width: 0; color: var(--ink); font: 700 clamp(.66rem,1vw,.75rem)/1.2 var(--mono); letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.hobby-hiking { animation: scene-hiking 24s linear infinite; }.hobby-camping { animation: scene-camping 24s linear infinite; }.hobby-cycling { animation: scene-cycling 24s linear infinite; }.hobby-disc-golf { animation: scene-disc-golf 24s linear infinite; }.hobby-craft-beer { animation: scene-craft-beer 24s linear infinite; }
.hobby-route li:nth-child(even) { translate: 0 1.6rem; }
.hobby-route li svg { width: var(--hobby-badge-size); padding: .65rem; overflow: visible; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.camp-star { transform-box: fill-box; transform-origin: center; animation: var(--hobby-twinkle,none) 3.6s ease-in-out infinite; }
.scene-night-only,.hike-aurora,.hike-moon,.moon-crater,.hike-stars,.camp-moon,.camp-sky-stars,.camp-star { visibility:hidden; }.scene-day-only { visibility:visible; }.hike-day-sun { animation:var(--hobby-day-rise,hobby-rise) 6s ease-in-out infinite; fill:color-mix(in srgb,transparent,var(--scene-celestial) var(--hobby-emphasis));stroke:color-mix(in srgb,currentColor,var(--scene-celestial) var(--hobby-emphasis)); }.camp-day-sun { animation:var(--hobby-day-rise,hobby-rise) 6s ease-in-out infinite; fill:color-mix(in srgb,transparent,var(--scene-celestial) var(--hobby-emphasis));stroke:color-mix(in srgb,currentColor,var(--scene-celestial) var(--hobby-emphasis)); }
.hike-night-sky { fill:color-mix(in srgb,var(--paper),var(--scene-sky) var(--hobby-emphasis));stroke:color-mix(in srgb,currentColor,var(--scene-sky-edge) var(--hobby-emphasis)); }.hike-aurora { fill: none; opacity: .7; stroke-width: 2.4; animation: var(--hobby-aurora,none) 5.5s ease-in-out infinite alternate; stroke:color-mix(in srgb,currentColor,var(--aurora-active) var(--hobby-emphasis)); }.aurora-one { --aurora-active:var(--art-success); }.aurora-two { --aurora-active:var(--art-violet); animation-delay:-2.1s; }.hike-moon { fill:color-mix(in srgb,var(--paper),var(--scene-celestial) var(--hobby-emphasis));stroke:color-mix(in srgb,currentColor,var(--scene-celestial) var(--hobby-emphasis)); }.moon-crater,.hike-stars { stroke:color-mix(in srgb,currentColor,var(--scene-celestial) var(--hobby-emphasis)); }.hike-snow { fill:color-mix(in srgb,var(--paper),var(--snow) var(--hobby-emphasis));stroke:color-mix(in srgb,currentColor,var(--snow) var(--hobby-emphasis)); }.hike-pines { stroke:color-mix(in srgb,currentColor,var(--art-forest) var(--hobby-emphasis)); }
.bike-wheel, .bike-crank { transform-box: view-box; animation: hobby-pedal 5s linear infinite; }.bike-wheel-rear { transform-origin: 12px 34px; }.bike-wheel-front { transform-origin: 37px 34px; }.bike-crank { transform-origin: 25px 34px; animation-duration: 2.5s; }
.beer-foam,.beer-bubbles { opacity:0;animation:beer-content-visibility 24s linear infinite; }.beer-foam { transform-box:view-box;animation:beer-content-visibility 24s linear infinite,beer-foam-rise 24s linear infinite; fill:color-mix(in srgb,transparent,color-mix(in srgb,var(--art-warm) 35%,var(--art-on-panel)) var(--hobby-emphasis));stroke:color-mix(in srgb,transparent,color-mix(in srgb,var(--art-warm) 35%,var(--art-on-panel)) var(--hobby-emphasis)); }.beer-bubble { transform-box: fill-box; transform-origin: center; animation: hobby-bubble 3.2s ease-in infinite; }.bubble-two { animation-delay: 1.4s; }
/* Only the flame moves; its base stays attached to the stationary logs. */
.camp-flame { transform-box:view-box; transform-origin:27px 42px; animation:camp-flicker 2.4s ease-in-out infinite; }
@keyframes camp-flicker { 0%,100% { scale:1 1; } 35% { scale:.92 1.12; } 70% { scale:1.06 .92; } }
.hike-stars { animation:var(--hobby-stars,none) 3.8s ease-in-out infinite; }
/* Hidden celestial artwork does not need its own animation effects. */
:root[data-theme="night"] .hobbies { --hobby-aurora:alpine-aurora; --hobby-stars:alpine-stars; --hobby-twinkle:hobby-twinkle; --hobby-day-rise:none; }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme]) .hobbies { --hobby-aurora:alpine-aurora; --hobby-stars:alpine-stars; --hobby-twinkle:hobby-twinkle; --hobby-day-rise:none; }
}
@keyframes hobby-twinkle { 0%,100% { opacity: .45; scale: .78; } 50% { opacity: 1; scale: 1.12; } }
@keyframes hobby-rise { 0%,100% { translate: 0 .5px; } 50% { translate: 0 -.5px; } }
@keyframes hobby-pedal { to { rotate: 360deg; } }

@keyframes traveler-disc-form { 0%,4%,40%,49%,69.3%,89.5% { opacity:1;scale:1;rotate:0deg; } 6%,38% { opacity:0;scale:1;rotate:0deg; } 49.6%,68.7% { opacity:0;scale:.7 .45;rotate:-8deg; } 91%,100% { opacity:0;scale:1;rotate:0deg; } 0%,69.3% { translate:0; } 91%,100% { translate:var(--hobby-catch-x,0px) var(--hobby-catch-y,0px); } }
@keyframes traveler-ufo-form { 0%,4%,40%,100% { opacity: 0; } 6%,38% { opacity: 1; } }
@keyframes traveler-ufo-lights { 0%,100% { opacity:.45; } 50% { opacity:1; } }
@keyframes beer-disc-handoff { 0%,49%,69.3%,100% { opacity:0;scale:1;rotate:0deg; } 49.6% { opacity:1;scale:1;rotate:0deg; } 50.8%,66% { opacity:0;scale:.3 .16;rotate:-12deg; } 67.3% { opacity:1;scale:.3 .16;rotate:12deg; } 68.7% { opacity:1;scale:1;rotate:0deg; } }
@keyframes traveler-tap-form { 0%,49.6%,67.3%,100% { opacity:0;translate:0;scale:.3 .16;rotate:-12deg; } 50.8%,66% { opacity:1;translate:0;scale:1;rotate:0deg; } }
@keyframes ufo-beam-cycle { 0%,13%,24%,32%,38%,100% { opacity: 0; scale: .7 0; } 16%,22%,34%,36% { opacity: .72; scale: 1 1; } 20%,35% { opacity: .9; scale: 1 1; } }
@keyframes tap-flow { to { stroke-dashoffset: -7; } }
@keyframes tap-stream-visibility { 0%,51.2%,66%,100% { opacity:0; } 52%,65.5% { opacity:1; } }
@keyframes disc-throw { 0% { rotate: -110deg; } 1.5% { rotate: -145deg; } 3.5%,100% { rotate: 18deg; } }
@keyframes throw-arm-visibility { 0%,3.8% { opacity:1; } 4.6%,100% { opacity:0; } }
@keyframes walk-arm-visibility { 0%,3.8% { opacity:0; } 4.6%,100% { opacity:1; } }
@keyframes drive-counter { 0% { rotate: 34deg; } 3.5%,100% { rotate: -24deg; } }
@keyframes drive-lean { 0% { rotate: -8deg; } 2% { rotate: 13deg; } 4%,100% { rotate: -4deg; } }
@keyframes thrower-exit { 0%,5% { opacity: 1; translate: 0; } 7% { translate: 8px 0; } 9% { translate: 18px -1px; } 11% { opacity: .75; translate: 30px 0; } 14%,100% { opacity: 0; translate: 48px -5px; } }
@keyframes companion-join { 0%,3% { opacity:0;translate:-18px 1px; } 4%,11% { opacity:1;translate:4px 0; } 7%,10% { translate:4px -1px; } 14%,100% { opacity:0;translate:4px 0; } }
@keyframes dog-join { 0%,3.5% { opacity:0;translate:-15px 1px; } 4.5%,11% { opacity:1;translate:7px 0; } 7.5%,10.5% { translate:7px -1px; } 14%,100% { opacity:0;translate:7px 0; } }
@keyframes walk-front { 0%,5%,14%,100% { rotate: 0deg; } 7%,11% { rotate: -18deg; } 9%,13% { rotate: 18deg; } }
@keyframes walk-back { 0%,5%,14%,100% { rotate: 0deg; } 7%,11% { rotate: 18deg; } 9%,13% { rotate: -18deg; } }
@keyframes route-bigfoot-visibility { 0%,10%,24%,31%,52%,100% { opacity: 0; } 12%,18%,34%,46% { opacity: 1; } 21% { opacity: .35; } 50% { opacity: .18; } }
@keyframes route-bike-visibility { 0%,35%,52%,100% { opacity: 0; } 38%,46% { opacity: 1; } 50% { opacity: .18; } }
@keyframes route-rider-depth { 0%,38% { scale:1; } 46% { scale:.88; } 50%,100% { scale:.58; } }
@keyframes station-bike-visibility { 0%,34%,52%,100% { opacity: 1; } 37%,49% { opacity: .08; } }
@keyframes bigfoot-ride-posture { 0%,35%,52%,100% { translate:0;rotate:0deg; } 38%,50% { translate:-6px -8px;rotate:12deg; } }
@keyframes bigfoot-grip { 0%,35%,52%,100% { rotate:0deg; } 38%,50% { rotate:-8deg; } }
@keyframes bigfoot-pedal-left { 0%,35%,52%,100% { rotate:0deg; } 38% { rotate:-24deg; } 41% { rotate:24deg; } 44% { rotate:-24deg; } 47% { rotate:24deg; } 50% { rotate:-24deg; } }
@keyframes bigfoot-pedal-right { 0%,35%,52%,100% { rotate:0deg; } 38% { rotate:24deg; } 41% { rotate:-24deg; } 44% { rotate:24deg; } 47% { rotate:-24deg; } 50% { rotate:24deg; } }
@keyframes beer-fill { 0%,49% { opacity:0;scale:1 0; } 52% { opacity:.9;scale:1 .08; } 65%,100% { opacity:.94;scale:1 1; } }
@keyframes beer-content-visibility { 0%,51% { opacity:0; } 54%,100% { opacity:1; } }
@keyframes beer-foam-rise { 0%,49% { translate:0 31px; } 52% { translate:0 29px; } 65%,100% { translate:0; } }
@keyframes cheerers-arrive { 0%,87% { opacity:0;translate:-18px 5px; } 92%,97% { opacity:1;translate:0; } 100% { opacity:0;translate:0; } }
@keyframes cheer-left { 0%,88% { rotate:24deg; } 92%,94%,98%,100% { rotate:-16deg; } 93%,96%,99% { rotate:8deg; } }
@keyframes cheer-right { 0%,88% { rotate:-24deg; } 92%,94%,98%,100% { rotate:16deg; } 93%,96%,99% { rotate:-8deg; } }
@keyframes cheer-dog { 0%,88% { translate:-6px 3px; } 92%,96%,100% { translate:0; } 94%,98% { translate:0 -2px; } }
@keyframes scene-hiking { 0%,9%,100% { color: var(--ink); --hobby-emphasis:0%; } 2%,7% { color: var(--copper); --hobby-emphasis:100%; } }
@keyframes scene-camping { 0%,8%,28%,100% { color: var(--ink); --hobby-emphasis:0%; } 11%,25% { color: var(--copper); --hobby-emphasis:100%; } }
@keyframes scene-cycling { 0%,23%,39%,100% { color: var(--ink); --hobby-emphasis:0%; } 26%,36% { color: var(--copper); --hobby-emphasis:100%; } }
@keyframes scene-craft-beer { 0%,46%,71%,100% { color: var(--ink); --hobby-emphasis:0%; } 50%,68% { color: var(--copper); --hobby-emphasis:100%; } }
@keyframes scene-disc-golf { 0%,79%,100% { color: var(--ink); --hobby-emphasis:0%; } 84%,97% { color: var(--copper); --hobby-emphasis:100%; } }
.hobby-route .beer-liquid { stroke:none;transform-box:view-box;transform-origin:24px 41px;animation:beer-fill 24s linear infinite; fill:color-mix(in srgb,transparent,var(--art-warm) var(--hobby-emphasis)); }.hobby-route .beer-fill-foam { transform-box:view-box;animation:beer-foam-rise 24s linear infinite; fill:color-mix(in srgb,transparent,color-mix(in srgb,var(--art-warm) 35%,var(--art-on-panel)) var(--hobby-emphasis));stroke:color-mix(in srgb,transparent,color-mix(in srgb,var(--art-warm) 35%,var(--art-on-panel)) var(--hobby-emphasis)); }.hobby-route .pint-outline { fill: none; }
.basket-caught-disc { fill:var(--art-hot);stroke:var(--art-warm);stroke-width:1.4;opacity:0;animation:basket-disc-catch 24s linear infinite; }
.camp-night-sky,.cycle-sky,.disc-sky { fill:var(--paper);stroke:currentColor; }.camp-night-sky { fill:color-mix(in srgb,var(--paper),var(--scene-sky) var(--hobby-emphasis));stroke:color-mix(in srgb,currentColor,var(--scene-sky-edge) var(--hobby-emphasis)); }.camp-moon { fill:color-mix(in srgb,transparent,var(--scene-celestial) var(--hobby-emphasis));stroke:color-mix(in srgb,currentColor,var(--scene-celestial) var(--hobby-emphasis)); }.camp-sky-stars { stroke:color-mix(in srgb,currentColor,var(--scene-celestial) var(--hobby-emphasis)); }.camp-ground { stroke:color-mix(in srgb,currentColor,var(--art-forest) var(--hobby-emphasis)); }.camp-fire { stroke:color-mix(in srgb,currentColor,var(--art-hot) var(--hobby-emphasis)); }.cycle-sky { fill:color-mix(in srgb,var(--paper),var(--scene-sky) var(--hobby-emphasis));stroke:color-mix(in srgb,currentColor,var(--scene-sky-edge) var(--hobby-emphasis)); }.cycle-sun { animation:hobby-rise 4.6s ease-in-out infinite; fill:color-mix(in srgb,transparent,var(--scene-celestial) var(--hobby-emphasis));stroke:color-mix(in srgb,currentColor,var(--scene-celestial) var(--hobby-emphasis)); }.cycle-cloud { stroke:color-mix(in srgb,currentColor,var(--art-cool) var(--hobby-emphasis)); }.cycle-hills,.cycle-pines { stroke:color-mix(in srgb,currentColor,var(--art-forest) var(--hobby-emphasis)); }.disc-sky { fill:color-mix(in srgb,var(--paper),var(--scene-sky) var(--hobby-emphasis));stroke:color-mix(in srgb,currentColor,var(--scene-sky-edge) var(--hobby-emphasis)); }.disc-sun { animation:hobby-rise 4.2s ease-in-out infinite; fill:color-mix(in srgb,transparent,var(--scene-celestial) var(--hobby-emphasis));stroke:color-mix(in srgb,currentColor,var(--scene-celestial) var(--hobby-emphasis)); }.disc-cloud { stroke:color-mix(in srgb,currentColor,var(--art-cool) var(--hobby-emphasis)); }.disc-course { stroke:color-mix(in srgb,currentColor,var(--art-forest) var(--hobby-emphasis)); }.disc-flight-arc { stroke-dasharray:2 3; stroke:color-mix(in srgb,currentColor,var(--art-violet) var(--hobby-emphasis)); }
.hobby-route .hike-mountains { stroke:color-mix(in srgb, currentColor, var(--lichen) var(--hobby-emphasis)); }.hobby-route .hike-sun { animation: hobby-rise 4s ease-in-out infinite; stroke:color-mix(in srgb, currentColor, var(--scene-celestial) var(--hobby-emphasis)); }.hobby-route .camp-tent { stroke:color-mix(in srgb, currentColor, var(--art-hot) var(--hobby-emphasis));fill:color-mix(in srgb,transparent,color-mix(in srgb,var(--art-hot) 45%,var(--paper)) var(--hobby-emphasis)); }.hobby-route .camp-details { stroke:color-mix(in srgb,currentColor,var(--art-warm) var(--hobby-emphasis)); }.hobby-route .camp-tree { fill:color-mix(in srgb,transparent,color-mix(in srgb,var(--art-forest) 44%,var(--paper)) var(--hobby-emphasis));stroke:color-mix(in srgb,currentColor,var(--art-forest) var(--hobby-emphasis)); }.hobby-route .camp-star { animation: var(--hobby-twinkle,none) 3.6s ease-in-out infinite; stroke:color-mix(in srgb, currentColor, var(--scene-celestial) var(--hobby-emphasis)); }.hobby-route .camp-lantern { stroke:color-mix(in srgb,currentColor,var(--art-warm) var(--hobby-emphasis));fill:color-mix(in srgb,transparent,var(--art-hot) var(--hobby-emphasis)); }.hobby-route .bike-frame { stroke:color-mix(in srgb,currentColor,var(--art-hot) var(--hobby-emphasis)); }.hobby-route .bike-tires { stroke:color-mix(in srgb,currentColor,var(--ink) var(--hobby-emphasis)); }.hobby-route .bike-details { stroke:color-mix(in srgb,currentColor,var(--art-forest) var(--hobby-emphasis)); }.hobby-route .bike-wheel { animation:hobby-pedal 5s linear infinite; stroke:color-mix(in srgb,currentColor,var(--art-cool) var(--hobby-emphasis)); }.hobby-route .bike-crank { animation:hobby-pedal 2.5s linear infinite; stroke:color-mix(in srgb,currentColor,var(--art-warm) var(--hobby-emphasis)); }.hobby-route .pint-outline { stroke:color-mix(in srgb,currentColor,var(--art-cool) var(--hobby-emphasis)); }.hobby-route .beer-details { stroke:color-mix(in srgb,currentColor,var(--art-violet) var(--hobby-emphasis)); }.hobby-route .disc-pin { stroke:color-mix(in srgb,currentColor,var(--scene-celestial) var(--hobby-emphasis)); }.hobby-route .disc-basket,.hobby-route .disc-basket-rim { stroke:color-mix(in srgb,currentColor,var(--art-hot) var(--hobby-emphasis)); }
.hobby-cycling > svg { animation: station-bike-visibility 24s linear infinite; }
 @keyframes alpine-stars { 0%,100% { opacity:.38; } 50% { opacity:1; } } @keyframes alpine-aurora { from { opacity:.48;translate:0 1px; } to { opacity:.88;translate:0 -1px; } }



@keyframes route-tree-color { 0%,9%,30%,100% { fill:transparent;stroke:var(--ink); } 11%,28% { fill:color-mix(in srgb,var(--art-forest) 38%,var(--paper));stroke:var(--art-forest); } }

@keyframes basket-disc-catch { 0%,89.5% { opacity:0; } 91%,97% { opacity:1; } 100% { opacity:0; } }
@keyframes hobby-bubble { 0% { opacity: 0; translate: 0 4px; } 35% { opacity: 1; } 100% { opacity: 0; translate: 0 -8px; } }
/* Only decorative descendants pause; card and hero entrances still finish. */
:is(.signal-map,.project-visual)[data-motion="paused"] svg * { animation-play-state:paused!important; }
:root[data-motion="reduced"] :is(.ddns-packets,.map-node .pulse) { display:none; }
@media (prefers-reduced-motion:reduce) {
  .signal-map svg *,.project-visual svg * { animation:none!important; }
  .map-node .pulse { display:none; }
}

/* Saved and system reduced motion share the same complete static scene. */
:root[data-motion="reduced"] :is(.hobby-traveler,.route-bigfoot,.route-bike) { display:none; }
:root[data-motion="reduced"] .hobby-landed-disc { display:block; }
@media (prefers-reduced-motion:reduce) {
  .hobby-route * { animation:none!important; transition:none!important; }
}