/* Motion for the black and lime portfolio. Content remains visible without JS. */
.reading-progress{position:fixed;inset:0 0 auto;height:3px;z-index:100;background:var(--accent);transform:scaleX(var(--read,0));transform-origin:left;pointer-events:none}
.header nav a{position:relative;padding-block:8px}
.header nav a::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.header nav a[aria-current="location"]{color:var(--accent)}
.header nav a:is(:hover,:focus-visible,[aria-current="location"])::after{transform:scaleX(1)}
.hero-stage{isolation:isolate}
.hero-stage>img{transform:translateY(var(--photo-y,0px)) scale(1.09);transition:filter .5s}
.hero-stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:var(--light-visible,0);background:radial-gradient(420px circle at var(--light-x,50%) var(--light-y,50%),#cefa691a,transparent 70%);transition:opacity .4s}
.hero-stage:hover>img{filter:saturate(.85)}
.play-icon,.mail-circle{translate:var(--magnet-x,0px) var(--magnet-y,0px);transition:translate .3s ease-out,background .25s,color .25s,rotate .3s}
.play-link:hover .play-icon,.mail-circle:hover{rotate:8deg}
.live-row .row-arrow{transition:transform .3s,color .3s}
.live-row:is(:hover,:focus-visible) .row-arrow{transform:translate(4px,-4px);color:var(--text)}
.live-row h3{transition:translate .3s}.live-row:is(:hover,:focus-visible) h3{translate:5px 0}
.work-image{transform:perspective(950px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .35s ease-out;box-shadow:0 0 0 transparent}
.work-image::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(500px circle at var(--shine-x,50%) var(--shine-y,50%),#fff3,transparent 65%);opacity:0;transition:opacity .3s}
.work-card:hover .work-image::after{opacity:1}
.image-open{transition:rotate .3s,background .3s,color .3s}
.work-card:is(:hover,:focus-visible) .image-open{rotate:45deg;background:var(--accent)}
.tags span{transition:translate .25s,border-color .25s,color .25s}.tags span:hover{translate:0 -4px;border-color:var(--accent);color:var(--accent)}
.email{transition:letter-spacing .3s}.email:hover{letter-spacing:.03em}
.motion-toggle{position:fixed;right:18px;bottom:18px;z-index:20;background:#111210eb;color:#e9ece3;border:1px solid #616957;border-radius:24px;padding:10px 15px;font:12px Arial,sans-serif;cursor:pointer;box-shadow:0 4px 20px #0002}
.motion-toggle[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.gallery-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:18px}.gallery-controls button{background:none;border:1px solid #646b5b;border-radius:24px;color:var(--text);padding:10px 18px;cursor:pointer}.gallery-controls button:hover{background:var(--accent);color:var(--bg)}.gallery-count{font:14px monospace;color:var(--muted)}
#gallery[open]{animation:gallery-arrive .25s ease-out}#gallery::backdrop{backdrop-filter:blur(6px)}
@keyframes gallery-arrive{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
html.motion-off{scroll-behavior:auto}html.motion-off *,html.motion-off *::before,html.motion-off *::after{animation:none!important;transition:none!important}
html.motion-off .hero-stage>img{transform:none}html.motion-off .work-image{transform:none}html.motion-off .play-icon,html.motion-off .mail-circle{translate:0 0;rotate:none}
@media(pointer:coarse){.work-image{transform:none}.hero-stage>img{transform:none}.hero-stage::before{display:none}}
@media(max-width:760px){.motion-toggle{right:12px;bottom:12px;padding:9px 12px}footer{padding-bottom:72px}.gallery-controls{gap:10px}.gallery-controls button{padding:10px 12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.hero-stage>img,.work-image{transform:none}.play-icon,.mail-circle{translate:0 0;rotate:none}}