/* Kinetic hardware: motion supports the product; all content works without it. */
.hero{--pointer-x:0;--pointer-y:0;perspective:1400px}
.hero::before{content:"";position:absolute;z-index:-1;inset:6% -5% -15% 40%;pointer-events:none;opacity:.2;background:linear-gradient(#648fd326 1px,transparent 1px),linear-gradient(90deg,#648fd326 1px,transparent 1px);background-size:76px 76px;mask-image:radial-gradient(ellipse at 65% 60%,#000,transparent 68%);transform:perspective(600px) rotateX(48deg) rotateZ(-12deg)}
.hero::after{content:"";position:absolute;inset:12% -12% 0 30%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 60% 50%,#2569d729,transparent 62%);opacity:.7}
.hero-image{transform:translate3d(calc(var(--pointer-x)*12px),calc(var(--pointer-y)*8px),0);transition:transform .8s cubic-bezier(.2,.65,.2,1)}
.hero-image::before{content:"";position:absolute;z-index:1;inset:16% 9% 18% 27%;pointer-events:none;background:linear-gradient(110deg,transparent 38%,#a8d5ff16 47%,#e4f6ff38 50%,#8fbaff12 53%,transparent 62%);opacity:0;mix-blend-mode:screen;transform:translateX(-24%);mask-image:radial-gradient(ellipse,#000,transparent 70%)}
.hero h1>span{color:#9fbfff}
@supports (-webkit-background-clip:text){
 .hero h1>span{background:linear-gradient(105deg,#749fdf 12%,#d8eaff 36%,#fff 45%,#739acb 54%,#8cb6f5 72%);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
}
.product-datum{position:absolute;right:18%;top:22%;z-index:2;display:flex;flex-direction:column;gap:7px;color:#b2c7e4;font:12px/1.5 monospace;letter-spacing:.12em;pointer-events:none}
.product-datum span+span{color:#879cba;letter-spacing:.08em}
.product-datum i{display:block;width:110px;height:34px;border-top:1px solid #8db6f27a;border-right:1px solid #8db6f27a;transform:skewX(25deg);transform-origin:top left;margin-top:5px}
.product-datum i::after{content:"";position:absolute;right:-3px;bottom:-3px;width:5px;height:5px;background:#bbdcff;box-shadow:0 0 14px #6abaff}
.kinetic-ready .hero.scene-visible .hero-image img{animation:steel-suspend 9s ease-in-out infinite}
.kinetic-ready .hero.scene-visible .hero-image::before{animation:steel-light 8s ease-in-out infinite}
.kinetic-ready .hero.scene-visible h1>span{animation:steel-type 10s ease-in-out infinite}
.kinetic-ready .hero.scene-visible::after{animation:studio-light 8s ease-in-out infinite}
.kinetic-ready .hero.scene-visible .hero-bottom a span{animation:scroll-cue 2.5s ease-in-out infinite}
.kinetic-ready .hero-copy{animation:copy-arrive 1s cubic-bezier(.16,1,.3,1) both}
.hero-bottom{align-items:center}
#motion-toggle{min-height:44px;font-size:.8125rem;white-space:nowrap}
.product-card figure{position:relative;transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .7s cubic-bezier(.16,1,.3,1),box-shadow .7s;box-shadow:0 20px 65px #0003}
.product-card figure::after{content:"";position:absolute;inset:0;pointer-events:none;border:1px solid #d5e6ff29;background:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,35%),#f2f8ff30,transparent 58%);opacity:0;transition:opacity .5s}
.product-card:hover figure::after{opacity:1}
.product-copy{position:relative}
.product-copy::before{content:"";position:absolute;top:-28px;left:0;width:42px;height:2px;background:#8db8ff;transform-origin:left;transform:scaleX(.45);transition:transform 1s cubic-bezier(.16,1,.3,1)}
.product-card.in-view .product-copy::before{transform:scaleX(1)}
.detail-photo{position:relative}
/* No scan-line overlay: keep the material photograph unobstructed. */
.detail-visual img{transform-origin:calc(45% + var(--detail-progress,0)*15%) 48%}
.detail-coordinate{position:relative;padding-top:22px}
.detail-coordinate::before{content:"";position:absolute;top:-1px;left:0;width:100%;height:2px;background:#85b8ff;transform:scaleX(var(--detail-progress,0));transform-origin:left}
.detail-step{position:relative;padding-left:24px;border-left:1px solid #273446;transition:border-color .5s}
.detail-step::before{content:"";position:absolute;left:-2px;top:12px;width:3px;height:38px;background:#91bfff;opacity:0;transform:scaleY(.25);transform-origin:top;transition:opacity .5s,transform .7s}
.detail-step.is-active{border-left-color:#648bc2}
.detail-step.is-active::before{opacity:1;transform:scaleY(1)}
.detail-step .eyebrow{transition:color .5s}
.detail-step.is-active .eyebrow{color:#c7e0ff}
.detail-step h3{transition:color .5s}
.kinetic-ready .detail-step:not(.is-active) h3{color:#a7b1bf}
.steps li{position:relative}
.steps li::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:linear-gradient(90deg,#98c4ff,#3c6fb3);transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.steps li.in-view::before{transform:scaleX(1)}
.button span{transition:transform .3s}
.button:hover span{transform:translate(3px,-2px)}
.header nav>a:not(.button){position:relative}
.header nav>a:not(.button)::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:#94beff;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.header nav>a:not(.button):hover::after,.header nav>a:focus-visible::after{transform:scaleX(1)}
.motion-ready .product-card.reveal:not(.in-view){opacity:.8;transform:translateY(34px)}
@keyframes steel-suspend{
 0%,100%{transform:translate3d(0,var(--hero-shift,0px),0) rotate(-.6deg) scale(var(--hero-scale,1))}
 50%{transform:translate3d(-5px,calc(var(--hero-shift,0px) - 17px),0) rotate(.6deg) scale(var(--hero-scale,1))}
}
@keyframes steel-light{0%,15%{opacity:0;transform:translateX(-30%)}35%{opacity:.8}65%,100%{opacity:0;transform:translateX(28%)}}
@keyframes steel-type{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes studio-light{0%,100%{opacity:.5;transform:scale(.95)}50%{opacity:1;transform:scale(1.04)}}
@keyframes scroll-cue{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes copy-arrive{from{opacity:.3;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.page-hidden *,.page-hidden *::before,.page-hidden *::after{animation-play-state:paused!important}
.motion-off *,.motion-off *::before,.motion-off *::after{animation:none!important;transition:none!important}
.motion-off .hero-image,.motion-off .product-card figure{transform:none!important}
.motion-off .hero-image::before{display:none}
.motion-off .detail-step h3{color:inherit!important}
@media(max-width:1100px){.product-datum{right:14%;top:17%}}
@media(max-width:720px){
 .hero::before,.product-datum{display:none}
 .hero::after{inset:45% -10% 0 10%;opacity:.5}
 .hero-image{transform:none!important}
 .hero-image::before{inset:12% 8% 10% 37%}
 .kinetic-ready .hero.scene-visible .hero-image img{animation:steel-suspend-mobile 9s ease-in-out infinite}
 .kinetic-ready .hero.scene-visible .hero-image::before{animation:none;opacity:0}
 .product-card figure{transform:none!important}
 .product-card figure::after{display:none}
 .detail-step{padding-left:18px}
 .kinetic-ready .detail-step:not(.is-active) h3{color:inherit}
 .motion-ready .product-card.reveal:not(.in-view){opacity:.9;transform:translateY(14px)}
 .hero-bottom{justify-content:space-between}
}
@keyframes steel-suspend-mobile{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .hero-image,.product-card figure{transform:none!important}
 .hero-image::before{display:none}
 .detail-step h3{color:inherit!important}
}