/* VELTON / Cinematic Product Story — editorial rather than neon */
.cinema{height:245vh;background:#0d0e0d;color:#f4f2ea;position:relative;isolation:isolate}
.cinema-stage{height:100vh;min-height:540px;position:sticky;top:0;overflow:hidden;background:radial-gradient(circle at 63% 54%,#32332f 0%,#161715 39%,#0d0e0d 72%)}
.cinema-stage::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.23;background:repeating-linear-gradient(100deg,transparent 0,transparent 80px,rgba(255,255,255,.035) 81px,transparent 82px);animation:cinema-grain 24s linear infinite alternate}
@keyframes cinema-grain{to{transform:translateX(7%)}}
.cinema-top,.cinema-foot{position:absolute;z-index:5;left:6%;right:6%;display:flex;align-items:center;justify-content:space-between;gap:15px;color:#a5a69f;letter-spacing:1.8px;font-size:10px}
.cinema-top{top:7%}.cinema-foot{bottom:7%}.cinema-percent{font-size:24px;color:#f5f4ed;letter-spacing:-1px}
.cinema-copy{position:absolute;top:25%;left:9%;z-index:4;max-width:430px;transition:opacity .15s linear;pointer-events:auto}
.cinema-copy h2{font:500 clamp(55px,6vw,100px)/1.04 Manrope,sans-serif;letter-spacing:-.08em;margin:25px 0;color:#f4f2ea}
.cinema-copy h2 em{font-style:normal;color:#a3a49c}.cinema-copy p{max-width:310px;color:#b8b9b2;font-size:13px;line-height:1.85;margin-bottom:30px}
.cinema-shoe{position:absolute;width:min(54vw,760px);aspect-ratio:1.5;top:27%;right:1%;z-index:3;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d;will-change:transform;filter:drop-shadow(0 40px 40px rgba(0,0,0,.5))}
.cinema-shoe img{width:100%;height:100%;object-fit:contain;border-radius:25px;mix-blend-mode:luminosity;mask-image:radial-gradient(ellipse at center,#000 35%,transparent 75%)}
.cinema-rings{position:absolute;top:51%;left:72%;width:55vw;aspect-ratio:1;z-index:1;transform:translate(-50%,-50%);pointer-events:none;will-change:transform}
.cinema-rings i{position:absolute;inset:0;border:1px solid rgba(255,255,255,.12);border-radius:50%}.cinema-rings i:nth-child(2){inset:15%}.cinema-rings i:nth-child(3){inset:30%}
/* tactile product imagery */
.product-image-wrap{perspective:1000px;transform-style:preserve-3d}
@media(hover:hover) and (pointer:fine){.product-image-wrap img{transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(1.01);transition:transform .25s ease-out!important}.product-card:hover .product-image-wrap img{transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(1.08) translateY(-4px)}}
.detail-image{--detail-angle:0deg;transform:perspective(900px) rotateY(var(--detail-angle)) rotateX(var(--tilt-x,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1)!important;cursor:ew-resize;touch-action:pan-y}
.detail-image:focus-visible{outline:3px solid #c9c8c1;outline-offset:4px}
@media(max-width:760px){.cinema{height:195vh}.cinema-stage{min-height:600px}.cinema-top,.cinema-foot{font-size:8px;left:6%;right:6%}.cinema-top span:last-child{max-width:150px;text-align:right}.cinema-copy{left:7%;top:16%;max-width:85%}.cinema-copy h2{font-size:clamp(49px,11vw,76px);margin:16px 0}.cinema-copy p{font-size:11px;max-width:245px}.cinema-copy .btn{padding:13px 17px}.cinema-shoe{width:95%;right:-18%;top:48%}.cinema-rings{width:110vw;top:69%;left:65%}.cinema-percent{font-size:18px}}
@media(prefers-reduced-motion:reduce){.cinema{height:auto}.cinema-stage{height:auto;min-height:670px;position:relative}.cinema-stage::before{animation:none}.cinema-shoe{transform:none!important}.cinema-rings{transform:translate(-50%,-50%)!important}.cinema-copy{opacity:1!important}.detail-image{transform:none!important}}

.hero-visual>img{transform:perspective(1100px) rotateY(var(--hero-tilt,0deg)) scale(1.035);transition:transform .15s linear}