/* VISION / cinematic motion layer. All reading content remains independent of ambient effects. */
.vision-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;opacity:.75}
.hero{--pointer-x:0;--pointer-y:0}
.hero-orbit{overflow:visible}
.hero-orbit:before{content:'';position:absolute;width:64vw;height:64vw;right:-15vw;top:2%;border-radius:50%;background:conic-gradient(from 30deg,transparent 0deg,#67e8f955 40deg,transparent 90deg,transparent 180deg,#ae9aff48 230deg,transparent 285deg);mask-image:radial-gradient(closest-side,transparent 79%,#000 79.1%,#000 79.4%,transparent 79.5%,transparent 87%,#000 87.1%,#000 87.2%,transparent 87.3%,transparent 99%,#000 99.1%);animation:orbital-turn 32s linear infinite}
.hero-orbit:after{content:'';position:absolute;width:650px;height:650px;right:1%;top:18%;border-radius:50%;background:radial-gradient(ellipse,#13b2f127,transparent 68%);transform:translate(calc(var(--pointer-x) * 24px),calc(var(--pointer-y) * 18px));animation:aurora-breathe 9s ease-in-out infinite alternate}
.hero-orbit i:nth-child(1){border-color:#67e8f929;animation:orbital-turn 48s linear infinite}
.hero-orbit i:nth-child(2){border-color:#90b7d622;animation:orbital-turn 70s linear infinite reverse}
.hero-orbit span{animation:aurora-drift 13s ease-in-out infinite alternate}
.screen-main{transform:translate3d(calc(var(--pointer-x) * -9px),calc(var(--app-shift,0px) + var(--pointer-y) * -7px),0) rotateX(calc(var(--pointer-y) * -2deg)) rotateY(calc(var(--app-angle,4deg) + var(--pointer-x) * 3deg));transition:transform .45s var(--ease),border-color .3s,box-shadow .3s;box-shadow:0 35px 85px #0009,0 0 80px #14aee90e}
.screen-install{transform:translate3d(calc(var(--pointer-x) * 17px),calc(var(--install-shift,0px) + var(--pointer-y) * 12px),38px) rotateY(calc(var(--pointer-x) * -5deg));transition:transform .6s var(--ease),border-color .3s;box-shadow:0 25px 75px #000b,0 0 30px #ad93ff18}
.screen-glow{animation:aurora-breathe 6s ease-in-out infinite alternate;transform:translate3d(calc(var(--pointer-x) * 25px),calc(var(--pointer-y) * 20px),0)}
.screen-main:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,#c8f7ff0f 46%,#c8f7ff29 50%,transparent 61%);transform:translateX(-140%);animation:screen-intro-sheen 1.65s .8s var(--ease) both}
.screen-main{position:relative}
.release .dot{animation:beacon 3.6s ease-in-out infinite}
.hero-bottom a>span{animation:arrow-flow 2.2s ease-in-out infinite}
@keyframes orbital-turn{to{rotate:360deg}}
@keyframes aurora-breathe{from{opacity:.45;scale:.92}to{opacity:1;scale:1.12}}
@keyframes aurora-drift{from{translate:-80px 0;opacity:.5}to{translate:60px -110px;opacity:1}}
@keyframes screen-intro-sheen{to{transform:translateX(140%)}}
@keyframes beacon{0%,100%{box-shadow:0 0 0 0 #67e8f900,0 0 14px #67e8f96b}50%{box-shadow:0 0 0 6px #67e8f908,0 0 22px #67e8f9a0}}
@keyframes arrow-flow{0%,100%{translate:0 -3px}50%{translate:0 4px}}
/* Section titles unfold word by word, retaining their original accessible name. */
.word-mask{display:inline-block;vertical-align:bottom;overflow:clip;padding-bottom:.13em;margin-bottom:-.13em;perspective:650px;color:inherit}
.word-piece{display:inline-block;color:inherit;transform-origin:50% 100%;transform:translate3d(0,112%,0) rotateX(-55deg);opacity:0;transition:transform 1.05s var(--ease),opacity .75s var(--ease);transition-delay:calc(var(--word-index,0) * 65ms)}
h2 .word-mask,h2 .word-piece{color:inherit}
.cinema-heading.is-onstage .word-piece{transform:translateZ(0) rotateX(0);opacity:1}
.cinema-heading:not(.is-onstage){perspective:900px}
.hero-intro h1.cinema-heading{animation:none}
.hero-intro h1 .word-piece{transition-duration:1.3s;transition-delay:calc(.15s + var(--word-index) * 85ms)}
.hero h1 em{position:relative}
.hero h1 em:after{content:'';display:block;position:absolute;bottom:-8px;left:0;height:1px;width:100%;background:linear-gradient(90deg,var(--cyan),transparent);transform:scaleX(0);transform-origin:left;transition:transform 1.4s 1s var(--ease)}
.hero h1.is-onstage em:after{transform:scaleX(1)}
.reveal-ready .reveal{transform:none;translate:0 45px;opacity:0;transition:opacity .8s var(--ease),translate 1s var(--ease),transform .45s var(--ease),border-color .35s,box-shadow .35s;transition-delay:var(--reveal-delay,0ms),var(--reveal-delay,0ms),0ms,0ms,0ms}
.reveal-ready .reveal.in-view{translate:0 0;opacity:1;transform:var(--surface-transform,none)}
/* Ambient light is local to each section and does not alter sticky geometry. */
.flow-section,.setup-section,.price-section,#faq,.end{position:relative;isolation:isolate}
.section-aura{position:absolute;inset:0;z-index:-1;overflow:clip;pointer-events:none}
.section-aura:before{content:'';position:absolute;width:620px;height:620px;top:8%;left:-350px;background:radial-gradient(circle,#34c8ff13,transparent 67%);translate:0 var(--section-drift,0px);transition:translate .3s linear}
.section-aura:after{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.55;transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease)}
.motion-section.onstage .section-aura:after{transform:scaleX(1)}
.price-section .section-aura:before{left:auto;right:-300px;background:radial-gradient(circle,#ae9aff1c,transparent 65%)}
#faq .section-aura:before{left:-200px;top:20%;opacity:.6}
.strip{position:relative;overflow:clip}.strip:after{content:'';position:absolute;bottom:0;width:22%;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);animation:strip-signal 7s linear infinite}
.strip span{transition:color .3s,translate .3s}.strip span:hover{color:var(--cyan);translate:0 -3px}
@keyframes strip-signal{from{left:-25%}to{left:105%}}
/* A visible signal travels through the processing chain. Icons stay legible before activation. */
.flow-icon svg *{stroke-dashoffset:0;transition:stroke .4s}
.flow-track:after{content:'';position:absolute;inset:-1px 0 auto;height:3px;transform:scaleX(var(--flow));transform-origin:left;background:linear-gradient(90deg,transparent 0 35%,#67e8f900 38%,#dcfbff 50%,#67e8f900 62%,transparent 65%);background-size:250% 100%;animation:data-stream 3.5s linear infinite;opacity:.7}
@keyframes data-stream{from{background-position:130% 0}to{background-position:-130% 0}}
/* Pointer reflections and restrained 3D on comparison cards. */
.plan-card,.flow-card{--light-x:50%;--light-y:50%;--light-opacity:0}
.plan-card{--surface-transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transform:var(--surface-transform);transform-style:preserve-3d;will-change:auto}
.plan-card:hover{transform:var(--surface-transform);box-shadow:0 20px 65px #0006,0 0 36px #67e8f910}
.plan-card:before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(450px circle at var(--light-x) var(--light-y),#67e8f919,transparent 65%);pointer-events:none;opacity:var(--light-opacity);transition:opacity .4s}
.plan-lifetime:before{background:radial-gradient(450px circle at var(--light-x) var(--light-y),#ae9aff25,transparent 65%)}
.plan-card:after{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:radial-gradient(220px circle at var(--light-x) var(--light-y),#c4f8ff,transparent 80%);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;opacity:var(--light-opacity);transition:opacity .3s}
.plan-card>*{position:relative}.plan-top,.plan-price{translate:0 0;transition:translate .4s var(--ease)}.plan-card:hover .plan-symbol{text-shadow:0 0 24px #67e8f944}
.btn{position:relative;isolation:isolate;overflow:hidden;translate:var(--magnet-x,0px) var(--magnet-y,0px);transition:translate .35s var(--ease),transform .3s var(--ease),background .2s,border-color .2s,box-shadow .3s}
.btn:after{content:'';position:absolute;inset:-40% -70%;z-index:-1;background:linear-gradient(110deg,transparent 37%,#ffffff42 49%,transparent 61%);transform:translateX(-50%);transition:transform .7s var(--ease);pointer-events:none}
.btn:hover:after,.btn:focus-visible:after{transform:translateX(50%)}
.btn>span{transition:translate .3s var(--ease)}.btn:hover>span{translate:3px -3px}
.text-link span,.top-link span{transition:translate .35s var(--ease)}.text-link:hover span,.top-link:hover span{translate:4px -3px}
.brand img{transition:filter .5s,transform .6s var(--ease)}.brand:hover img{filter:drop-shadow(0 0 12px #67e8f955);transform:rotate(-7deg) scale(1.08)}
/* Six installation shots: depth, one light pass, then a stable reading frame. */
@media(min-width:851px) and (min-height:651px) and (prefers-reduced-motion:no-preference){
.tour-panel{transform:translateY(32px);transition:opacity .42s var(--ease),transform .62s var(--ease),visibility .42s}
.tour-panel.is-before{transform:translateY(-32px)}.tour-panel.is-active{transform:none}
.tour-visual button{transform:perspective(1400px) rotateY(-8deg) rotateX(2deg) translateZ(-45px) scale(.97);transition:transform .72s var(--ease),border-color .3s,box-shadow .6s;box-shadow:0 35px 80px #0007}
.tour-panel.is-before .tour-visual button{transform:perspective(1400px) rotateY(6deg) translateZ(-40px) scale(.98)}
.tour-panel.is-active .tour-visual button{transform:none;box-shadow:0 30px 80px #0008,0 0 35px #67e8f90d}
.tour-visual button:after{content:'';position:absolute;inset:-15%;pointer-events:none;background:linear-gradient(115deg,transparent 30%,#b9f3ff05 43%,#d6faff27 50%,#b9f3ff05 57%,transparent 70%);transform:translateX(-125%)}
.tour-panel.is-active .tour-visual button:after{animation:tour-light-pass .9s .05s var(--ease) both}
.tour-copy>:not(.tour-ghost){opacity:0;translate:0 16px;transition:opacity .42s var(--ease),translate .55s var(--ease)}
.tour-panel.is-active .tour-copy>:not(.tour-ghost){opacity:1;translate:0 0}
.tour-panel.is-active .tour-kicker{transition-delay:.05s}.tour-panel.is-active .tour-copy h3{transition-delay:.09s}.tour-panel.is-active .tour-copy>p:not(.tour-note){transition-delay:.14s}.tour-panel.is-active .tour-action{transition-delay:.19s}.tour-panel.is-active .tour-note{transition-delay:.24s}
.tour-ghost{opacity:0;transform:translateY(18px) scale(.92);transition:transform .65s var(--ease),opacity .5s}.tour-panel.is-active .tour-ghost{opacity:1;transform:none}
.tour-action{position:relative}.tour-action:before{content:'';position:absolute;left:0;top:-1px;height:1px;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#67e8f9a0,transparent);transition:transform .65s .25s var(--ease)}.tour-panel.is-active .tour-action:before{transform:scaleX(1)}
}
@keyframes tour-light-pass{to{transform:translateX(125%)}}
.tour-step-button.current span{animation:step-lock .5s var(--ease) both}
@keyframes step-lock{from{scale:.8;box-shadow:0 0 0 10px #67e8f900}45%{box-shadow:0 0 0 7px #67e8f91a}to{scale:1;box-shadow:0 0 18px #67e8f91c}}
.tour-atmosphere:before{content:'';position:absolute;width:75%;height:75%;left:0;top:15%;background:radial-gradient(ellipse,#1dbbe719,transparent 70%);opacity:calc(.3 + var(--tour-progress) * .6)}
/* Small interactions continue the same motion language. */
.setup-specs>div{position:relative;overflow:clip}.setup-specs>div:after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--cyan),transparent);transition:transform .75s var(--ease)}.setup-specs>div:hover:after{transform:scaleX(1)}
.setup-specs .spec-index{transition:color .3s,text-shadow .3s}.setup-specs>div:hover .spec-index{color:#fff;text-shadow:0 0 20px #67e8f999}
.faq summary:after{transition:transform .45s var(--ease)}.faq details[open] summary:after{transform:rotate(180deg)}
.faq details[open]>p,.faq details[open]>.btn{animation:answer-enter .5s var(--ease) both}
@keyframes answer-enter{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
dialog[open]{animation:dialog-enter .4s var(--ease) both}dialog[open]::backdrop{animation:backdrop-enter .35s ease both}
@keyframes dialog-enter{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}@keyframes backdrop-enter{from{opacity:0}to{opacity:1}}
.end-orbit{border-color:#67e8f92e}.end-orbit:after{border-style:dashed;animation:orbital-turn 60s linear infinite}
.end-orbit:before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(transparent 65%,#67e8f980 80%,transparent 90%);mask:radial-gradient(closest-side,transparent 99%,#000 99.3%);animation:orbital-turn 14s linear infinite}
.end-scene img{animation:end-scene-drift 12s var(--ease) infinite alternate}
.end-scene:after{animation:end-rain-drift 4.8s linear infinite}
.end-scene-light{animation:end-light-sweep 8s ease-in-out infinite alternate}
.end-scene-particles{animation:end-particles-rise 15s linear infinite}
@keyframes end-scene-drift{from{transform:scale(1.055) translate3d(-1.2%,0,0)}to{transform:scale(1.105) translate3d(1.3%,-.7%,0)}}
@keyframes end-rain-drift{from{transform:translate3d(0,-2.5%,0)}to{transform:translate3d(-1.2%,2.5%,0)}}
@keyframes end-light-sweep{from{opacity:.35;transform:translate3d(-20%,0,0)}to{opacity:.9;transform:translate3d(22%,0,0)}}
@keyframes end-particles-rise{from{background-position:0 0,37px 54px}to{background-position:22px -111px,7px -95px}}
.motion-control{position:fixed;right:18px;bottom:18px;z-index:35;display:flex;align-items:center;gap:7px;border:1px solid #37526b;border-radius:5px;background:#0a1521ed;color:#b0c8dc;padding:8px 11px;font:400 9px var(--data);box-shadow:0 5px 25px #0005;backdrop-filter:blur(10px)}
.motion-control[hidden]{display:none}.motion-control:hover{color:var(--cyan);border-color:var(--cyan)}.motion-control svg{height:16px;width:16px;stroke:currentColor;stroke-width:1.5}.play-symbol{display:none}.motion-off .pause-symbol{display:none}.motion-off .play-symbol{display:block}
/* Suspended CSS loops when their scene or tab is inactive. */
.hero:not(.motion-visible) .hero-orbit:before,.hero:not(.motion-visible) .hero-orbit:after,.hero:not(.motion-visible) .hero-orbit i,.hero:not(.motion-visible) .hero-orbit span,.hero:not(.motion-visible) .screen-glow,.hero:not(.motion-visible) .release .dot,.hero:not(.motion-visible) .hero-bottom a>span,.strip:not(.motion-visible):after,.flow-section:not(.motion-visible) .flow-track:after,.end:not(.motion-visible) .end-orbit:before,.end:not(.motion-visible) .end-orbit:after,.end:not(.motion-visible) .end-scene img,.end:not(.motion-visible) .end-scene:after,.end:not(.motion-visible) .end-scene-light,.end:not(.motion-visible) .end-scene-particles{animation-play-state:paused}
.motion-sleep *,.motion-sleep *:before,.motion-sleep *:after{animation-play-state:paused!important}
@media(hover:none),(pointer:coarse){.plan-card,.flow-card,.feature-card,.game-status{--surface-transform:none!important;transform:none!important}.screen-main,.screen-install{transform:none!important}.motion-control{padding:10px;bottom:12px;right:12px}.motion-control>span{display:none}}
@media(max-width:850px){.hero-orbit:before{width:110vw;height:110vw;top:25%;right:-25vw}.hero-orbit:after{width:500px;height:500px;top:30%;right:-200px}.vision-particles{opacity:.45}.section-aura:before{width:450px;height:450px;left:-280px}.word-piece{transform:translateY(105%);transition-duration:.8s}.tour-panel .tour-copy>:not(.tour-ghost){opacity:1;translate:none}.tour-visual button:after{display:none}}
/* A persistent, explicit pause also switches the long guide into readable panels. */
html.motion-off{scroll-behavior:auto}.motion-off *,.motion-off *:before,.motion-off *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.motion-off .vision-particles{display:none}.motion-off .word-piece{opacity:1;transform:none}.motion-off .reveal{opacity:1;translate:none;transform:none}.motion-off .screen-main,.motion-off .screen-install,.motion-off .plan-card,.motion-off .flow-card,.motion-off .feature-card,.motion-off .game-status{transform:none!important}.motion-off .btn{translate:none!important}.motion-off .hero h1 em:after{transform:scaleX(1)}
.motion-off .installation-story{height:auto;padding:65px 0}.motion-off .tour-pin{position:relative;top:auto;height:auto;display:block;overflow:visible}.motion-off .tour-heading{display:block;margin-bottom:35px}.motion-off .tour-heading h2{font-size:clamp(32px,5vw,48px)}.motion-off .tour-hint{margin-top:20px}.motion-off .tour-nav,.motion-off .tour-hud,.motion-off .tour-bottom{display:none}.motion-off .tour-stage{height:auto;min-height:0;display:flex;flex-direction:column;gap:50px}.motion-off .tour-panel,.motion-off .tour-panel.is-before,.motion-off .tour-panel.is-active{position:relative;inset:auto;opacity:1;visibility:visible;transform:none;display:grid;grid-template-columns:1.3fr 1fr;gap:30px;padding-bottom:45px;border-bottom:1px solid var(--line)}.motion-off .tour-visual button{transform:none!important}.motion-off .tour-visual img{width:100%;height:auto;max-height:none}.motion-off .tour-visual button:after{display:none}.motion-off .tour-copy>:not(.tour-ghost){opacity:1;translate:none}.motion-off .tour-ghost{display:none}.motion-off .flow-icon svg *{stroke-dashoffset:0}.motion-off .section-aura:after{transform:scaleX(1)}
@media(max-width:600px){.motion-off .tour-panel,.motion-off .tour-panel.is-active,.motion-off .tour-panel.is-before{grid-template-columns:1fr;gap:25px}}
@media(prefers-reduced-motion:reduce){.vision-particles{display:none}.word-piece{opacity:1;transform:none}.reveal-ready .reveal{translate:none;transform:none;opacity:1}.hero h1 em:after{transform:scaleX(1)}.screen-main,.screen-install,.plan-card,.flow-card,.feature-card,.game-status{transform:none!important}.btn{translate:none!important}.flow-icon svg *{stroke-dashoffset:0}.tour-copy>:not(.tour-ghost){opacity:1;translate:none}.motion-control{display:none}}
/* Keep the fixed animation control clear of the installation hint. */
@media(min-width:851px) and (min-height:651px){.tour-bottom p{padding-right:115px}}
@media(max-width:600px){.motion-control{width:44px;height:44px;justify-content:center;padding:10px;bottom:12px;right:12px}.motion-control>span{display:none}}