/* Spatial motion is progressive: all content and fallback artwork work without it. */
@view-transition { navigation:auto; }
::view-transition-group(root){animation-duration:.7s}
::view-transition-old(root){animation:.55s cubic-bezier(.4,0,.2,1) both page-fold-out;transform-origin:15% 50%}
::view-transition-new(root){animation:.7s cubic-bezier(.22,1,.36,1) both page-fold-in;transform-origin:85% 50%}
@keyframes page-fold-out{to{opacity:0;transform:perspective(1600px) translate3d(-5%,0,-160px) rotateY(9deg);filter:blur(3px)}}
@keyframes page-fold-in{from{opacity:0;transform:perspective(1600px) translate3d(7%,0,-200px) rotateY(-11deg);filter:blur(3px)}to{opacity:1;transform:none;filter:blur(0)}}
.site-header{view-transition-name:site-nav}
::view-transition-old(site-nav),::view-transition-new(site-nav){animation:none}
.scene-3d{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.1s ease}
.scene-3d canvas{width:100%;height:100%;display:block}
.scene-ready .scene-3d{opacity:1}
.hero-art.scene-ready>img,.place-hero-art.scene-ready>img{opacity:0;transition:opacity 1.1s ease}
.hero-art.scene-ready{inset:100px 0 45px 37%}
.hero-art.scene-ready:after{background:linear-gradient(90deg,#040911 0%,transparent 18%);z-index:2;pointer-events:none}
.hero-art.scene-ready .art-orbit{display:none}
.place-hero-art.scene-ready{inset:100px -3% 30px 42%}
.place-art-caption{z-index:2}
.home-hero,.place-hero,.product-hero{perspective:1400px}
.hero-content,.place-hero-copy{transform:translate3d(0,var(--copy-shift,0px),0);will-change:transform}
.product-grid,.feature-grid,.related-grid,.solution-grid,.benefit-grid,.steps-grid{perspective:1400px}
.spatial-card{--tilt-x:0deg;--tilt-y:0deg;--depth:0px;transform:perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(var(--depth));transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s;transform-style:preserve-3d}
.spatial-card:hover{transform:perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(13px);box-shadow:0 24px 55px #0003}
.spatial-card:focus-within{border-color:var(--accent)}
.product-card .product-brand{transform:translateZ(24px)}
.product-card .circle-arrow{transform:translateZ(32px)}
.product-card .product-visual{transform:translateZ(35px)}
.product-card .product-card-copy{transform:translateZ(18px)}
.kinetic-object{rotate:1 0 0 var(--object-x,0deg);translate:0 var(--object-y,0px);transform-style:preserve-3d;will-change:rotate,translate}
.service-art.kinetic-object{perspective:1000px}
.service-art>div{transition:filter .5s}
.browser-sculpture,.system-art,.ticket-art,.education-art,.content-art{animation:service-turn 10s ease-in-out infinite}
@keyframes service-turn{0%,100%{rotate:0 1 0 -9deg;translate:0 5px}50%{rotate:0 1 0 12deg;translate:0 -15px}}
.go-phone-scene{perspective:1200px;transform-style:preserve-3d}
.go-phone{animation:phone-turn 10s ease-in-out infinite;transform-style:preserve-3d;box-shadow:12px 6px 0 #143346,17px 11px 0 #06121d,30px 40px 70px #0007}
@keyframes phone-turn{0%,100%{transform:rotateY(-23deg) rotateX(8deg) rotateZ(6deg) translateY(0)}50%{transform:rotateY(16deg) rotateX(-5deg) rotateZ(-5deg) translateY(-22px)}}
.go-float{animation:float-notification 7s ease-in-out infinite;transform:translateZ(75px)}
@keyframes float-notification{50%{transform:translate3d(-10px,-22px,100px) rotateY(-8deg)}}
.pos-hero-device .mini-pos{animation:terminal-turn 10s ease-in-out infinite}
@keyframes terminal-turn{0%,100%{transform:rotateY(-21deg) rotateX(8deg) translateY(0)}50%{transform:rotateY(13deg) rotateX(-3deg) translateY(-22px)}}
.mini-bars i{transform-origin:bottom;animation:bar-rise 3.4s ease-in-out infinite alternate}
.mini-bars i:nth-child(2n){animation-delay:-1.3s}.mini-bars i:nth-child(3n){animation-delay:-2.4s}
@keyframes bar-rise{from{transform:scaleY(.6)}to{transform:scaleY(1)}}
.connection-art{transform-style:preserve-3d;perspective:1000px}
.connection-core{animation:core-turn 11s ease-in-out infinite}
@keyframes core-turn{50%{transform:rotateY(32deg) rotateX(-15deg) rotateZ(8deg) translateZ(45px)}}
.connection-art .node{animation:node-float 8s ease-in-out infinite}
.connection-art .node:nth-child(2n){animation-delay:-3s}
@keyframes node-float{50%{transform:translate3d(0,-18px,40px)}}
.reveal-ready{transform:perspective(1200px) translate3d(0,45px,-55px) rotateX(9deg);transform-origin:50% 0%;transition:opacity .85s ease,transform 1.05s cubic-bezier(.16,1,.3,1)}
.reveal-ready.revealed{transform:perspective(1200px) translate3d(0,0,0) rotateX(0)}
.spatial-reveal{opacity:0;transform:perspective(1200px) translate3d(0,70px,-100px) rotateX(13deg);transition:opacity .85s,transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:var(--reveal-delay,0ms)}
.spatial-reveal.in-view{opacity:1;transform:perspective(1200px) translateZ(0)}
.spatial-reveal.in-view:hover{transform:perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(13px);transition-delay:0ms}
.demo-window{perspective:1200px}
.place-panel:not([hidden]){animation:panel-open .65s cubic-bezier(.2,.7,.2,1);transform-origin:0 50%}
@keyframes panel-open{from{opacity:0;transform:perspective(1000px) rotateY(-12deg) translateX(18px)}to{opacity:1;transform:none}}
html.motion-paused .kinetic-object,html.motion-paused .spatial-card,html.motion-paused .spatial-reveal,html.motion-paused .reveal-ready,html.motion-paused .hero-content,html.motion-paused .place-hero-copy{transform:none!important;rotate:none!important;translate:none!important;opacity:1;will-change:auto}
html.motion-paused *,html.motion-paused *:before,html.motion-paused *:after{animation-play-state:paused!important;transition:none!important}
html.motion-paused::view-transition-old(root),html.motion-paused::view-transition-new(root){animation:none}
@media(max-width:680px){
 .hero-art.scene-ready{inset:405px -22% 30px -12%}
 .place-hero-art.scene-ready{inset:490px -9% 8px -9%}
 .scene-3d{mask-image:linear-gradient(transparent,black 10%,black 90%,transparent)}
 .spatial-card:hover{box-shadow:none}
 .spatial-reveal{transform:perspective(1000px) translate3d(0,35px,-35px) rotateX(6deg)}
 .reveal-ready{transform:perspective(1000px) translate3d(0,25px,-25px) rotateX(4deg)}
}
@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 ::view-transition-old(root),::view-transition-new(root){animation:none}
 *,*:before,*:after{animation:none!important;transition:none!important}
 .kinetic-object,.spatial-card,.spatial-reveal,.reveal-ready,.hero-content,.place-hero-copy{transform:none!important;rotate:none!important;translate:none!important;opacity:1;will-change:auto}
}