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

/* =====================================================================
   VERDE PHARMACY — theme + upgrades for the shared polish layer
   Clean-clinic warmth: mint orbs, drifting plus-signs, live "pings", a draw-in refill timeline,
   count-up prices and a teal marquee band. Soft, rounded, calm.
   ===================================================================== */
:root{
  --nxp-a:#0b8f7e;--nxp-b:#12b39c;
  --nxp-orb-a:rgba(18,179,156,.2);--nxp-orb-b:rgba(241,162,43,.1);
  --nxp-prog:linear-gradient(90deg,#12b39c,#0b8f7e);
  --nxp-spot:rgba(11,143,126,.13);
  --nxp-top-bg:#0a3d38;--nxp-top-fg:#fff;
  --mq-bg:#0a3d38;--mq-fg:#d6efe8;--mq-dot:#7ee0c9;--mq-line:rgba(255,255,255,.08);
  --mq-font:'Figtree',sans-serif;
  --nxp-mark-font:'Figtree',sans-serif;
  --nxp-mark-fill:linear-gradient(180deg,rgba(126,224,201,.3),rgba(126,224,201,0) 84%);
  --mark-k:4.7;
}
.nxp-mq-set span{font-weight:700;font-size:.82rem}

/* header */
.primary-nav a.nxp-active{background:var(--mint);color:var(--teal-dark)}

/* hero: mint orbs, drifting plus-signs and capsules, live pings */
.nxp-p{width:var(--s,16px);height:var(--s,16px);border-radius:0;background:none;filter:none}
.nxp-p::before,.nxp-p::after{content:"";position:absolute;background:var(--teal);border-radius:3px;opacity:.28}
.nxp-p::before{left:36%;right:36%;top:0;bottom:0}
.nxp-p::after{top:36%;bottom:36%;left:0;right:0}
.nxp-p:nth-child(3n)::before,.nxp-p:nth-child(3n)::after{background:var(--coral);opacity:.22}
.nxp-p:nth-child(4n+1){border-radius:50%;border:2px solid rgba(11,143,126,.3)}
.nxp-p:nth-child(4n+1)::before,.nxp-p:nth-child(4n+1)::after{display:none}
.dot{position:relative}
.dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #22c55e;opacity:0;animation:vdPing 2.6s ease-out infinite;animation-play-state:paused}
.hero.is-vis .dot::after{animation-play-state:running}
.live-dot::before{content:"";position:absolute;inset:6px;border-radius:50%;border:2px solid var(--teal);opacity:0;animation:vdPing 2.6s ease-out infinite;animation-play-state:paused}
.hero.is-vis .live-dot::before{animation-play-state:running}
@keyframes vdPing{0%{transform:scale(.6);opacity:.75}100%{transform:scale(1.9);opacity:0}}
.hero h1 .hl{background-size:100% 100%}

/* quick actions, cards, steps */
.q-ico,.s-ico,.c-ico{transition:transform .45s var(--nxp-soft),background .25s ease,color .25s ease}
@media (hover:hover){.quick-card:hover .q-ico,.service:hover .s-ico{transform:translateY(-3px) rotate(-6deg) scale(1.08)}}
.service,.person,.quote,.pack{overflow:visible}
.steps::before{transform-origin:left;transform:scaleX(0);transition:transform 1.5s var(--nxp-reveal) .3s}
.steps.nxp-in::before{transform:scaleX(1)}
html:not(.nxp) .steps::before{transform:none}
html.nxp .step[data-nxp] .step-num{transform:scale(.6);transition:transform .7s var(--nxp-soft) calc(var(--d,0s) + .25s)}
html.nxp .step.nxp-in .step-num{transform:none}
.step-num{transition:transform .5s var(--nxp-soft)}
@media (hover:hover){.step:hover .step-num{transform:scale(1.1) rotate(-6deg)}}

/* packages: the featured card keeps its -10px lift, so its entrance ends exactly there */
@keyframes vdFeat{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:translateY(-10px)}}
html.nxp .pack-featured[data-nxp="lift"].nxp-in{animation-name:vdFeat}
.price i{font-style:normal}
.pack{transition:transform .35s var(--nxp-soft),box-shadow .35s ease}
@media (hover:hover){.pack:not(.pack-featured):hover{transform:translateY(-5px);box-shadow:var(--shadow)}}
.pack-badge{box-shadow:0 8px 18px -8px rgba(255,107,87,.8)}

/* reviews, FAQ, refill */
.quote{transition:transform .35s var(--nxp-soft),border-color .3s ease}
@media (hover:hover){.quote:hover{transform:translateY(-4px);border-color:rgba(126,224,201,.45)}}
.section-cta.is-vis::before{animation:vdFloat 20s ease-in-out infinite alternate}
@keyframes vdFloat{from{transform:translate3d(0,0,0)}to{transform:translate3d(-60px,50px,0) scale(1.12)}}
@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}
}
.hours-table tr.today{background:linear-gradient(90deg,rgba(11,143,126,.08),transparent)}
.site-footer{position:relative;overflow:hidden}
.nxp-mark{margin-top:44px}
@media (prefers-reduced-motion:reduce){.steps::before{transform:none}.dot::after,.live-dot::before,.section-cta::before{animation:none}}