/* ProLayer colour layer: keeps the futuristic dark look, adds the filament colours.
   Each category has its own neon accent (--acc). */

:root{
  --pink:#FF4FD8;--violet:#8B6CFF;--lime:#B6FF3B;--amber:#FFB547;--coral:#FF5A6E;--green:#39FF88;
  --holo:#3FE3E6;--holo-2:#2A8CFF;
  --rainbow:linear-gradient(90deg,var(--cyan),var(--azure),var(--violet),var(--pink),var(--amber),var(--lime),var(--cyan));
}
[data-f="topper"],.card[data-cat="topper"]{--acc:var(--pink)}
[data-f="football"],.card[data-cat="football"]{--acc:var(--green)}
[data-f="fidget"],.card[data-cat="fidget"]{--acc:var(--coral)}
[data-f="animal"],.card[data-cat="animal"]{--acc:var(--violet)}
[data-f="faith"],.card[data-cat="faith"]{--acc:var(--amber)}
[data-f="home"],.card[data-cat="home"]{--acc:var(--cyan)}
[data-f="all"]{--acc:var(--cyan)}

/* aurora behind everything */
body{background:
  radial-gradient(900px 500px at 88% -5%,rgba(139,108,255,.20),transparent 60%),
  radial-gradient(800px 500px at 5% 30%,rgba(255,79,216,.10),transparent 60%),
  radial-gradient(900px 600px at 95% 65%,rgba(63,227,230,.09),transparent 60%),
  radial-gradient(800px 500px at 10% 95%,rgba(255,181,71,.08),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}

/* hero: more colour in the sky */
.hero{background:
  radial-gradient(45% 55% at 80% 40%,rgba(139,108,255,.26),transparent 65%),
  radial-gradient(35% 45% at 66% 70%,rgba(255,79,216,.16),transparent 70%),
  radial-gradient(40% 45% at 85% 25%,rgba(63,227,230,.16),transparent 70%),
  radial-gradient(30% 40% at 8% 90%,rgba(255,181,71,.10),transparent 70%),
  repeating-linear-gradient(to top,rgba(238,241,244,.03) 0 1px,transparent 1px 4px),
  linear-gradient(180deg,var(--night),var(--night-2))}
.hero::before{background:radial-gradient(420px circle at var(--mx,70%) var(--my,40%),color-mix(in srgb,var(--holo) 14%,transparent),transparent 65%)}
.grad{background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink),var(--amber),var(--cyan));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.label .live,.now .live{background:var(--pink)}
.offer b{color:var(--amber)}
.badges li:nth-child(1) .ico{background:var(--lime)}
.badges li:nth-child(2) .ico{background:var(--pink)}
.badges li:nth-child(3) .ico{background:var(--amber)}
.promise li:nth-child(1) b::before{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.promise li:nth-child(2) b::before{background:var(--pink);box-shadow:0 0 8px var(--pink)}
.promise li:nth-child(3) b::before{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.promise li:nth-child(4) b::before{background:var(--lime);box-shadow:0 0 8px var(--lime)}

/* hologram HUD follows the colour being printed */
.gl-on .hud b,.now [data-now]{color:var(--holo);transition:color .6s}
.gl-on .hud-c{border-color:color-mix(in srgb,var(--holo) 60%,transparent);transition:border-color .6s}
.caret{background:var(--holo)}
.brand-word{transition:filter .6s}
.gl-on .brand-word{filter:drop-shadow(0 6px 26px color-mix(in srgb,var(--holo-2) 55%,transparent))}

/* buttons */
.btn:not(.btn-o){background:linear-gradient(120deg,var(--violet),var(--azure) 40%,#16b4d8 70%,var(--violet));background-size:250% 100%;box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 12px 34px -12px rgba(139,108,255,.9),0 0 40px -14px rgba(63,227,230,.8)}
.btn:not(.btn-o):hover{box-shadow:0 0 0 1px rgba(255,255,255,.15) inset,0 16px 40px -12px rgba(255,79,216,.8),0 0 50px -12px rgba(139,108,255,.9)}
.cart-count{background:linear-gradient(135deg,var(--pink),var(--violet))}

/* ticker: a moving rainbow band */
.ticker{background:linear-gradient(90deg,#6a3df0,#c03ee0,#ff4f9a,#ff8a3d,#ffc53d,#3fd6a0,#2a8cff,#6a3df0);background-size:300% 100%}

/* section labels get their own colour */
#shop .label::before{color:var(--pink)}
#custom .label::before{color:var(--amber)}
#pay .label::before{color:var(--lime)}
.faq-sec .label::before{color:var(--violet)}
#contact .label::before{color:var(--cyan)}

/* categories + chips in their accent colour */
.cat .cat-ph{box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 30%,transparent);transition:box-shadow .3s}
.cat:hover .cat-ph{box-shadow:0 0 0 1px var(--acc),0 0 30px -6px var(--acc)}
.cat-tx b::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:2px;background:var(--acc);box-shadow:0 0 8px var(--acc);vertical-align:1px}
.cat[aria-pressed="true"] .cat-ph{outline-color:var(--acc)}
.cat[aria-pressed="true"] .cat-tx b{color:var(--acc)}
.chip[data-f]{border-color:color-mix(in srgb,var(--acc) 35%,transparent)}
.chip[data-f]:hover{border-color:var(--acc);color:var(--acc)}
.chip[aria-pressed="true"]{background:var(--acc);color:var(--night);box-shadow:0 0 24px -6px var(--acc)}

/* product cards glow in their category colour */
.card .tag{color:var(--acc)}
.card:hover{border-color:color-mix(in srgb,var(--acc) 70%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 40%,transparent),0 0 34px -8px var(--acc)}
.card::before{background:radial-gradient(260px circle at var(--px,50%) var(--py,30%),color-mix(in srgb,var(--acc) 22%,transparent),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%)}
.card .ph::after{background:var(--acc);box-shadow:0 0 10px var(--acc)}
.card .ph::before{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--acc) 35%,transparent) 96%,#fff 100%)}
.card-hit::after{color:var(--acc)}
.pr{background:linear-gradient(90deg,#fff,var(--acc));-webkit-background-clip:text;background-clip:text}
.add:hover{color:var(--night)}
.add::before{background:linear-gradient(90deg,var(--acc),color-mix(in srgb,var(--acc) 50%,#fff))}

/* custom / how / pay */
.steps li:nth-child(1) b{color:var(--pink)}.steps li:nth-child(2) b{color:var(--amber)}.steps li:nth-child(3) b{color:var(--lime)}
.how li:nth-child(1) b{background:linear-gradient(135deg,var(--pink),var(--violet))}
.how li:nth-child(2) b{background:linear-gradient(135deg,var(--amber),var(--coral))}
.how li:nth-child(3) b{background:linear-gradient(135deg,var(--lime),var(--green))}
.pay-card:nth-child(1) .ico-l{background:var(--lime)}
.pay-card:nth-child(3) .ico-l{background:var(--amber)}
.pay-whish .ico-l{background:var(--pink)}
.pay-whish{background:linear-gradient(160deg,#1b0f2e,#0a0d18 60%,#06121a);border-color:rgba(255,79,216,.3)}
.whish-num b{background:linear-gradient(90deg,var(--pink),#fff,var(--cyan),var(--pink));background-size:300% 100%;-webkit-background-clip:text;background-clip:text}
.faq details:nth-child(5n+1) summary::after{color:var(--pink)}
.faq details:nth-child(5n+2) summary::after{color:var(--amber)}
.faq details:nth-child(5n+3) summary::after{color:var(--lime)}
.faq details:nth-child(5n+4) summary::after{color:var(--violet)}
.faq details:nth-child(5n+5) summary::after{color:var(--cyan)}
.faq details[open] summary{color:#fff;text-shadow:0 0 18px rgba(139,108,255,.6)}
.paths a:hover{color:var(--pink)}
.top::after{background:var(--rainbow)}
.toolpath{color:rgba(255,79,216,.5)}
.nozzle{background:var(--amber);box-shadow:0 0 10px var(--amber)}
.cursor{border-color:rgba(255,79,216,.6)}
.cursor i{background:var(--pink);box-shadow:0 0 8px var(--pink)}
.cursor.hot{border-color:var(--amber);background:rgba(255,181,71,.08)}

/* swatches feel like filament spools */
.sw i{box-shadow:inset 0 0 0 3px #101622,0 0 12px -2px var(--sw,transparent)}
.opt input:checked+span{border-color:var(--violet);box-shadow:0 0 0 1px var(--violet) inset,0 0 24px -8px var(--violet);background:rgba(139,108,255,.1)}

/* boot screen gets colour too */
.boot-bar i{background:var(--rainbow);box-shadow:0 0 12px var(--pink)}
.boot-log li:nth-child(1) b{color:var(--amber)}.boot-log li:nth-child(2) b{color:var(--lime)}.boot-log li:nth-child(3) b{color:var(--pink)}.boot-log li:nth-child(4) b{color:var(--cyan)}

@media (prefers-reduced-motion:no-preference){
  .grad,.fx .hero h1 .grad{animation:layer .9s steps(12,end) .95s forwards,hue 8s linear 2s infinite}
  .btn:not(.btn-o){animation:hue 6s ease-in-out infinite alternate}
  .ticker{animation:hue 14s linear infinite}
  .whish-num b{animation:hue 5s linear infinite}
  @keyframes hue{to{background-position:300% 0}}
  .top::after{background-size:200% 100%}
}