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

/* =====================================================================
   AURELLE — theme + upgrades for the shared polish layer
   Bathroom shelf in morning light: soft bokeh drifting up behind the arch, a light sheen that
   crosses the glass, arch outlines floating behind every section, a quiz with a progress ribbon
   and an ingredient card that swaps with a gentle pop.
   ===================================================================== */
:root{
  --nxp-a:#c4737c;--nxp-b:#8da08a;
  --nxp-orb-a:rgba(196,115,124,.13);--nxp-orb-b:rgba(141,160,138,.17);
  --nxp-prog:linear-gradient(90deg,#c4737c,#e7b8a4,#8da08a);
  --nxp-spot:rgba(196,115,124,.11);
  --nxp-top-bg:#3b2a28;--nxp-top-fg:#faf5ef;
  --mq-bg:#f3dcd6;--mq-fg:#3b2a28;--mq-dot:#c4737c;--mq-line:rgba(59,42,40,.12);
  --mq-font:'DM Serif Display','Times New Roman',serif;
  --nxp-mark-font:'DM Serif Display','Times New Roman',serif;
  --nxp-mark-fill:linear-gradient(180deg,rgba(243,220,214,.34),rgba(243,220,214,0) 86%);
  --mark-k:3.3;
  --ar-line:rgba(59,42,40,.1);
}
.nxp-mq-set span{font-size:1.32rem;font-style:italic;font-weight:400;letter-spacing:0;text-transform:none}
.nxp-mq-set span::after{width:10px;height:10px;border-radius:0 100% 0 100%}
.nxp-mq-track{padding:13px 0}

/* header */
.primary-nav a.nxp-active{background:var(--cocoa);color:var(--cream)}
@media (max-width:920px){.primary-nav a.nxp-active{background:transparent;color:var(--rose-dark);font-weight:700}}

/* hero: bokeh, sheen across the glass, breathing circle, bubbles that float only while seen */
.hero{position:relative;isolation:isolate}
.hero-grid{position:relative;z-index:2}
.hero .nxp-p{background:radial-gradient(circle at 35% 30%,#fff 0,rgba(236,201,193,.85) 45%,rgba(196,115,124,.3) 100%);box-shadow:0 0 14px rgba(196,115,124,.2);animation-duration:calc(var(--dur,14s) * 1.5)}
.hero-circle{animation:arBreath 9s ease-in-out infinite alternate;animation-play-state:paused}
.hero.is-vis .hero-circle{animation-play-state:running}
@keyframes arBreath{from{transform:scale(1)}to{transform:scale(1.06)}}
.bubble{animation-play-state:paused}
.hero.is-vis .bubble{animation-play-state:running}
.arch::after{content:"";position:absolute;z-index:1;top:0;bottom:0;left:0;width:42%;pointer-events:none;transform:translateX(-140%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent)}
.arch-hero::after{animation:arSheen 9s ease-in-out infinite;animation-play-state:paused}
.hero.is-vis .arch-hero::after{animation-play-state:running}
@keyframes arSheen{0%,55%{transform:translateX(-140%) skewX(-18deg)}100%{transform:translateX(280%) skewX(-18deg)}}
@media (hover:hover){.product:hover .arch::after{transform:translateX(280%) skewX(-18deg);transition:transform 1.2s var(--nxp-reveal)}}
.product .arch{transition:transform .4s var(--nxp-soft),box-shadow .4s ease}
@media (hover:hover){.product:hover .arch{box-shadow:0 34px 50px -34px rgba(166,85,96,.5)}}
.p-price i{font-style:normal}

/* sections: orbs from the layer + an arch outline drifting in a corner */
.section{position:relative;isolation:isolate;overflow:clip}
.section-sage{--ar-line:rgba(250,245,239,.17)}
.section-blush{--ar-line:rgba(166,85,96,.15)}
.section::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:clamp(200px,28vw,380px);aspect-ratio:4/5;border-radius:50% 50% 28px 28px / 40% 40% 28px 28px;
  border:1.5px solid var(--ar-line);outline:1.5px solid var(--ar-line);outline-offset:14px;opacity:.9;
  animation:arDrift 22s ease-in-out infinite alternate;animation-play-state:paused}
.section.is-vis::after{animation-play-state:running}
@keyframes arDrift{from{transform:translate3d(0,0,0) rotate(-1.5deg)}to{transform:translate3d(0,-18px,0) rotate(1.5deg)}}
#shop::after{right:-5%;top:-12%}#ritual::after{left:-4%;bottom:-20%}#ingredients::after{right:-6%;top:-18%}#quiz::after{left:-5%;top:-14%}
#reviews::after{right:-5%;bottom:-22%}#join::after{left:-4%;bottom:-24%}#faq::after{right:-6%;top:-10%}
.eyebrow::before{content:"";display:inline-block;width:22px;height:1px;margin-right:10px;vertical-align:.28em;background:currentColor;opacity:.7}
.section-head.center .eyebrow::after{content:"";display:inline-block;width:22px;height:1px;margin-left:10px;vertical-align:.28em;background:currentColor;opacity:.7}

/* ritual: steps step in on every switch, hover nudges */
.steps:not([hidden]) .step{animation:arStepIn .6s var(--nxp-reveal) backwards}
.steps:not([hidden]) .step:nth-child(2){animation-delay:.08s}.steps:not([hidden]) .step:nth-child(3){animation-delay:.16s}
@keyframes arStepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.step{transition:transform .35s var(--nxp-soft),box-shadow .35s ease}
.step-n{transition:transform .4s var(--nxp-soft)}
@media (hover:hover){.step:hover{transform:translateX(6px);box-shadow:0 22px 40px -28px rgba(59,42,40,.35)}.step:hover .step-n{transform:rotate(-8deg) scale(1.08)}}

/* ingredients: art breathes, card swaps with a pop */
.ing-art{animation:arBreath 9s ease-in-out infinite alternate;animation-play-state:paused}
#ingredients.is-vis .ing-art{animation-play-state:running}
.ing-card.ar-swap>:not(.ing-art){animation:arStepIn .5s var(--nxp-reveal) backwards}
.ing-card.ar-swap .ing-art svg{animation:arPop .7s cubic-bezier(.34,1.56,.64,1)}
@keyframes arPop{from{transform:scale(.86) rotate(-6deg);opacity:.4}to{transform:none;opacity:1}}
.ing-dot{transition:transform .35s var(--nxp-soft)}
@media (hover:hover){.ing:hover .ing-dot{transform:scale(1.15)}}

/* quiz: progress ribbon, options step in, result pops */
.quiz-card{position:relative;overflow:hidden}
.quiz-card::before{content:"";position:absolute;left:0;top:0;right:0;height:5px;background:linear-gradient(90deg,var(--rose),var(--sage));transform-origin:left;transform:scaleX(.34);transition:transform .7s var(--nxp-reveal)}
.quiz-card:has(#q2.is-on)::before{transform:scaleX(.67)}
.quiz-card:has(#q3.is-on)::before{transform:scaleX(1)}
.quiz-step.is-on{animation:arStepIn .5s var(--nxp-reveal)}
.quiz-step.is-on .opt{animation:arStepIn .5s var(--nxp-reveal) backwards}
.quiz-step.is-on .opt:nth-child(2){animation-delay:.06s}.quiz-step.is-on .opt:nth-child(3){animation-delay:.12s}.quiz-step.is-on .opt:nth-child(4){animation-delay:.18s}
#q3.is-on .result-art svg{animation:arPop .7s cubic-bezier(.34,1.56,.64,1)}

/* reviews, faq, join, footer */
.rating-line{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;margin:-22px 0 40px;font-size:.95rem;color:var(--muted)}
.rating-line strong{font-size:1.15rem;color:var(--cocoa)}.rating-line strong i{font-style:normal}
.review{position:relative;transition:transform .4s var(--nxp-soft),box-shadow .4s ease}
.review::before{content:"\201C";position:absolute;top:8px;right:24px;font:400 7rem/1 var(--font-display);color:rgba(196,115,124,.15);pointer-events:none}
@media (hover:hover){.review:hover{transform:translateY(-6px);box-shadow:0 30px 50px -34px rgba(59,42,40,.4)}}
.faq summary{transition:color .25s ease}
.faq summary:hover{color:var(--rose-dark)}
@supports (interpolate-size:allow-keywords){
  .faq{interpolate-size:allow-keywords}
  .faq::details-content{block-size:0;overflow:clip;transition:block-size .45s var(--nxp-reveal),content-visibility .45s allow-discrete}
  .faq[open]::details-content{block-size:auto}
}
.signup-row{transition:border-color .2s ease,box-shadow .3s ease}
.signup-row:focus-within{box-shadow:0 0 0 4px rgba(196,115,124,.18)}
.site-footer{position:relative;overflow:hidden}
.nxp-mark{margin-top:44px;margin-bottom:-.1em;letter-spacing:.01em;font-weight:400;line-height:1;font-size:clamp(44px,calc((min(100vw,1200px) - 80px) / var(--mark-k)),290px)}
.footer-grid .brand-foot{font-size:2rem;padding:0}
@media (max-width:640px){.section::after{outline-offset:10px}.rating-line{margin:-14px 0 30px}}
@media (prefers-reduced-motion:reduce){.hero-circle,.arch-hero::after,.section::after,.ing-art{animation:none}.quiz-card::before{transition:none}}