/* =====================================================================
   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}}

/* =====================================================================
   EMBER — theme + upgrades for the shared polish layer
   Espresso bar at night: copper sparks rising, steam curling off the cup, the machine drifting
   with the pointer, a PID curve that draws itself and a reservation bar that fills.
   ===================================================================== */
:root{
  --nxp-a:#d98a4e;--nxp-b:#b9693a;
  --nxp-orb-a:rgba(217,138,78,.17);--nxp-orb-b:rgba(235,167,115,.09);
  --nxp-prog:linear-gradient(90deg,#b9693a,#eba773);
  --nxp-spot:rgba(217,138,78,.14);
  --nxp-top-bg:#1a1613;--nxp-top-fg:#f3e9dc;
  --mq-bg:#120f0d;--mq-fg:#a99c8f;--mq-dot:#d98a4e;--mq-line:rgba(243,233,220,.1);
  --mq-font:'Manrope',sans-serif;
  --nxp-mark-font:'Cormorant Garamond',serif;
  --nxp-mark-fill:linear-gradient(180deg,rgba(217,138,78,.36),rgba(217,138,78,0) 84%);
  --mark-k:6.6;
}
.nxp-mq-set span{font-size:.74rem;font-weight:700;letter-spacing:.2em}

/* header */
.primary-nav a.nxp-active{color:var(--cream);background:rgba(243,233,220,.08)}

/* hero: sparks, steam, pulse, pointer drift */
.hero-grid{position:relative;z-index:2}
.nxp-p{background:radial-gradient(circle,#ffe2c2,#eba773 42%,transparent 72%);box-shadow:0 0 12px 2px rgba(217,138,78,.5);animation-duration:calc(var(--dur,14s) * .9)}
.stage-glow{animation:emPulse 7s ease-in-out infinite;animation-play-state:paused}
.hero.is-vis .stage-glow{animation-play-state:running}
@keyframes emPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.045);opacity:.82}}
.machine-wrap[data-nxp-par]{transition:translate .7s var(--nxp-soft),transform .4s}
.nxp-steam{position:absolute;left:41%;width:18%;top:55%;height:20%;pointer-events:none;z-index:2}
.nxp-steam i{position:absolute;bottom:0;left:calc(var(--k) * 28%);width:42%;height:100%;border-radius:50%;opacity:0;filter:blur(7px);
  background:radial-gradient(ellipse at 50% 100%,rgba(243,233,220,.62),transparent 70%);animation:emSteam 4.4s ease-in-out infinite;animation-delay:calc(var(--k) * -1.3s);animation-play-state:paused}
.nxp-steam i:nth-child(1){--k:0}.nxp-steam i:nth-child(2){--k:1}.nxp-steam i:nth-child(3){--k:2}
.hero.is-vis .nxp-steam i{animation-play-state:running}
@keyframes emSteam{0%{transform:translate3d(0,25%,0) scale(.55);opacity:0}25%{opacity:.75}100%{transform:translate3d(10px,-120%,0) scale(1.6);opacity:0}}

/* key figures, features */
.fig{transition:background .4s ease}
@media (hover:hover){.fig:hover{background:rgba(217,138,78,.05)}}
.feature-art{transition:border-color .4s ease,box-shadow .4s ease}
@media (hover:hover){.feature-art:hover{border-color:rgba(217,138,78,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 30px 60px -36px rgba(217,138,78,.35)}}
html.nxp .feature-art path[stroke="#d98a4e"][stroke-width="3"]{stroke-dasharray:640;stroke-dashoffset:640;transition:stroke-dashoffset 2s var(--nxp-reveal) .35s}
html.nxp .feature.nxp-in .feature-art path[stroke="#d98a4e"][stroke-width="3"]{stroke-dashoffset:0}
.feature-num{display:inline-flex;align-items:center;gap:12px}
.feature-num::after{content:"";width:44px;height:1px;background:linear-gradient(90deg,var(--copper),transparent)}

/* finishes, specs, compare, reviews */
.finish-art{position:relative;overflow:hidden}
.finish-card:hover .finish-art{box-shadow:0 30px 60px -34px rgba(217,138,78,.4)}
.spec-list div{position:relative;transition:padding-left .35s var(--nxp-soft),background .35s ease}
.spec-list div::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--copper);transform:scaleY(0);transition:transform .4s var(--nxp-reveal)}
@media (hover:hover){.spec-list div:hover{padding-left:14px;background:rgba(217,138,78,.05)}.spec-list div:hover::before{transform:scaleY(1)}}
.compare .hot{box-shadow:inset 2px 0 0 rgba(217,138,78,.4),inset -2px 0 0 rgba(217,138,78,.4)}
.review{position:relative;transition:transform .4s var(--nxp-soft),border-color .3s ease}
.review::before{content:"\201C";position:absolute;top:6px;right:24px;font:600 6.5rem/1 var(--font-display);color:rgba(217,138,78,.14);pointer-events:none}
@media (hover:hover){.review:hover{transform:translateY(-5px);border-color:rgba(217,138,78,.4)}}

/* FAQ + reservation */
.faq summary{transition:color .25s ease}
.faq summary:hover{color:var(--copper-hi)}
@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}
}
html.nxp .progress-bar{transform-origin:left;transform:scaleX(0);transition:transform 1.8s var(--nxp-reveal) .3s}
html.nxp .progress.nxp-in .progress-bar{transform:scaleX(1)}
.progress-bar{position:relative}
.progress-note strong i{font-style:normal}
.section-cta{position:relative}
.site-footer{position:relative;overflow:hidden}
.nxp-mark{margin-top:40px;letter-spacing:.14em;font-weight:600}
@media (prefers-reduced-motion:reduce){.stage-glow,.nxp-steam i{animation:none}.progress-bar{transform:none}}
