/* ProLayer "future" theme: the whole store goes dark, glassy and neon.
   Loads after store.css + fx.css and mostly re-points their colour tokens. */

:root{
  --plate:#05070B;--plate-2:#0D121B;--card:rgba(14,20,30,.72);--ink:#EEF3F8;--body:#B6C0CC;--muted:#7F8A97;--rule:rgba(110,200,255,.14);
  --blue:#3A86FF;--glass:rgba(255,255,255,.035);--line:rgba(63,227,230,.22);--neon:0 0 0 1px rgba(63,227,230,.35),0 0 30px -6px rgba(63,227,230,.55);
}
html{background:var(--plate);color-scheme:dark}
body{background:
  radial-gradient(1200px 600px at 85% -10%,rgba(42,140,255,.12),transparent 60%),
  radial-gradient(900px 500px at -10% 40%,rgba(63,227,230,.06),transparent 60%),
  linear-gradient(rgba(110,200,255,.035) 1px,transparent 1px) 0 0/48px 48px,
  linear-gradient(90deg,rgba(110,200,255,.035) 1px,transparent 1px) 0 0/48px 48px,
  var(--plate);background-attachment:fixed;color:var(--body)}
::selection{background:var(--cyan);color:var(--night)}

/* sections */
.sec:not(.dark){background:transparent}
.dark{background:linear-gradient(180deg,rgba(12,16,24,.85),rgba(6,8,12,.9)),repeating-linear-gradient(to top,rgba(238,241,244,.03) 0 1px,transparent 1px 4px)}
h2{background:linear-gradient(180deg,#fff 30%,#9fb4c8);-webkit-background-clip:text;background-clip:text;color:transparent}
h2 span{-webkit-text-fill-color:var(--muted)}
.label{font-size:11px}
.label::before{content:"//";color:var(--cyan);margin-right:-4px}
.hero .label::before{content:none}

/* glass surfaces */
.card,.how li,.pay-card:not(.pay-whish),.co-side,.cart,.modal{background:linear-gradient(160deg,rgba(22,30,44,.78),rgba(10,14,22,.82));border:1px solid var(--rule);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.modal{color:var(--body);box-shadow:0 0 0 1px rgba(63,227,230,.12),0 40px 120px -20px rgba(0,0,0,.8)}
.cart{border-width:0 0 0 1px}
.chips{background:rgba(5,7,11,.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.chip{background:var(--glass)}
.chip[aria-pressed="true"]{background:linear-gradient(135deg,var(--cyan),var(--azure));border-color:transparent;color:var(--night);box-shadow:0 0 24px -6px rgba(63,227,230,.7)}
.chip[aria-pressed="true"] i{color:rgba(6,8,12,.6)}
.cat[aria-pressed="true"] .cat-ph{outline-color:var(--cyan)}
.cat[aria-pressed="true"] .cat-tx b{color:var(--cyan)}
.pr-ask,.pay-card a{color:var(--cyan)}
.pr{background:linear-gradient(90deg,#fff,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content}
.how b{background:linear-gradient(135deg,var(--cyan),var(--azure));color:var(--night)}
.ico-l{background:var(--cyan)}
.x{background:rgba(255,255,255,.07)}
.x:hover{background:var(--cyan);color:var(--night)}
.sw i{border-color:rgba(255,255,255,.22);box-shadow:inset 0 0 0 3px #101622}
.sw input:checked+i{outline-color:var(--cyan)}
input:not([type=radio]):not([type=checkbox]),textarea{background:rgba(255,255,255,.04);border-color:var(--rule);color:var(--ink)}
input::placeholder,textarea::placeholder{color:#5d6773}
input:focus,textarea:focus{outline-color:var(--cyan);box-shadow:0 0 0 4px rgba(63,227,230,.12)}
input[type=date]{color-scheme:dark}
.opt>span{background:rgba(255,255,255,.03)}
.opt input:checked+span{background:rgba(63,227,230,.08);border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan) inset,0 0 24px -8px rgba(63,227,230,.7)}
.err{background:rgba(232,72,64,.14);color:#ff9b93}
.co-side{background:rgba(255,255,255,.025)}
.line img,.pd-ph,.ph,.cat-ph{background:#e9e9e6}
.add{background:rgba(255,255,255,.06);color:var(--ink);border:1px solid var(--rule)}
.faq details{border-color:var(--rule)}
.faq summary::after{color:var(--cyan)}
.toolpath{color:rgba(63,227,230,.5)}
.nozzle{background:var(--cyan)}
.foot{background:transparent;border-top:1px solid var(--rule)}

/* ---------- boot screen ---------- */
.boot{display:none}
.boot-on .boot{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(60% 60% at 50% 45%,#0b1424,#030406 70%);cursor:pointer}
.boot-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:22px;width:min(480px,calc(100% - 48px))}
.boot-logo{width:min(360px,80vw);filter:drop-shadow(0 0 40px rgba(42,140,255,.45));clip-path:inset(100% 0 0 0);animation:layer 1.5s steps(26,end) .1s forwards}
.boot-log{width:100%;font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--d-muted)}
.boot-log li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed rgba(63,227,230,.14);opacity:0;animation:up .35s ease-out forwards}
.boot-log li:nth-child(1){animation-delay:.3s}.boot-log li:nth-child(2){animation-delay:.7s}.boot-log li:nth-child(3){animation-delay:1.1s}.boot-log li:nth-child(4){animation-delay:1.5s;color:var(--d-ink)}
.boot-log b{color:var(--cyan);font-weight:500}
.boot-bar{width:100%;height:3px;background:rgba(255,255,255,.06);overflow:hidden;border-radius:3px}
.boot-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--azure),var(--cyan));box-shadow:0 0 12px var(--cyan);transform-origin:0 50%;transform:scaleX(0);animation:fill 1.9s cubic-bezier(.6,0,.3,1) .1s forwards}
@keyframes fill{to{transform:scaleX(1)}}
.boot-skip{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#4a5562}
.boot-shutters{position:absolute;inset:0;z-index:1;display:grid;grid-template-rows:repeat(6,1fr);pointer-events:none}
.boot-shutters i{background:#030406;transform-origin:0 50%;transform:scaleX(0)}
.boot.out{background:transparent;pointer-events:none}
.boot.out .boot-in{animation:bootaway .35s ease-in forwards}
.boot.out .boot-shutters i{transform:scaleX(1);animation:shutter .7s cubic-bezier(.7,0,.2,1) forwards}
.boot.out .boot-shutters i:nth-child(odd){transform-origin:100% 50%}
.boot.out .boot-shutters i:nth-child(2){animation-delay:.04s}.boot.out .boot-shutters i:nth-child(3){animation-delay:.08s}.boot.out .boot-shutters i:nth-child(4){animation-delay:.12s}.boot.out .boot-shutters i:nth-child(5){animation-delay:.16s}.boot.out .boot-shutters i:nth-child(6){animation-delay:.2s}
@keyframes shutter{to{transform:scaleX(0)}}
@keyframes bootaway{to{opacity:0;transform:scale(1.06);filter:blur(6px)}}
/* hold the hero's intro until the boot screen has gone */
.boot-on .hero *,.boot-on .hero{animation-play-state:paused!important}
.boot-on body{overflow:hidden}

/* ---------- hologram stage ---------- */
.brand-word,.hud,.hud-c{display:none}
.holo{display:none}
.gl-on .brand-logo,.gl-on .brand-scan{display:none}
.gl-on .brand-tilt{transform:none;width:100%}
.gl-on .holo{display:block;position:relative;width:100%;height:clamp(300px,36vw,540px)}
.gl-on .holo canvas{display:block;width:100%!important;height:100%!important}
.gl-on .brand-word{display:block;position:relative;z-index:1;width:min(78%,440px);margin-top:-18px;filter:drop-shadow(0 6px 24px rgba(42,140,255,.4))}
.gl-on .hud{position:absolute;z-index:2;display:flex;gap:14px;font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--d-muted)}
.gl-on .hud b{color:var(--cyan);font-weight:500;margin-left:6px}
.gl-on .hud-tl{top:4%;left:6%}
.gl-on .hud-tr{top:4%;right:6%;font-variant-numeric:tabular-nums}
.gl-on .hud-c{display:block;position:absolute;width:22px;height:22px;border:1px solid rgba(63,227,230,.55);pointer-events:none}
.gl-on .hud-c1{top:0;left:2%;border-width:1px 0 0 1px}.gl-on .hud-c2{top:0;right:2%;border-width:1px 1px 0 0}
.gl-on .hud-c3{bottom:42px;left:2%;border-width:0 0 1px 1px}.gl-on .hud-c4{bottom:42px;right:2%;border-width:0 1px 1px 0}
@media (max-width:1023px){.gl-on .holo{height:clamp(280px,78vw,420px)}.gl-on .hud-c3,.gl-on .hud-c4{bottom:48px}}
@media (max-width:460px){.gl-on .hud-tl span+span{display:none}}

/* ---------- Z rail: scroll = print height ---------- */
.zrail{display:none}
@media (min-width:1180px) and (pointer:fine){
  .zrail{position:fixed;right:18px;top:50%;z-index:15;display:flex;flex-direction:column;align-items:center;gap:8px;transform:translateY(-50%);font:500 10px/1 var(--mono);letter-spacing:.1em;color:var(--d-muted);mix-blend-mode:screen}
  .zrail-track{position:relative;width:2px;height:180px;background:rgba(110,200,255,.15);overflow:hidden;border-radius:2px}
  .zrail-track i{position:absolute;left:0;right:0;bottom:0;height:100%;background:linear-gradient(var(--cyan),var(--azure));transform-origin:50% 100%;transform:scaleY(var(--z,0));box-shadow:0 0 10px var(--cyan)}
  .zrail b{color:var(--cyan);font-weight:500;font-variant-numeric:tabular-nums;writing-mode:vertical-rl;transform:rotate(180deg)}
  .zrail-u{opacity:.6}
}

/* ---------- cursor ring (desktop only, decoration) ---------- */
.cursor{display:none}
@media (pointer:fine) and (prefers-reduced-motion:no-preference){
  .cursor{position:fixed;left:0;top:0;z-index:90;display:block;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(63,227,230,.6);border-radius:50%;pointer-events:none;transform:translate3d(var(--cx,-100px),var(--cy,-100px),0);transition:width .25s,height .25s,margin .25s,border-color .25s,background .25s,opacity .3s;mix-blend-mode:screen}
  .cursor i{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
  .cursor::before,.cursor::after{content:"";position:absolute;background:rgba(63,227,230,.6)}
  .cursor::before{left:50%;top:-7px;width:1px;height:6px}
  .cursor::after{top:50%;left:-7px;height:1px;width:6px}
  .cursor.hot{width:58px;height:58px;margin:-29px 0 0 -29px;border-color:var(--cyan);background:rgba(63,227,230,.08)}
  .cursor.off{opacity:0}
}

/* ---------- holographic product cards ---------- */
.card{transform-style:preserve-3d}
.card::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--px,50%) var(--py,30%),rgba(63,227,230,.18),transparent 60%),
  linear-gradient(115deg,transparent 30%,rgba(255,80,220,.08) 42%,rgba(63,227,230,.12) 50%,rgba(255,230,90,.06) 58%,transparent 70%);mix-blend-mode:screen}
.card:hover::before{opacity:1}
.card:hover{border-color:rgba(63,227,230,.5);box-shadow:var(--neon)}
.card .ph{overflow:hidden}
.card .ph::before{content:"";position:absolute;left:0;right:0;top:-30%;height:30%;z-index:1;background:linear-gradient(180deg,transparent,rgba(63,227,230,.0) 40%,rgba(63,227,230,.35) 96%,#bffcff 100%);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){.card:hover .ph::before{opacity:1;animation:cardscan 1.6s linear infinite}}
@keyframes cardscan{to{top:100%}}
.card-hit::after{content:attr(data-sku);position:absolute;top:10px;left:10px;z-index:2;padding:4px 7px;border-radius:6px;background:rgba(5,7,11,.72);border:1px solid var(--rule);font:500 9px/1 var(--mono);letter-spacing:.12em;color:var(--cyan);opacity:0;transform:translateY(-4px);transition:.25s}
.card:hover .card-hit::after{opacity:1;transform:none}

/* ---------- decoding headings ---------- */
.scr{color:var(--cyan);-webkit-text-fill-color:var(--cyan);opacity:.8}

/* ---------- misc neon touches ---------- */
.btn:not(.btn-o){box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 12px 34px -12px rgba(42,140,255,.95),0 0 40px -14px rgba(63,227,230,.8)}
.cart-btn{box-shadow:0 0 0 1px rgba(63,227,230,.08) inset}
.top{background:rgba(5,7,11,.7);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.5}
@media (prefers-reduced-motion:no-preference){
  .top::after{animation:topline 6s ease-in-out infinite}
  @keyframes topline{0%,100%{transform:scaleX(.3);opacity:.25}50%{transform:scaleX(1);opacity:.7}}
  .pay-whish{animation:whishglow 4s ease-in-out infinite}
  @keyframes whishglow{50%{box-shadow:0 0 0 1px rgba(63,227,230,.4),0 0 50px -10px rgba(63,227,230,.5)}}
}