/* GLWS effects layer. Animation is gated on html.fx-on (set early by an inline script from the visitor's motion preference). */

/* ---- page transitions (cross-document View Transitions; ignored where unsupported) ---- */
@view-transition{navigation:auto}
.site-header{view-transition-name:site-header}
::view-transition-old(root){animation:vt-out .16s ease both}
::view-transition-new(root){animation:vt-in .26s ease both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}
html:not(.fx-on)::view-transition-group(*),html:not(.fx-on)::view-transition-old(*),html:not(.fx-on)::view-transition-new(*){animation:none!important}

/* ---- cursor glow on cards (pointer light, not motion) ---- */
@media (hover:hover) and (pointer:fine){
 .card,.guide-card,.plan-card,.app-card,.location-card{position:relative}
 .card::after,.guide-card::after,.plan-card::after,.app-card::after,.location-card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(360px circle at var(--gx,50%) var(--gy,50%),rgba(155,250,99,.10),transparent 62%)}
 .is-glow::after{opacity:1}
 .is-glow{border-color:rgba(155,250,99,.22)}
}

/* ---- command palette trigger + dialog ---- */
.cmdk-trigger{display:inline-flex;align-items:center;gap:8px;margin-right:8px;padding:2px 9px;border:1px solid var(--line);border-radius:5px;background:transparent;color:var(--muted);font:inherit;font-size:11px;cursor:pointer;transition:border-color .15s,color .15s}
.cmdk-trigger:hover,.cmdk-trigger:focus-visible{border-color:var(--green);color:var(--ink)}
.cmdk-trigger kbd{font:10px var(--mono);color:var(--green);border:1px solid #2f4a2c;border-radius:3px;padding:0 5px}
.cmdk-lock{overflow:hidden}
.cmdk{position:fixed;inset:0;z-index:600;display:none;align-items:flex-start;justify-content:center;padding:12vh 16px 0;background:rgba(5,8,6,.74);backdrop-filter:blur(6px)}
.cmdk.open{display:flex}
.cmdk-box{width:min(660px,100%);background:linear-gradient(180deg,#151c16,#0e140f);border:1px solid rgba(155,250,99,.10);border-radius:10px;box-shadow:0 30px 80px #000a,0 0 0 1px #9bfa6312;overflow:hidden}
.fx-on .cmdk.open .cmdk-box{animation:cmdk-in .18s ease both}
@keyframes cmdk-in{from{opacity:0;transform:translateY(-10px) scale(.985)}}
.cmdk-input-row{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.cmdk-prompt{font:600 16px var(--mono);color:var(--green)}
.cmdk-input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ink);font:15px var(--mono)}
.cmdk-input::placeholder{color:#6d796b}
.cmdk-close{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:4px;font:10px var(--mono);padding:2px 7px;cursor:pointer}
.cmdk-list{list-style:none;margin:0;padding:6px;max-height:min(52vh,460px);overflow-y:auto}
.cmdk-list li[role=option]{display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:12px;padding:10px 12px;border-radius:6px;cursor:pointer;border-left:2px solid transparent}
.cmdk-list li.is-active{background:#152013;border-left-color:var(--green)}
.cmdk-kind{font:10px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--green);opacity:.85}
.cmdk-text{min-width:0}
.cmdk-text strong{display:block;font:600 13px/1.4 var(--mono);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-text small{display:block;margin-top:2px;font-size:12px;line-height:1.45;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-go{color:#6d796b;font-size:13px;opacity:0}
.cmdk-list li.is-active .cmdk-go{opacity:1}
.cmdk-empty{padding:22px 14px;color:var(--muted);font-size:13px}
.cmdk-foot{display:flex;gap:18px;padding:10px 16px;border-top:1px solid var(--line);font:10px var(--mono);color:#6d796b}
@media(max-width:640px){.cmdk{padding-top:8vh}.cmdk-list li[role=option]{grid-template-columns:1fr auto}.cmdk-kind{display:none}.cmdk-trigger kbd{display:none}.cmdk-foot span:nth-child(-n+2){display:none}}

/* ---- motion toggle ---- */
.fx-toggle{background:none;border:0;padding:0;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fx-toggle:hover,.fx-toggle:focus-visible{color:var(--green)}

/* ---- particles ---- */
.cta-strip{position:relative;overflow:hidden}
.cta-strip>.container{position:relative}
.cta-motes,.rack-motes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fx-burst{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:700}

/* ---- boot sequence ---- */
.boot{display:none}
.booting .boot{display:flex;position:fixed;inset:0;z-index:650;align-items:center;justify-content:center;background:#070a08;color:#9bfa63;font:13px/1.8 var(--mono);transition:opacity .5s ease;animation:boot-fail .3s 6s forwards}
.boot.out{opacity:0;pointer-events:none}
.boot-inner{width:min(560px,calc(100% - 40px))}
.boot-log{margin:0;min-height:11em;white-space:pre-wrap;font:inherit;color:#c5cec3}
.boot-log .ok{color:#9bfa63}
.boot-log::after{content:'_';color:#9bfa63;animation:boot-blink 1s steps(1) infinite}
.boot-hint{margin:18px 0 0;font-size:11px;color:#5f6c5d}
@keyframes boot-blink{50%{opacity:0}}
@keyframes boot-fail{to{opacity:0;visibility:hidden}}

/* ---- world map arcs ---- */
.map-arcs path{fill:none;stroke-linecap:round}
.map-arcs .arc-base{stroke:#9bfa63;stroke-opacity:.26;stroke-width:1.1}
.map-arcs .arc-pulse{stroke:#c9ffb0;stroke-width:2.4;stroke-dasharray:9 200;stroke-dashoffset:9;opacity:0}
.fx-on .map-arcs .arc-pulse{opacity:.95;animation:arc-flow 4.6s linear infinite;animation-delay:var(--d,0s)}
@keyframes arc-flow{from{stroke-dashoffset:9}to{stroke-dashoffset:-100}}
.fx-on .map-arcs{filter:drop-shadow(0 0 3px rgba(155,250,99,.7))}
.fx-on .world-map a>circle:first-of-type{animation:pin-pulse 3.4s ease-in-out infinite}
.fx-on .world-map a:nth-child(3n)>circle:first-of-type{animation-delay:-1.1s}
.fx-on .world-map a:nth-child(3n+1)>circle:first-of-type{animation-delay:-2.2s}
@keyframes pin-pulse{0%,100%{fill-opacity:.12}50%{fill-opacity:.34}}

/* ---- rack scene ---- */
.rack-scene{position:relative;border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 72% 50%,#9bfa6309,transparent 62%)}
.rack-sticky{position:relative;padding-block:86px}
.rack-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:center}
.rack-copy>p:not(.eyebrow):not(.rack-readout){color:var(--muted);max-width:460px}
.rack-copy h2{margin-bottom:18px}
.rack-readout{margin:22px 0 26px;font:12px/1.7 var(--mono);color:var(--green);min-height:1.7em}
.rack-3d{display:flex;justify-content:center;perspective:1200px}
.rack-frame{position:relative;list-style:none;margin:0;padding:20px 26px;width:min(470px,100%);display:flex;flex-direction:column-reverse;gap:8px;border:1px solid rgba(155,250,99,.10);border-radius:8px;background:linear-gradient(#141b15,#0c110d);box-shadow:-28px 28px 60px #0008,inset 0 0 0 1px #9bfa6310;transform-style:preserve-3d;transform:rotateX(5deg) rotateY(-16deg)}
.rack-frame::before,.rack-frame::after{content:'';position:absolute;top:12px;bottom:12px;width:5px;background:repeating-linear-gradient(#2f4a2c 0 2px,transparent 2px 14px)}
.rack-frame::before{left:9px}
.rack-frame::after{right:9px}
.rack-blade{transform-style:preserve-3d}
.rack-blade a{display:grid;grid-template-columns:10px 1fr auto;grid-template-areas:'led name price' 'led spec price';gap:1px 14px;align-items:center;padding:10px 14px;background:#131b14;border:1px solid rgba(155,250,99,.08);border-radius:4px;color:var(--ink);text-decoration:none;transition:border-color .15s,background .15s}
.rack-blade a:hover,.rack-blade a:focus-visible{border-color:var(--green);background:#152013}
.rb-led{grid-area:led;width:8px;height:8px;border-radius:50%;background:#9bfa63;box-shadow:0 0 10px #9bfa63}
.rb-name{grid-area:name;font:600 13px var(--mono)}
.rb-spec{grid-area:spec;font:11px var(--mono);color:var(--muted)}
.rb-price{grid-area:price;font:600 15px var(--mono);color:var(--green)}
.rb-price small{margin-left:2px;font-size:10px;color:var(--muted)}
.fx-on .rack-scene{height:330vh}
.fx-on .rack-sticky{position:sticky;top:78px;height:calc(100vh - 78px);padding-block:0;display:flex;align-items:center;overflow:hidden}
.fx-on .rack-sticky>.rack-grid{width:min(1240px,calc(100% - 48px));margin-inline:auto}
.fx-on .rack-frame{transform:rotateX(5deg) rotateY(calc(-20deg + var(--rp,0)*16deg))}
.fx-on .rack-scene.is-armed .rack-blade{opacity:0;transform:translate3d(90px,0,-160px) rotateY(-30deg);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.fx-on .rack-scene.is-armed .rack-blade.on{opacity:1;transform:none}
.fx-on .rack-blade.on .rb-led{animation:rb-led 2.6s ease-in-out infinite;animation-delay:calc(var(--i)*-.37s)}
@keyframes rb-led{0%,100%{opacity:1}50%{opacity:.35}}
@media(max-width:900px){
 .rack-grid{grid-template-columns:1fr;gap:26px}
 .rack-sticky{padding-block:64px}
 .fx-on .rack-scene{height:260vh}
 .fx-on .rack-sticky>.rack-grid{width:calc(100% - 40px)}
 .fx-on .rack-copy>p:not(.eyebrow):not(.rack-readout),.fx-on .rack-copy .button{display:none}
 .fx-on .rack-readout{margin:12px 0 0}
 .fx-on .rack-copy h2{font-size:clamp(26px,7vw,34px)}
 .fx-on .rb-spec{display:none}
 .rack-frame{padding:14px 22px;gap:6px}
 .rack-blade a{padding:8px 12px}
}

/* layout fix: the rotated rack must never widen the page */
.rack-scene{overflow-x:clip}
@media(max-width:900px){.rack-frame{width:calc(100% - 12px)}}

/* "In this guide" sidebar: current section is highlighted as you read */
.article-toc{max-height:calc(100vh - 56px);overflow-y:auto}
.article-toc li{padding-left:10px;border-left:2px solid transparent;transition:border-color .2s}
.article-toc li.is-active{border-left-color:var(--green)}
.article-toc a{transition:color .2s}
.article-toc a.is-active{color:var(--green)}