:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-smooth:cubic-bezier(.22,.61,.36,1)}
.scroll-progress{position:fixed;inset:0 0 auto;height:3px;background:var(--acid);z-index:20;pointer-events:none;transform:scaleX(var(--page-progress,0));transform-origin:left;box-shadow:0 0 15px #c5f83b88}
.hero:after{content:'';position:absolute;width:70vw;height:70vw;right:-24vw;top:-22vw;border-radius:50%;pointer-events:none;opacity:.1;background:repeating-radial-gradient(circle,transparent 0 32px,#516520 33px 34px,transparent 35px 65px);animation:orbit-breathe 16s ease-in-out infinite;z-index:0}
.hero-top,.wordmark,.hero-lower{z-index:1;position:relative}
.hero:before{inset:-10px;animation:grain-drift 1s steps(3) infinite;opacity:.13;z-index:2}
.wordmark .three{animation:lucid-drift 7s ease-in-out infinite}
.blink-star,.tiny-cross{display:inline-block;animation:spin 22s linear infinite}
.floating-tag{animation:tag-float 5s ease-in-out infinite;z-index:3}
.about-symbol{animation:spin 65s linear infinite;transform-origin:center}
.ticker b{display:inline-block;animation:spin 18s linear infinite}
.nav nav a{position:relative;transition:color .25s}
.nav nav a:after{content:'';position:absolute;bottom:4px;left:0;width:100%;height:1px;background:var(--acid);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease-out)}
.nav nav a:hover:after,.nav nav a:focus-visible:after{transform:scaleX(1);transform-origin:left}
.nav nav a:hover{color:var(--acid)}
.brand-mark{transition:transform .7s var(--ease-out)}
.brand:hover .brand-mark{transform:rotate(180deg)}
.pill{transition:translate .5s var(--ease-out),box-shadow .4s,background .3s;translate:var(--magnet-x,0px) var(--magnet-y,0px)}
.pill:hover{box-shadow:0 8px 0 #17191425,0 14px 30px #17191420}
.pill span{display:inline-block;transition:transform .4s var(--ease-out)}
.pill:hover span{transform:translate(3px,3px)}
.filter{transition:background .3s,color .3s,border-color .3s,translate .4s var(--ease-out)}
.filter:hover{border-color:var(--acid);translate:0 -2px}
.filter:active{translate:0 0}
.art-card{perspective:1000px}
.hero-art,.art-image{transform:perspective(1200px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .65s var(--ease-out),box-shadow .65s var(--ease-out)}
.hero-art.is-hovered,.art-image.is-hovered{box-shadow:0 18px 45px #0003}
.hero-art:focus-visible,.art-image:focus-visible{transform:none}
.art-image img{transition:transform 1.2s var(--ease-out)}
.art-image:hover img{transform:scale(1.055)}
.hero-art img{transition:transform 1.5s var(--ease-out)}
.hero-art:hover img{transform:scale(1.045)}
.art-image:before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,50%),#c5f83b19,transparent 45%);transition:opacity .5s}
.art-image:hover:before{opacity:1}
.art-cursor{position:absolute;left:var(--pointer-x,50%);top:var(--pointer-y,50%);display:grid;place-items:center;width:72px;height:72px;border-radius:50%;border:1px solid #c5f83baa;background:#171914bc;color:var(--acid);font:9px var(--mono);letter-spacing:.5px;z-index:4;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.65) rotate(-15deg);transition:opacity .25s,transform .45s var(--ease-out);backdrop-filter:blur(6px)}
.is-hovered .art-cursor{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
.motion-ready [data-reveal]{opacity:0;transform:translateY(35px);transition:opacity .85s var(--ease-out),transform 1.1s var(--ease-out);transition-delay:var(--reveal-delay,0ms)}
.motion-ready [data-reveal].is-visible{opacity:1;transform:translateY(0)}
.motion-intro .hero-top{animation:arrive .8s var(--ease-out) both}
.motion-intro .wordmark{animation:wordmark-arrive 1.4s var(--ease-out) .08s both}
.motion-intro .hero-copy>*{animation:arrive 1s var(--ease-out) both}
.motion-intro .hero-copy>:nth-child(1){animation-delay:.15s}
.motion-intro .hero-copy>:nth-child(2){animation-delay:.25s}
.motion-intro .hero-copy>:nth-child(3){animation-delay:.35s}
.motion-intro .hero-copy>:nth-child(4){animation-delay:.45s}
.motion-intro .hero-copy>:nth-child(5){animation-delay:.55s}
.motion-intro .hero-art{animation:art-arrive 1.4s var(--ease-out) .3s backwards}
.lightbox[open]{animation:lightbox-arrive .5s var(--ease-out) both}
.lightbox[open]::backdrop{animation:backdrop-arrive .45s ease both}
.lightbox-arrow,.lightbox-bar button{transition:background .25s,color .25s,transform .4s var(--ease-out)}
.lightbox-arrow:hover{background:var(--acid);color:var(--ink);transform:scale(1.08)}
.lightbox-bar button:hover{color:var(--acid)}
@keyframes arrive{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes wordmark-arrive{from{opacity:0;transform:translateY(45px) skewY(3deg);filter:blur(8px)}to{opacity:1;transform:translateY(0) skewY(0);filter:blur(0)}}
@keyframes art-arrive{from{opacity:0;clip-path:inset(12% 0 0 0);translate:0 25px}to{opacity:1;clip-path:inset(0);translate:0 0}}
@keyframes orbit-breathe{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(15deg) scale(1.12)}}
@keyframes lucid-drift{0%,100%{transform:rotate(-9deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-.02em)}}
@keyframes tag-float{0%,100%{transform:translateY(0) rotate(5deg)}50%{transform:translateY(-7px) rotate(2deg)}}
@keyframes grain-drift{0%,100%{translate:0 0}25%{translate:3px -2px}50%{translate:-3px 3px}75%{translate:2px 2px}}
@keyframes lightbox-arrive{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes backdrop-arrive{from{opacity:0}to{opacity:1}}
@media(hover:hover) and (pointer:fine){.hero-art.is-hovered,.art-image.is-hovered{cursor:none}}
@media(hover:none),(pointer:coarse){.art-cursor{display:none}.hero-art,.art-image{transform:none}.hero:before{animation:none}}
/* Keep content visible and disable both CSS and scripted motion when requested. */
.no-motion *, .no-motion *:before,.no-motion *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.no-motion [data-reveal]{opacity:1!important;transform:none!important}
.no-motion .hero-art,.no-motion .art-image{transform:none!important;cursor:pointer!important}
.no-motion .pill{translate:none!important}.no-motion .art-cursor{display:none!important}
html:has(.no-motion){scroll-behavior:auto}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.motion-ready [data-reveal]{opacity:1!important;transform:none!important}.hero-art,.art-image{transform:none!important;cursor:pointer!important}.pill{translate:none!important}.art-cursor{display:none!important}}
