/* fmh-fx.css: vanilla port of the Magic UI effects used sitewide, plus the
   3D ripple buttons. Driven by assets/theme/fmh-fx.js (window.FMHFX), which
   adds the fmx-* classes and child layers. Stamped into every page except
   hair-simulator.html by tools/apply-theme.mjs (the fmh-fx block).
   Recipe: var(--ease) for state, transform/opacity for motion, every
   effect ends in its visible rest state under prefers-reduced-motion.
   ASCII only. */
:root{--fmx-ease:var(--ease,cubic-bezier(.22,1,.36,1));--fmx-spring:cubic-bezier(.34,1.56,.64,1);--fmx-gold:#d6b65c;--fmx-y:#ffed00;--fmx-cream:#f6f1dc}

/* off screen: every running loop holds still */
.fmx-paused,.fmx-paused *{animation-play-state:paused!important}

/* ---- Number Ticker ------------------------------------------------------ */
.fmx-ticker{font-variant-numeric:tabular-nums}

/* ---- Marquee ------------------------------------------------------------ */
.fmx-mq{overflow:hidden;--fmx-gap:2rem}
.fmx-mq-track{display:flex;width:max-content;animation:fmx-mq var(--fmx-speed,40s) linear infinite;will-change:transform}
.fmx-mq[data-reverse] .fmx-mq-track{animation-direction:reverse}
.fmx-mq-g{display:flex;flex-shrink:0;align-items:center;gap:var(--fmx-gap);padding-right:var(--fmx-gap)}
.fmx-mq-g>*{flex-shrink:0}
@media (hover:hover){.fmx-mq:hover .fmx-mq-track{animation-play-state:paused}}
@keyframes fmx-mq{to{transform:translate3d(var(--fmx-shift,-50%),0,0)}}

/* ---- Animated List ------------------------------------------------------ */
.fmx-list>*{opacity:0;transform:translateY(16px) scale(.96);transition:opacity 420ms var(--fmx-ease),transform 560ms var(--fmx-spring)}
.fmx-list>.fmx-in{opacity:1;transform:none}

/* ---- Text Animate (blur in) --------------------------------------------- */
.fmx-w{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(8px);transition:opacity 500ms var(--fmx-ease),filter 500ms var(--fmx-ease),transform 500ms var(--fmx-ease)}
.fmx-wd{display:inline-block;white-space:nowrap}
.fmx-text.fmx-in .fmx-w{opacity:1;filter:none;transform:none}
a .fmx-w,a .fmx-wd{text-decoration:inherit}

/* ---- Animated Shiny Text ------------------------------------------------ */
.fmx-shiny{background-image:linear-gradient(110deg,currentColor 42%,#fff3c4 50%,currentColor 58%);background-size:260% 100%;background-position:100% 0;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fmx-shiny.fmx-run{animation:fmx-shiny 6s var(--fmx-ease) infinite}
@keyframes fmx-shiny{0%{background-position:100% 0}22%,100%{background-position:0 0}}

/* ---- Aurora Text -------------------------------------------------------- */
.fmx-aurora{background-image:linear-gradient(135deg,#d6b65c,#fff3c4,#ffed00,#b8963f,#d6b65c);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:fmx-aurora 14s ease-in-out infinite}
@keyframes fmx-aurora{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}

/* ---- shared layer host: positioned, own stacking context ---------------- */
.fmx-host{isolation:isolate}
.fmx-layer{position:absolute;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden;z-index:-1}
/* ring = the border box minus the padding box (Border Beam / Shine Border) */
.fmx-ring{position:absolute;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden;padding:var(--fmx-bw,1.5px);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);z-index:2}
.fmx-spin{position:absolute;left:50%;top:50%;width:var(--fmx-d,600px);height:var(--fmx-d,600px);margin:calc(var(--fmx-d,600px) / -2) 0 0 calc(var(--fmx-d,600px) / -2);animation:fmx-spin var(--fmx-dur,8s) linear infinite;will-change:transform}
@keyframes fmx-spin{to{transform:rotate(360deg)}}

/* ---- Border Beam -------------------------------------------------------- */
.fmx-beam .fmx-spin{background:conic-gradient(from 0deg,transparent 0deg,transparent calc(360deg - var(--fmx-arc,40deg)),rgba(214,182,92,.0) calc(360deg - var(--fmx-arc,40deg)),#d6b65c calc(360deg - var(--fmx-arc,40deg) / 3),#ffed00 360deg)}

/* ---- Shine Border ------------------------------------------------------- */
.fmx-shine .fmx-spin{--fmx-dur:14s;background:conic-gradient(from 0deg,transparent 0deg,rgba(214,182,92,.85) 50deg,rgba(255,243,196,.9) 80deg,transparent 140deg,transparent 180deg,rgba(184,150,63,.8) 230deg,rgba(255,237,0,.7) 260deg,transparent 320deg)}

/* ---- Magic Card (spotlight) --------------------------------------------- */
.fmx-dot{position:absolute;left:0;top:0;width:var(--fmx-r,320px);height:var(--fmx-r,320px);border-radius:50%;opacity:0;transition:opacity 300ms var(--fmx-ease);will-change:transform}
.fmx-layer>.fmx-dot{background:radial-gradient(closest-side,rgba(214,182,92,.16),rgba(214,182,92,0))}
.fmx-ring>.fmx-dot{background:radial-gradient(closest-side,rgba(255,237,0,.9),rgba(214,182,92,0))}
.fmx-spot.fmx-on .fmx-dot{opacity:1}
.fmx-spot>.fmx-ring{padding:1px}

/* ---- Light Rays --------------------------------------------------------- */
.fmx-ray{position:absolute;top:-12%;height:70%;border-radius:999px;transform-origin:50% 0;background:linear-gradient(to bottom,rgba(214,182,92,.16),rgba(214,182,92,0));filter:blur(24px);opacity:0;transform:translateX(-50%) rotate(var(--r,0deg));animation:fmx-ray var(--d,14s) ease-in-out var(--dl,0s) infinite;will-change:transform,opacity}
.fmx-rays>.fmx-layer::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 0%,rgba(214,182,92,.07),transparent 60%)}
@keyframes fmx-ray{0%,100%{opacity:0;transform:translateX(-50%) rotate(calc(var(--r,0deg) - var(--s,1deg)))}50%{opacity:var(--o,.8);transform:translateX(-50%) rotate(calc(var(--r,0deg) + var(--s,1deg)))}}

/* ---- Highlighter: a marker swipe drawn left to right -------------------- */
.fmx-hl{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M1 5.5C18 3.6 40 4.8 60 3.9 76 3.3 89 4.6 99 3.2L98.6 16.4C83 17.6 63 15.9 44 16.9 27 17.7 12 16.3 1.6 17.4Z' fill='%23ffed00' fill-opacity='.42'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:0 60%;background-size:0% 88%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .12em;margin:0 -.12em;transition:background-size 900ms var(--fmx-ease)}
.fmx-hl.fmx-in{background-size:100% 88%}

/* ---- Particles ---------------------------------------------------------- */
.fmx-pcv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}

/* ---- confetti canvas ---------------------------------------------------- */
.fmx-confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:2147483000}

/* ======== buttons: 3D lift, ripple, interactive hover, shimmer ========== */
html:root body .fmx-btn:not(#_){position:relative;overflow:hidden;perspective:600px;-webkit-tap-highlight-color:transparent}
html:root body .fmx-btn:not(#_)>:is(.fmh-label,.fmx-label,.fmh-icon){position:relative;z-index:1}
html:root body .fmx-btn:not(#_) :is(.fmh-label,.fmx-wrap){display:inline-block}
html:root body .fmx-btn:not(#_) :is(.fmh-label,.fmx-label){transition:transform 180ms var(--fmx-ease),text-shadow 180ms var(--fmx-ease)}
/* ripple */
.fmx-rip{position:absolute;z-index:0!important;border-radius:50%;pointer-events:none;background:rgba(255,237,0,.25);transform:scale(0);opacity:1;animation:fmx-rip 600ms var(--fmx-ease) forwards}
.fmx-rip.fmx-on-y{background:rgba(255,255,255,.35)}
@keyframes fmx-rip{to{transform:scale(1);opacity:0}}
/* shimmer sweep on primaries every 5 s while idle */
.fmx-shim{position:absolute;inset:0;z-index:0!important;pointer-events:none;overflow:hidden;border-radius:inherit;transition:opacity 180ms var(--fmx-ease)}
.fmx-shim::before{content:'';position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-120%) skewX(-18deg);animation:fmx-shim 5s var(--fmx-ease) infinite}
@keyframes fmx-shim{0%{transform:translateX(-120%) skewX(-18deg)}22%,100%{transform:translateX(330%) skewX(-18deg)}}
/* consultation, contact, fue, results carry an inline .btn-gold::before shimmer of their own: the library one wins */
.fmx-btn.btn-gold::before{display:none}
/* interactive hover on secondaries: dot on the left fills, arrow slides in */
html:root body .fmx-sec:not(#_)::before{content:'';position:absolute;z-index:0;left:14px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--accent,#ffed00);transform:scale(0);transition:transform 420ms var(--fmx-ease)}
html:root body .fmx-sec:not(.fmx-noarrow):not(#_)::after{content:'\2192';position:absolute;z-index:1;right:12px;top:50%;margin-top:-.6em;line-height:1.2;color:var(--on-accent,#1a1a00);opacity:0;transform:translateX(-10px);transition:opacity 260ms var(--fmx-ease),transform 260ms var(--fmx-ease)}
@media (hover:hover){
  html:root body .fmx-btn:not(#_):not(:disabled):not([aria-disabled=true]):hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 18px 36px -14px rgba(214,150,40,.6),0 8px 16px -8px rgba(0,0,0,.55)!important}
  html:root body .fmx-btn:not(#_):not(:disabled):not([aria-disabled=true]):active{transform:translateY(-1px) scale(.97);transition-duration:120ms}
  html:root body .fmx-btn:not(#_):not(:disabled):hover :is(.fmh-label,.fmx-label){transform:translate3d(0,-2px,12px);text-shadow:0 6px 14px rgba(0,0,0,.45)}
  html:root body .fmx-btn:not(#_):hover>.fmx-shim{opacity:0}
  html:root body .fmx-sec:not(#_):hover{color:var(--on-accent,#1a1a00)!important;border-color:var(--accent,#ffed00)!important}
  html:root body .fmx-sec:not(#_):hover::before{transform:scale(110)}
  html:root body .fmx-sec:not(.fmx-noarrow):not(#_):hover::after{opacity:1;transform:none}
  html:root body .fmx-sec:not(.fmx-noarrow):not(#_):hover :is(.fmh-label,.fmx-label){transform:translate3d(-12px,-2px,12px);text-shadow:0 6px 14px rgba(0,0,0,.3)}
}

/* ---- reduced motion: final visible state, nothing moves ------------------ */
@media (prefers-reduced-motion:reduce){
  .fmx-mq{overflow-x:auto}
  .fmx-mq-track,.fmx-shiny.fmx-run,.fmx-aurora,.fmx-spin,.fmx-ray,.fmx-shim::before{animation:none!important}
  .fmx-list>*,.fmx-w{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .fmx-hl{background-size:100% 88%;transition:none}
  .fmx-ray,.fmx-shim,.fmx-rip{display:none}
  html:root body .fmx-btn:not(#_),html:root body .fmx-btn:not(#_) *,html:root body .fmx-btn:not(#_)::before,html:root body .fmx-btn:not(#_)::after{transition:none!important}
  html:root body .fmx-btn:not(#_):hover,html:root body .fmx-btn:not(#_):hover :is(.fmh-label,.fmx-label){transform:none!important}
}

/* price-card beam: softer light, longer tail, a slow breath and a glow so it reads as alive, not a hairline */
.pc-beam.fmx-beam{filter:drop-shadow(0 0 4px rgba(255,237,0,.55)) drop-shadow(0 0 12px rgba(214,182,92,.35));animation:fmx-breathe 4.8s ease-in-out infinite}
.pc-beam .fmx-ring{--fmx-bw:2px;--fmx-arc:150deg!important}
.pc-beam .fmx-spin{background:conic-gradient(from 0deg,transparent 0deg,transparent calc(360deg - var(--fmx-arc)),rgba(184,150,63,0) calc(360deg - var(--fmx-arc)),rgba(214,182,92,.35) calc(360deg - var(--fmx-arc) * .55),rgba(255,237,0,.8) 352deg,rgba(255,250,210,.95) 360deg)!important}
@keyframes fmx-breathe{0%,100%{opacity:.6}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.pc-beam.fmx-beam{animation:none;opacity:.8}}