/* VELTON Motion Studio — understated tactile motion, no neon */
:root{--ease-fluid:cubic-bezier(.22,1,.36,1)}
body{overflow-x:clip}
/* Ambient monochrome light, deliberately very subtle */
body:not(.admin-shell)::before{content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 16% 26%,rgba(175,172,160,.17),transparent 35%),radial-gradient(ellipse at 85% 76%,rgba(125,124,117,.12),transparent 38%);animation:ambient-drift 24s ease-in-out infinite alternate;will-change:transform}
@keyframes ambient-drift{from{transform:translate3d(-3%,1%,0) rotate(-5deg)}to{transform:translate3d(4%,-3%,0) rotate(5deg)}}
/* Quiet moving texture on the hero, kept underneath interactions */
.hero{isolation:isolate}.hero-copy::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 24% 65%,rgba(255,255,255,.065),transparent 50%),radial-gradient(ellipse at 95% 12%,rgba(255,255,255,.035),transparent 45%);animation:hero-breathe 13s ease-in-out infinite alternate}
@keyframes hero-breathe{from{opacity:.4;transform:scale(1)}to{opacity:1;transform:scale(1.15)}}
.orbit-one{animation:orbit-breathe 11s ease-in-out infinite alternate}.orbit-two{animation:orbit-breathe 15s ease-in-out infinite alternate-reverse}
@keyframes orbit-breathe{from{opacity:.26;scale:.92}to{opacity:.8;scale:1.08}}
/* Scroll progress ruler */
.motion-progress{position:fixed;top:0;left:0;width:100%;height:2px;z-index:120;pointer-events:none;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#73736e,#f4f2eb);mix-blend-mode:difference}
/* Soft tangible cursor light only on fine pointers */
@media(hover:hover) and (pointer:fine){.motion-cursor{position:fixed;left:0;top:0;width:240px;height:240px;border-radius:50%;pointer-events:none;z-index:45;transform:translate3d(-400px,-400px,0);background:radial-gradient(circle,rgba(203,201,190,.14),transparent 65%);mix-blend-mode:screen;opacity:0;transition:opacity .35s ease}.motion-cursor.is-visible{opacity:1}.product-image-wrap img,.story-image img{transition:transform .95s var(--ease-fluid),filter .6s ease!important}.product-card:hover .product-image-wrap img{transform:scale(1.075) translateY(-5px)}.product-card{transition:transform .55s var(--ease-fluid)}.product-card:hover{transform:translateY(-5px)}}
/* Every button has a satisfying press and an ink-wave */
button,.btn,.filter,.wish-btn,.bag-link,.product-title,.desktop-nav a,.mobile-nav a{position:relative;touch-action:manipulation}
button:active,.btn:active,.filter:active,.size:active,.wish-btn:active{transform:scale(.955)!important;transition-duration:.12s!important}
.motion-ink{position:absolute;pointer-events:none;border-radius:50%;background:rgba(140,140,132,.22);transform:translate(-50%,-50%) scale(0);animation:ink-wave .65s var(--ease-fluid) forwards;z-index:2}
@keyframes ink-wave{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #9d9c92;outline-offset:4px}
/* Selection and feedback */
.filter,.size,.wish-btn,.qty-controls button,.admin-row button{transition:background .32s var(--ease-fluid),color .32s ease,border-color .32s ease,transform .3s var(--ease-fluid),box-shadow .32s ease}
.filter.active,.size.active{box-shadow:0 4px 15px rgba(0,0,0,.12)}
.wish-btn.active{animation:heart-pop .45s var(--ease-fluid)}
@keyframes heart-pop{0%{scale:1}42%{scale:1.3}75%{scale:.92}100%{scale:1}}
.bag-link.bump [data-cart-count]{animation:badge-pop .52s var(--ease-fluid)}
@keyframes badge-pop{0%,100%{transform:scale(1)}45%{transform:scale(1.36)}}
/* Scroll interaction: independent layer avoids overriding reveal's transform */
.motion-scroll-shell{transition:transform .2s linear;transform-origin:center;will-change:transform}
.motion-scroll-shell .product-card{transform-origin:center}
.motion-float{animation:slow-float 8s ease-in-out infinite alternate}@keyframes slow-float{from{translate:0 0}to{translate:0 -8px}}
/* Soft transitions for panels, sections and interactive media */
.product-image-wrap,.story-image,.detail-image{overflow:hidden}
.product-image-wrap{transition:border-radius .75s var(--ease-fluid),box-shadow .6s ease}
@media(hover:hover) and (pointer:fine){.product-card:hover .product-image-wrap{border-radius:16px;box-shadow:0 18px 35px rgba(0,0,0,.07)}}
.reveal{transition:opacity 1s var(--ease-fluid),transform 1.1s var(--ease-fluid)}
.motion-fade-enter{animation:motion-appear .55s var(--ease-fluid) both}@keyframes motion-appear{from{opacity:.3;translate:0 12px}to{opacity:1;translate:0 0}}
.toast{border-radius:12px;box-shadow:0 12px 45px rgba(0,0,0,.16);transition:transform .5s var(--ease-fluid),opacity .35s ease}
/* Subtle background on admin, without compromising readability */
.admin-shell{position:relative;isolation:isolate}.admin-shell::before{content:"";position:fixed;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(ellipse at 85% 0%,rgba(255,255,255,.035),transparent 45%);animation:hero-breathe 20s ease-in-out infinite alternate}.stat,.admin-panel{transition:transform .5s var(--ease-fluid),background .4s ease}@media(hover:hover) and (pointer:fine){.stat:hover{transform:translateY(-4px);background:#292b27}}
@media(max-width:650px){.motion-cursor{display:none}.motion-progress{height:2px}.hero-visual>img{will-change:auto}.motion-scroll-shell{will-change:auto}.toast{bottom:18px;right:18px;left:18px;text-align:center}}
@media(prefers-reduced-motion:reduce){body::before,.hero-copy::before,.orbit,.motion-float,.motion-ink,.admin-shell::before{animation:none!important}.motion-scroll-shell,.motion-cursor{transform:none!important;display:none!important}.motion-progress{display:none}.reveal{opacity:1!important;transform:none!important}}