/* Code-Logic motion layer. All effects are opt-in through motion.js. */
:root{--cl-motion-accent:#19d2da;--cl-motion-soft:#91f4f2}
.cl-motion-ready .header{transition:border-color .25s ease,box-shadow .25s ease}
.cl-motion-ready .header.cl-motion-scrolled{border-bottom-color:#19d2da75;box-shadow:0 14px 38px #0005}
.cl-motion-ready .navigation nav a:not(.nav-cta){position:relative}
.cl-motion-ready .navigation nav a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:7px;height:1px;background:var(--cl-motion-accent);transform:scaleX(0);transform-origin:left;transition:transform .23s ease;pointer-events:none}
.cl-motion-ready .navigation nav a:not(.nav-cta):hover::after{transform:scaleX(1)}
.cl-motion-ready .button{position:relative;overflow:hidden;isolation:isolate}
.cl-motion-ready .button::before{content:"";position:absolute;inset:-15% -30%;background:linear-gradient(105deg,transparent 38%,#fff0 43%,#ffffff30 50%,#fff0 57%,transparent 63%);transform:translateX(-100%);transition:transform .7s cubic-bezier(.2,.6,.25,1);pointer-events:none}
.cl-motion-ready .button:hover::before{transform:translateX(100%)}
.cl-motion-ready .button>span[aria-hidden="true"]{transition:translate .2s ease}
.cl-motion-ready .button:hover>span[aria-hidden="true"]{translate:2px -2px}

/* Informational blocks reveal once. Forms, inputs and navigation are excluded. */
.cl-motion-ready .cl-motion-reveal{transition:opacity .65s ease,translate .65s cubic-bezier(.2,.7,.25,1);transition-delay:var(--cl-reveal-delay,0ms)}
.cl-motion-ready .cl-motion-reveal:not(.cl-motion-in){opacity:0;translate:0 22px}
.cl-motion-ready .cl-motion-reveal.cl-motion-in,.cl-motion-ready .cl-motion-reveal:focus-within,.cl-motion-ready .cl-motion-reveal:target{opacity:1;translate:0 0}
.cl-motion-ready .cl-motion-reveal:focus-within{transition:none}
.cl-motion-ready .cl-motion-intro{animation:cl-intro-settle .85s cubic-bezier(.2,.7,.25,1) both;animation-delay:var(--cl-intro-delay,0ms)}
@keyframes cl-intro-settle{from{opacity:.65;translate:0 14px}to{opacity:1;translate:0 0}}

/* A luminous orbital field behind the actual homepage illustration. */
.cl-motion-ready .system-art.cl-motion-scene{position:relative;isolation:isolate}
.cl-motion-ready .system-art.cl-motion-scene>:not(.cl-motion-orbital){position:relative;z-index:1}
.cl-motion-orbital{position:absolute;inset:12% 2% 8%;margin:auto;aspect-ratio:1;max-height:88%;border-radius:50%;border:1px solid #19d2da2a;background:radial-gradient(circle,#19d2da0e 0%,#19d2da03 46%,transparent 70%);pointer-events:none;z-index:0;opacity:.75}
.cl-motion-orbital::before{content:"";position:absolute;inset:14%;border-radius:50%;border:1px solid #19d2da20;box-shadow:0 0 65px #19d2da09,inset 0 0 50px #19d2da09}
.cl-motion-orbital::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid transparent;border-top-color:#5bf1efb3;border-right-color:#19d2da50;box-shadow:0 -9px 28px -18px #64fffa;animation:cl-orbit-turn 32s linear infinite;animation-play-state:paused}
.cl-motion-orbital>i{display:block;position:absolute;inset:7%;border-radius:50%;border:1px dashed #19d2da20;animation:cl-orbit-turn 52s linear infinite reverse;animation-play-state:paused}
.cl-motion-orbital>i::before{content:"";position:absolute;left:18%;top:8%;width:7px;height:7px;border-radius:50%;background:#a3fffb;box-shadow:0 0 13px 3px #19d2da80}
.cl-motion-orbital>i::after{content:"";position:absolute;right:0;bottom:25%;width:4px;height:4px;border-radius:50%;background:#19d2da;box-shadow:0 0 12px #19d2da}
.cl-motion-ready .system-art.cl-motion-scene>img{animation:cl-system-hover 9s ease-in-out infinite;animation-play-state:paused}
@keyframes cl-orbit-turn{to{rotate:360deg}}
@keyframes cl-system-hover{0%,100%{translate:0 0}50%{translate:0 -7px}}

/* The existing media and gaming artwork gains life without invented UI. */
.cl-motion-ready .cl-motion-scene .media-showcase-halo{animation:cl-halo-breathe 9s ease-in-out infinite;animation-play-state:paused}
.cl-motion-ready .cl-motion-scene .media-showcase-halo-two{animation-delay:-4.5s}
.cl-motion-ready .cl-motion-scene .media-showcase-planet{animation:cl-planet-drift 16s ease-in-out infinite;animation-play-state:paused}
.cl-motion-ready .cl-motion-scene .gaming-orbit{animation:cl-orbit-turn 55s linear infinite;animation-play-state:paused}
.cl-motion-ready .cl-motion-scene .gaming-orbit-two{animation-duration:72s;animation-direction:reverse}
.cl-motion-ready .cl-motion-scene .gaming-controller{animation:cl-controller-hover 9s ease-in-out infinite;animation-play-state:paused}
.cl-motion-ready .cl-motion-scene .gaming-hud-status i{animation:cl-status-breathe 4s ease-in-out infinite;animation-play-state:paused}
.cl-motion-ready .cl-motion-scene[data-cl-motion-active] .cl-motion-orbital::after,
.cl-motion-ready .cl-motion-scene[data-cl-motion-active] .cl-motion-orbital>i,
.cl-motion-ready .system-art.cl-motion-scene[data-cl-motion-active]>img,
.cl-motion-ready .cl-motion-scene[data-cl-motion-active] :is(.media-showcase-halo,.media-showcase-planet,.gaming-orbit,.gaming-controller,.gaming-hud-status i){animation-play-state:running}
@keyframes cl-halo-breathe{0%,100%{opacity:.45;scale:.98}50%{opacity:.88;scale:1.035}}
@keyframes cl-planet-drift{0%,100%{translate:0 0}50%{translate:-6px -8px}}
@keyframes cl-controller-hover{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes cl-status-breathe{0%,100%{opacity:.45}50%{opacity:1}}

/* The plus landing page keeps its layout; an ambient ring occupies its background. */
.cl-motion-ready .plus-landing-hero{position:relative;isolation:isolate}
.plus-landing-hero>.cl-motion-orbital{inset:0 0 0 auto;width:min(46%,480px);z-index:-1;opacity:.32}

/* A visible, keyboard accessible control for all decorative continuous motion. */
.cl-motion-toggle{appearance:none;background:transparent;border:1px solid #3e616b;color:#bfd9df;font:11px/1.4 var(--mono,monospace);padding:10px 13px;min-height:40px;cursor:pointer;display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.cl-motion-toggle::before{content:"";display:block;width:6px;height:6px;border-radius:50%;background:#19d2da;box-shadow:0 0 8px #19d2da66}
.cl-motion-toggle:hover{border-color:#19d2da;color:#effcfd;background:#13242c}
.cl-motion-toggle:focus-visible{outline:3px solid #8af4f6;outline-offset:4px}
.cl-motion-toggle[data-cl-motion-paused="true"]::before{background:#a6b4bb;box-shadow:none}
.cl-motion-toggle:disabled{cursor:default;opacity:.75}
.cl-motion-ready.cl-motion-paused .cl-motion-reveal,.cl-motion-ready.cl-motion-reduced .cl-motion-reveal{opacity:1;translate:0 0;transition:none}
.cl-motion-ready.cl-motion-paused .cl-motion-intro,.cl-motion-ready.cl-motion-reduced .cl-motion-intro{animation:none}
.cl-motion-ready.cl-motion-paused .cl-motion-scene *,
.cl-motion-ready.cl-motion-paused .cl-motion-orbital::after,
.cl-motion-ready.cl-motion-reduced .cl-motion-scene *,
.cl-motion-ready.cl-motion-reduced .cl-motion-orbital::after{animation-play-state:paused!important}
.cl-motion-ready.cl-motion-paused .button::before,.cl-motion-ready.cl-motion-reduced .button::before{display:none}
.cl-motion-ready.cl-motion-paused .button>span[aria-hidden="true"],.cl-motion-ready.cl-motion-reduced .button>span[aria-hidden="true"]{translate:none!important;transition:none}
@media(max-width:800px){.cl-motion-ready .navigation nav a:not(.nav-cta)::after{display:none}.cl-motion-orbital{opacity:.55}.plus-landing-hero>.cl-motion-orbital{width:70%;opacity:.2}.cl-motion-toggle{margin-top:7px}}
@media(prefers-reduced-motion:reduce){.cl-motion-ready .cl-motion-reveal{opacity:1!important;translate:none!important;transition:none!important}.cl-motion-ready .cl-motion-intro,.cl-motion-ready .cl-motion-scene *, .cl-motion-ready .cl-motion-orbital::after{animation:none!important}.cl-motion-ready .button::before{display:none}.cl-motion-ready .button>span[aria-hidden="true"]{translate:none!important;transition:none!important}}