/* Preserve the directory’s typography, spacing and imagery. */
.animated-background{isolation:isolate}
.animated-background .shell{position:relative;z-index:1;padding-bottom:70px}
/* Keep the original shade at the edges, fading into a nearly clear centre. */
.animated-background .project{background:rgb(238 237 234 / .1);box-shadow:inset 0 0 44px 18px #eeedea}
.animated-background .artwork{background:transparent}
.background-scene{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.background-mesh,.background-charges,.background-aurora{position:absolute;pointer-events:none}
.background-mesh{inset:0;width:100%;height:100%;opacity:.55;mask-image:linear-gradient(#000 62%,#0000)}
.background-aurora{inset:-20% -10%;filter:blur(90px);opacity:.35;mix-blend-mode:multiply}
.background-aurora:before,.background-aurora:after{content:"";position:absolute;border-radius:50%;will-change:transform}
.background-aurora:before{width:56vw;height:56vw;top:-6vw;left:-8vw;background:radial-gradient(circle at 35% 35%,#aaa8a380,transparent 62%);animation:background-drift-a 26s ease-in-out infinite alternate}
.background-aurora:after{width:50vw;height:50vw;bottom:-12vw;right:-10vw;background:radial-gradient(circle at 60% 55%,#c2bfb966,transparent 62%),radial-gradient(circle at 30% 70%,#8f8d8852,transparent 58%);animation:background-drift-b 32s ease-in-out infinite alternate}
.background-charges{inset:0;width:100%;height:100%;color:var(--muted);opacity:.25;mask-image:linear-gradient(transparent,#000 14% 88%,transparent)}
.background-only .shell,.background-only .skip{visibility:hidden;pointer-events:none}
.background-only .background-mesh{mask-image:none}
.background-paused .background-aurora:before,.background-paused .background-aurora:after{animation-play-state:paused!important}
/* Motion deliberately stays active for reduced-motion and coarse/touch pointers.
   The always-visible pause control is the explicit motion preference for this background. */
@keyframes background-drift-a{from{transform:translate(0) scale(1)}to{transform:translate(7vw,5vh) scale(1.12)}}
@keyframes background-drift-b{from{transform:translate(0) scale(1.08)}to{transform:translate(-6vw,-5vh) scale(1)}}
@media(max-width:800px){.background-aurora:before,.background-aurora:after{width:120vw;height:120vw}}


.background-controls{position:fixed;right:24px;bottom:20px;z-index:5}
.motion-toggle{font:11px/1.5 sans-serif;color:#888;background:#f4f3f1eb;border:1px solid #d9d7d3;border-radius:6px;padding:7px 10px;min-height:36px;cursor:pointer}
.motion-toggle:hover{background:#8888880a;border-color:#888}
.motion-toggle:focus-visible{outline:2px solid #888;outline-offset:3px}
@media(max-width:700px){.background-controls{right:16px;bottom:16px}}

.background-controls{display:flex;align-items:center;gap:8px;max-width:calc(100vw - 32px);font:12px/1.5 sans-serif;color:#777}
.motion-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.tilt-controls summary{cursor:pointer;padding:8px;min-height:36px;white-space:nowrap}
.tilt-controls summary:focus-visible{outline:2px solid #888;outline-offset:3px}
.tilt-options{position:absolute;bottom:calc(100% + 10px);right:0;width:280px;max-width:calc(100vw - 32px);max-height:calc(100svh - 100px);overflow-y:auto;padding:18px;background:#f4f3f1fa;border:1px solid #d9d7d3;border-radius:10px;display:grid;grid-template-columns:1fr 1fr;gap:12px;box-shadow:0 6px 24px #33333314}
.tilt-options p{grid-column:1/-1;margin:0;font-size:12px;line-height:1.6;color:#777}
.tilt-options small{grid-column:1/-1;color:#777;font-size:11px}
.tilt-toggle{grid-column:1/-1;display:flex;align-items:center;gap:8px;min-height:36px;color:#555;font-size:12px;cursor:pointer}
.tilt-toggle input{width:16px;height:16px;margin:0;accent-color:#888}
.tilt-options #recenterTilt{grid-column:1/-1}
.tilt-options [hidden],.background-options [hidden]{display:none}
.motion-toggle:disabled{opacity:.45;cursor:default}
.tilt-enabled .background-aurora{transform:translate3d(var(--tilt-x,0px),var(--tilt-y,0px),0)}
.tilt-enabled .background-mesh{transform:translate3d(var(--tilt-mesh-x,0px),var(--tilt-mesh-y,0px),0) scale(1.06)}