/* =====================================================================
   NXP POLISH LAYER — shared by the Nexora example sites.
   Same motion language as the Nexora site:
     A masked line rise (headings)   B lift + focus (paragraphs)
     C settle (buttons, labels)      D quiet lift (cards, blocks)
   Rules: animate transform + opacity only, pause every loop while its section is off screen,
   and switch everything off for prefers-reduced-motion. Each site re-themes this file through
   the --nxp-* variables in its own section at the bottom of polish.css.
   ===================================================================== */
:root{
  --nxp-reveal:cubic-bezier(.16,1,.3,1);
  --nxp-soft:cubic-bezier(.25,.8,.3,1);
  --nxp-a:#8b5cf6;                         /* primary accent */
  --nxp-b:#6e3ff2;                         /* secondary accent */
  --nxp-orb-a:rgba(139,92,246,.22);        /* ambient orb colours */
  --nxp-orb-b:rgba(110,63,242,.16);
  --nxp-prog:linear-gradient(90deg,var(--nxp-a),var(--nxp-b));
  --nxp-spot:rgba(255,255,255,.12);        /* pointer spotlight on cards */
  --nxp-top-bg:#111;--nxp-top-fg:#fff;     /* back-to-top button */
  --mq-bg:transparent;--mq-fg:inherit;--mq-dot:var(--nxp-a);--mq-line:rgba(128,128,128,.25);
  --mq-font:inherit;
  --nxp-mark-font:inherit;--nxp-mark-fill:linear-gradient(180deg,rgba(128,128,128,.32),rgba(128,128,128,0) 82%);
}

/* ---------- scroll progress + back to top ---------- */
.nxp-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:9999;pointer-events:none}
.nxp-progress i{display:block;height:100%;background:var(--nxp-prog);transform-origin:0 50%;transform:scaleX(0)}
.nxp-top{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:900;display:grid;place-items:center;
  width:46px;height:46px;padding:0;border:1px solid rgba(128,128,128,.35);border-radius:50%;background:var(--nxp-top-bg);color:var(--nxp-top-fg);cursor:pointer;
  opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s ease,transform .3s var(--nxp-soft),background .2s ease}
html.nxp-show-top .nxp-top{opacity:1;transform:none;pointer-events:auto}
.nxp-top:hover{background:var(--nxp-a);color:#fff}
.nxp-top svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- entrance + scroll reveal ---------- */
@keyframes nxLine{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes nxSub{from{opacity:0;transform:translateY(14px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes nxPill{from{opacity:0;transform:translateY(8px) scale(.972)}to{opacity:1;transform:none}}
@keyframes nxLift{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes nxVisual{from{opacity:0;transform:translateY(24px) scale(.95)}to{opacity:1;transform:none}}
@keyframes nxImg{from{opacity:0;transform:translateY(22px) scale(1.04)}to{opacity:1;transform:none}}

.nxp-l{display:block;overflow:hidden;padding:.3em .14em .22em;margin:-.3em -.14em -.22em}
.nxp-li{display:block}
.nxp-split{display:flex;flex-direction:column}      /* keeps neighbouring line masks from collapsing their margins */

html.nxp [data-nxp="line"]:not(.nxp-split):not(.nxp-done){opacity:0}
html.nxp .nxp-li{transform:translateY(100%)}
html.nxp [data-nxp]:not([data-nxp="line"]):not([data-nxp="draw"]):not(.nxp-in){opacity:0}

html.nxp .nxp-in .nxp-li,html.nxp .nxp-in.nxp-li{animation:nxLine 1.05s var(--nxp-reveal) calc(var(--d,0s) + var(--l,0) * .1s) both}
html.nxp [data-nxp="sub"].nxp-in{animation:nxSub .85s var(--nxp-reveal) var(--d,0s) both}
html.nxp [data-nxp="pill"].nxp-in{animation:nxPill .65s var(--nxp-soft) var(--d,0s) both}
html.nxp [data-nxp="lift"].nxp-in{animation:nxLift .8s var(--nxp-reveal) var(--d,0s) both}
html.nxp [data-nxp="visual"].nxp-in{animation:nxVisual 1.2s var(--nxp-reveal) var(--d,0s) both}
html.nxp [data-nxp="img"].nxp-in{animation:nxImg .95s var(--nxp-reveal) var(--d,0s) both}
html.nxp [data-nxp].nxp-fin{animation:none!important}   /* added once an entrance has played, so finished elements stop holding layers */
@media (max-width:552px){
  html.nxp [data-nxp="sub"].nxp-in{animation-name:nxLift}
  html.nxp .nxp-in .nxp-li,html.nxp .nxp-in.nxp-li{animation-duration:.92s}
}

/* the sites' own fade-in is replaced by the layer above */
html.js-reveal .reveal:not([data-nxp]){opacity:1!important;transform:none!important;transition:none!important}

/* ---------- ambient backdrops (injected) ---------- */
[data-nxp-fx]{position:relative;isolation:isolate;overflow:hidden;overflow:clip}
.nxp-fx{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.nxp-fx i{position:absolute;display:block}
.nxp-orb{width:min(680px,88vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle closest-side,var(--nxp-orb-a),transparent 70%);
  animation:nxOrb 30s ease-in-out infinite alternate;animation-play-state:paused}
.nxp-orb.o1{left:var(--o1x,-14%);top:var(--o1y,-18%)}
.nxp-orb.o2{right:var(--o2x,-16%);bottom:var(--o2y,-18%);background:radial-gradient(circle closest-side,var(--nxp-orb-b),transparent 70%);animation-duration:38s;animation-delay:-12s}
.fx-b .nxp-orb.o1{--o1x:56%;--o1y:-22%}.fx-b .nxp-orb.o2{--o2x:48%;--o2y:-16%}
.is-vis .nxp-orb{animation-play-state:running;will-change:transform}
@keyframes nxOrb{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(7%,5%,0) scale(1.1)}100%{transform:translate3d(-5%,9%,0) scale(.95)}}

/* floating particles (look comes from each site) */
.nxp-parts{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.nxp-p{position:absolute;left:var(--x,50%);bottom:-24px;width:var(--s,8px);height:var(--s,8px);border-radius:50%;opacity:0;
  animation:nxpRise var(--dur,14s) linear var(--del,0s) infinite;animation-play-state:paused}
.is-vis .nxp-p{animation-play-state:running}
@keyframes nxpRise{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:var(--op,.7)}85%{opacity:var(--op,.7)}100%{transform:translate3d(var(--dx,20px),-92vh,0);opacity:0}}

/* ---------- marquee strip ---------- */
.nxp-mq{position:relative;overflow:hidden;background:var(--mq-bg);color:var(--mq-fg);border-block:1px solid var(--mq-line);font-family:var(--mq-font)}
.nxp-mq::before,.nxp-mq::after{content:"";position:absolute;top:0;bottom:0;z-index:2;width:10%;pointer-events:none}
.nxp-mq::before{left:0;background:linear-gradient(90deg,var(--mq-fade,var(--mq-bg)),transparent)}
.nxp-mq::after{right:0;background:linear-gradient(270deg,var(--mq-fade,var(--mq-bg)),transparent)}
.nxp-mq-track{display:flex;width:max-content;padding:15px 0;animation:nxMq 48s linear infinite;animation-play-state:paused}
.is-vis .nxp-mq-track{animation-play-state:running}
.nxp-mq:hover .nxp-mq-track{animation-play-state:paused}
.nxp-mq-set{display:flex}
.nxp-mq-set span{display:inline-flex;align-items:center;gap:30px;padding-right:30px;white-space:nowrap;font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.nxp-mq-set span::after{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--mq-dot)}
@keyframes nxMq{to{transform:translateX(-50%)}}

/* ---------- misc components ---------- */
.nxp-label{display:inline-block;margin:0 0 14px;font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--nxp-a)}
.nxp-imgw{display:block;overflow:hidden;border-radius:inherit}
.nxp-imgw img{display:block;width:100%;transition:transform .9s var(--nxp-reveal)}
@media (hover:hover){.nxp-imgw:hover img{transform:scale(1.06)}}
[data-nxp-spot]{position:relative}
[data-nxp-spot]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),var(--nxp-spot),transparent 62%)}
@media (hover:hover){[data-nxp-spot]:hover::after{opacity:1}}
[data-nxp-par]{transition:translate .7s var(--nxp-soft)}
[data-nxp-mag]{transition:translate .35s var(--nxp-soft)}
.nxp-mark{display:block;margin:0 0 -.08em;text-align:center;font-family:var(--nxp-mark-font);font-size:clamp(44px,calc((min(100vw,1200px) - 80px) / var(--mark-k,5.6)),210px);font-weight:700;
  line-height:.86;letter-spacing:-.02em;background:var(--nxp-mark-fill);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;pointer-events:none;overflow:hidden}
.nxp-nav-ind{display:none}

@media (prefers-reduced-motion:reduce){
  .nxp-mq-track{flex-wrap:wrap;justify-content:center;width:auto;transform:none;animation:none}
  .nxp-mq-set.dup{display:none}
  .nxp-mq-set{flex-wrap:wrap;justify-content:center;row-gap:10px}
  .nxp-mq::before,.nxp-mq::after{display:none}
  .nxp-orb,.nxp-p,.nxp-mq-track{animation:none}
}

/* ---------- orbit art: fills an empty column (the monogram sits in .core) ---------- */
.nxp-orbit{position:relative;width:min(100%,340px);aspect-ratio:1;margin-top:clamp(28px,4vw,44px)}
.nxp-orbit::before{content:"";position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(circle closest-side,var(--nxp-orb-a),transparent 72%)}
.nxp-orbit .r{position:absolute;display:block;border:1px solid var(--nxp-ring,rgba(128,128,128,.35));border-radius:50%;animation:nxSpin 60s linear infinite;animation-play-state:paused}
.nxp-orbit .r1{inset:0}
.nxp-orbit .r2{inset:15%;border-style:dashed;animation-duration:44s;animation-direction:reverse}
.nxp-orbit .r3{inset:30%;animation-duration:30s}
.nxp-orbit .r::before{content:"";position:absolute;left:50%;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--nxp-a);box-shadow:0 0 14px 3px var(--nxp-orb-a)}
.nxp-orbit .r2::before{width:6px;height:6px;margin:-3px 0 0 -3px}
.nxp-orbit .core{position:absolute;inset:37%;display:grid;place-items:center;border-radius:50%;color:var(--nxp-a);text-align:center;line-height:1;
  background:radial-gradient(circle,var(--nxp-orb-a),transparent 74%);animation:nxPulse 4s ease-in-out infinite;animation-play-state:paused}
.is-vis .nxp-orbit .r,.is-vis .nxp-orbit .core{animation-play-state:running}
@keyframes nxSpin{to{transform:rotate(360deg)}}
@keyframes nxPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.nxp-orbit .r,.nxp-orbit .core{animation:none}}

/* =====================================================================
   VOLTA — theme + upgrades for the shared polish layer
   Race-day signage: hard edges, flat lime blocks, speed streaks behind the bike, wheel outlines
   turning slowly behind each section, a gauge with a marker riding the arc, hazard-stripe bookends.
   ===================================================================== */
:root{
  --nxp-a:#c6f21f;--nxp-b:#a4cc0e;
  --nxp-orb-a:rgba(198,242,31,.13);--nxp-orb-b:rgba(198,242,31,.07);
  --nxp-prog:#0b0b0b;
  --nxp-spot:rgba(198,242,31,.14);
  --nxp-top-bg:#c6f21f;--nxp-top-fg:#0b0b0b;
  --mq-bg:#c6f21f;--mq-fg:#0b0b0b;--mq-dot:#0b0b0b;--mq-line:#0b0b0b;
  --mq-font:'Archivo','Arial Narrow',sans-serif;
  --vt-dots:rgba(11,11,11,.11);--vt-wheel:rgba(11,11,11,.1);
}
main{counter-reset:vsec}

/* signage details: progress track, back-to-top, ticker strip */
.nxp-progress{height:4px;background:var(--lime);border-bottom:1px solid var(--ink)}
.nxp-top{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.nxp-top:hover{background:var(--ink);color:var(--lime)}
.nxp-mq{border-block-width:2px}
.nxp-mq-set span{font-size:.86rem;font-weight:900;letter-spacing:.16em}
.nxp-mq-set span::after{width:7px;height:7px;border-radius:0;transform:rotate(45deg)}
.marquee-track{animation-play-state:paused}
.marquee.is-vis .marquee-track{animation-play-state:running}

/* header: the section in view is inked in */
.primary-nav a.nxp-active{background:var(--ink);color:var(--lime)}
@media (max-width:920px){.primary-nav a.nxp-active{background:var(--lime);color:var(--ink)}}

/* hero: speed streaks, a turning dashed ring, a sticker that wobbles, pops that bob only while seen */
.hero{position:relative;isolation:isolate}
.hero .wrap{position:relative;z-index:2}
.hero .nxp-parts{z-index:0}
.hero .nxp-p{left:auto;right:-26%;bottom:auto;top:var(--x);width:calc(var(--s) * 22);height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--ink),transparent);animation-name:vtStreak}
@keyframes vtStreak{0%{transform:translate3d(0,0,0);opacity:0}10%{opacity:calc(var(--op) * .5)}80%{opacity:calc(var(--op) * .5)}100%{transform:translate3d(-135vw,0,0);opacity:0}}
.hero-disc::before{content:"";position:absolute;inset:-6%;border:2px dashed var(--ink);border-radius:50%;opacity:.5;
  animation:vtSpin 60s linear infinite;animation-play-state:paused}
.hero.is-vis .hero-disc::before{animation-play-state:running}
@keyframes vtSpin{to{transform:rotate(360deg)}}
.sticker{animation:vtWobble 6s ease-in-out infinite;animation-play-state:paused}
.hero.is-vis .sticker{animation-play-state:running}
@keyframes vtWobble{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(-6deg) scale(1.05)}}
.spec-pop{animation-play-state:paused}
.hero.is-vis .spec-pop{animation-play-state:running}

/* hazard-stripe bookends */
.stats::before,.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:9px;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(135deg,var(--lime) 0 14px,var(--ink) 14px 28px)}
.site-footer{position:relative}
.stat{transition:background .3s ease}
@media (hover:hover){.stat:hover{background:rgba(198,242,31,.06)}}

/* sections: dot grid + a slow wheel outline, numbered kickers like race bibs */
.section{position:relative;isolation:isolate;overflow:clip}
.section::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,var(--vt-dots) 1.2px,transparent 1.6px) 0 0/30px 30px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent)}
.section-dark{--vt-dots:rgba(243,243,238,.09);--vt-wheel:rgba(243,243,238,.075)}
.section-lime{--vt-dots:rgba(11,11,11,.16);--vt-wheel:rgba(11,11,11,.13)}
.section::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:clamp(260px,44vw,600px);aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle closest-side,transparent 0 5%,var(--vt-wheel) 5% 6.6%,transparent 6.6%),
    radial-gradient(circle closest-side,transparent 0 94%,var(--vt-wheel) 94% 100%),
    repeating-conic-gradient(var(--vt-wheel) 0 .5deg,transparent .5deg 11.25deg);
  -webkit-mask-image:radial-gradient(circle closest-side,transparent 4.6%,#000 5%);mask-image:radial-gradient(circle closest-side,transparent 4.6%,#000 5%);
  animation:vtSpin 140s linear infinite;animation-play-state:paused}
.section.is-vis::after{animation-play-state:running}
#lineup::after{right:-16%;top:-26%}#range::after{left:-18%;bottom:-40%}#tech::after{right:-18%;bottom:-38%}#specs::after{left:-16%;top:-36%}
#finance::after{right:-16%;top:-30%}#reviews::after{left:-14%;top:-30%}#faq::after{right:-18%;bottom:-40%}#test-ride::after{left:-16%;bottom:-44%}
.section .kicker::before{counter-increment:vsec;content:counter(vsec,decimal-leading-zero);padding:3px 7px;border-radius:4px;background:var(--ink);color:var(--lime);font-size:.7rem;line-height:1.3;letter-spacing:.06em}
.section-dark .kicker::before{background:var(--lime);color:var(--ink)}
.section-lime .kicker::before{background:var(--ink);color:var(--lime)}

/* lineup: the bike pulls ahead on hover, streaks trail it, prices count up */
.model-art{position:relative;overflow:hidden;--sk:var(--ink)}
.m-cargo{--sk:var(--lime)}
.model-art .bike-wrap{transition:transform .6s var(--nxp-reveal)}
.model-art::before{content:"";position:absolute;left:3%;top:38%;width:28%;height:50px;pointer-events:none;opacity:0;transform:translateX(-26px);
  transition:opacity .35s ease,transform .6s var(--nxp-reveal);
  background:linear-gradient(90deg,transparent,var(--sk)) 0 0/100% 3px no-repeat,linear-gradient(90deg,transparent,var(--sk)) 34% 20px/66% 3px no-repeat,linear-gradient(90deg,transparent,var(--sk)) 10% 44px/90% 3px no-repeat}
@media (hover:hover){.model:hover .model-art .bike-wrap{transform:translateX(12px) scale(1.04)}.model:hover .model-art::before{opacity:.85;transform:none}}
.model-price strong i{font-style:normal}

/* range planner: gauge ticks + marker, values bump when they change */
.gauge-ticks line{stroke:#6c6c66;stroke-width:1.5;stroke-linecap:round}
.gauge-ticks line.big{stroke:#b9b9b1;stroke-width:2.2}
.gauge-ends text{font:800 8px var(--font);letter-spacing:.08em;fill:#8a8a82;text-anchor:middle}
.gauge-dot{fill:var(--bg);stroke:var(--ink);stroke-width:4;transform-origin:120px 130px;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.vt-bump{display:inline-block;animation:vtBump .55s var(--nxp-reveal)}
@keyframes vtBump{from{transform:translateY(10px) scale(.92);opacity:.35}to{transform:none;opacity:1}}
.gauge-card{position:relative}

/* tech: index numbers, icon turn */
.tech-grid{counter-reset:tc}
.tech{position:relative;counter-increment:tc}
.tech::after{content:counter(tc,decimal-leading-zero);position:absolute;right:26px;top:26px;font-size:.84rem;font-weight:900;letter-spacing:.08em;color:rgba(11,11,11,.22);transition:color .2s ease}
.tech:hover::after{color:var(--ink)}
.t-ico{transition:transform .5s var(--nxp-soft)}
@media (hover:hover){.tech:hover .t-ico{transform:rotate(-8deg) scale(1.1)}}

/* specs: rows step in whenever a tab is opened */
.tab-panel.is-on .spec-grid>div{animation:vtRow .55s var(--nxp-reveal) backwards}
.tab-panel.is-on .spec-grid>div:nth-child(2){animation-delay:.05s}.tab-panel.is-on .spec-grid>div:nth-child(3){animation-delay:.1s}
.tab-panel.is-on .spec-grid>div:nth-child(4){animation-delay:.15s}.tab-panel.is-on .spec-grid>div:nth-child(5){animation-delay:.2s}.tab-panel.is-on .spec-grid>div:nth-child(6){animation-delay:.25s}
@keyframes vtRow{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* reviews + faq + footer */
.review{position:relative;transition:border-color .3s ease,transform .4s var(--nxp-soft)}
.review::before{content:"\201C";position:absolute;top:2px;right:22px;font:900 6.5rem/1 var(--font);color:rgba(198,242,31,.13);pointer-events:none}
@media (hover:hover){.review:hover{border-color:var(--lime);transform:translateY(-5px)}}
.faq summary{transition:color .2s ease}
.faq summary:hover{color:var(--grey)}
.faq summary::after{transition:background .15s,transform .3s var(--nxp-soft)}
.faq[open] summary::after{transform:rotate(180deg)}
@supports (interpolate-size:allow-keywords){
  .faq{interpolate-size:allow-keywords}
  .faq::details-content{block-size:0;overflow:clip;transition:block-size .4s var(--nxp-reveal),content-visibility .4s allow-discrete}
  .faq[open]::details-content{block-size:auto}
}
.pay-card{position:relative}
.ride-points li{transition:transform .3s var(--nxp-soft)}
@media (hover:hover){.ride-points li:hover{transform:translateX(6px)}}
.footer-mark{background:linear-gradient(180deg,rgba(198,242,31,.3),rgba(198,242,31,0) 78%);-webkit-background-clip:text;background-clip:text}
.footer-grid a{transition:color .2s ease,transform .25s var(--nxp-soft)}
@media (hover:hover){.footer-grid a:hover{transform:translateX(4px)}}

@media (max-width:920px){.section::after{opacity:.8}.tech::after{right:20px;top:20px}}
@media (prefers-reduced-motion:reduce){.hero-disc::before,.sticker,.section::after,.vt-bump{animation:none}.model-art::before{display:none}}