/* Transform-only accents keep the page responsive while it moves. */
.button,.button span,.product-art,.product-title>span,.contact-links strong span,.text-link{transition:transform .3s ease,background-color .3s ease,color .3s ease}
.button:hover span,.contact-links a:hover strong span{transform:translate(3px,-3px)}
.product:hover .product-title>span{transform:translate(3px,-3px);color:var(--pink)}
.product-art>div{transition:scale .45s cubic-bezier(.2,.7,.3,1)}
.product:hover .product-art>div{scale:1.045}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease var(--reveal-delay,0ms),transform .7s cubic-bezier(.2,.7,.3,1) var(--reveal-delay,0ms)}
.reveal.revealed{opacity:1;transform:translateY(0)}
.hero-copy>*{animation:copy-in .75s ease both}.hero-copy>:nth-child(2){animation-delay:.1s}.hero-copy>:nth-child(3){animation-delay:.2s}.hero-copy>:nth-child(4){animation-delay:.3s}.hero-copy>:nth-child(5){animation-delay:.4s}
.sign-board{animation:sign-float 7s ease-in-out infinite}.sticker{animation:sticker-float 6s ease-in-out infinite}.sample-tag{animation:tag-float 8s ease-in-out infinite}.pixel{animation:pixel-drift 5s ease-in-out infinite}.p2{animation-delay:-2s}.p3{animation-delay:-3.5s}
.motion-toggle{position:absolute;right:20px;bottom:52px;z-index:2;border:1px solid #79668d55;border-radius:20px;background:#faf8ffed;color:#4b3c64;padding:8px 12px;font-size:9px;letter-spacing:.3px;cursor:pointer}
.motion-toggle:hover{background:white}.hero-art:has(.motion-toggle:hover) .sign-board,.hero-art:has(.motion-toggle:hover) .sticker{animation-play-state:paused}
@keyframes copy-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes sign-float{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-12px) rotate(-6deg)}}
@keyframes sticker-float{0%,100%{transform:translateY(0) rotate(12deg)}50%{transform:translateY(-15px) rotate(6deg)}}
@keyframes tag-float{0%,100%{transform:translateY(0) rotate(7deg)}50%{transform:translateY(6px) rotate(10deg)}}
@keyframes pixel-drift{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(-10px);opacity:.65}}
.motion-paused .hero-art *{animation-play-state:paused!important}.motion-paused .reveal{opacity:1;transform:none;transition:none}.motion-paused .hero-copy>*{animation:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.product:hover .product-art>div{scale:1}}