/* ==========================================================================
   Motion layer · Dr. Oscar Demorizi
   Slow, premium transitions. Everything is gated behind html.mx so the page
   reads fine without JS, and html[data-motion="off"] (reduced motion) skips it.
   Reveal motion uses the individual translate / scale / rotate properties so
   it composes with the design's own inline transforms.
   ========================================================================== */

:root{
  --mx-ease:cubic-bezier(.16,1,.3,1);          /* expo out */
  --mx-ease-io:cubic-bezier(.77,0,.18,1);      /* quart in-out */
  --mx-ease-back:cubic-bezier(.22,1,.36,1);    /* quint out, no overshoot */
  --mx-d:1.5s;
}
html,body{overflow-x:clip}
html{scroll-behavior:auto}

/* ---------- Loader / curtain ---------- */
.mx-loader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#0E0A07;
  clip-path:inset(0 0 0 0);transition:clip-path 1.5s var(--mx-ease-io)}
.mx-loader.out{clip-path:inset(0 0 100% 0)}
.mx-loader-in{display:flex;flex-direction:column;align-items:center;gap:26px;transition:opacity .9s ease,translate 1.5s var(--mx-ease-io)}
.mx-loader.out .mx-loader-in{opacity:0;translate:0 -60px}
.mx-loader img{width:92px;height:auto;opacity:0;scale:.7;filter:blur(10px);animation:mxLogo 1.4s var(--mx-ease) .15s forwards}
.mx-loader-bar{width:180px;height:1px;background:rgba(214,190,130,.18);overflow:hidden;border-radius:1px}
.mx-loader-bar i{display:block;height:100%;width:100%;transform-origin:left;scale:0 1;background:linear-gradient(90deg,#A08550,#FBF3D2,#C8AE74);animation:mxBar 1.6s var(--mx-ease-io) .3s forwards}
.mx-loader-txt{font:600 10px/1 Manrope,sans-serif;letter-spacing:.6em;color:#BFB3A0;text-transform:uppercase;opacity:0;animation:mxFade 1.2s ease .6s forwards}
@keyframes mxLogo{to{opacity:1;scale:1;filter:blur(0)}}
@keyframes mxBar{to{scale:1 1}}
@keyframes mxFade{to{opacity:1}}

/* ---------- Scroll progress ---------- */
.mx-progress{position:fixed;left:0;top:0;right:0;height:2px;z-index:9000;pointer-events:none;transform-origin:left;scale:var(--mx-p,0) 1;
  background:linear-gradient(90deg,#A08550,#E8DBAE 40%,#FBF3D2 60%,#C8AE74);box-shadow:0 0 12px rgba(232,219,174,.6)}

/* ---------- Generic reveal ---------- */
html.mx .mx-r{transition-property:opacity,translate,scale,rotate,filter,clip-path,letter-spacing;transition-duration:var(--mx-d);transition-timing-function:var(--mx-ease);transition-delay:var(--mx-delay,0s)}
html.mx .mx-r:not(.in){opacity:0}
html.mx .mx-up:not(.in){translate:0 56px}
html.mx .mx-fade:not(.in){filter:blur(10px);translate:0 24px}
html.mx .mx-left:not(.in){translate:-80px 0}
html.mx .mx-right:not(.in){translate:80px 0}
html.mx .mx-zoom:not(.in){scale:.86}
html.mx .mx-card{transition:opacity 1.6s ease var(--mx-delay,0s),translate 1.6s var(--mx-ease) var(--mx-delay,0s),scale 1.6s var(--mx-ease) var(--mx-delay,0s),rotate 1.6s var(--mx-ease) var(--mx-delay,0s),transform .9s var(--mx-ease),box-shadow .8s ease,border-color .8s ease}
html.mx .mx-card:not(.in){translate:0 90px;scale:.94;rotate:1.2deg}
html.mx .mx-card:nth-child(even):not(.in){rotate:-1.2deg}

/* Eyebrows: tracking settles + blur */
html.mx .mx-eyebrow{transition-duration:1.8s}
html.mx .mx-eyebrow:not(.in){letter-spacing:.85em;filter:blur(6px)}

/* Decorative line before eyebrow */
html.mx .mx-line{transform-origin:left;transition:scale 1.6s var(--mx-ease) var(--mx-delay,0s)}
html.mx .mx-line:not(.in){scale:0 1}

/* ---------- Titles split into words ---------- */
.mx-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .16em 0;margin:0 -.08em -.16em 0}
.mx-wi{display:inline-block;will-change:translate}
html.mx .mx-title .mx-wi{transition:translate 1.6s var(--mx-ease),rotate 1.6s var(--mx-ease),opacity 1.2s ease;transition-delay:calc(var(--mx-delay,0s) + var(--i,0) * 85ms)}
html.mx .mx-title:not(.in) .mx-wi{translate:0 115%;rotate:5deg;opacity:0}
.mx-title em.mx-em{background:none!important;color:inherit!important;-webkit-background-clip:border-box!important;background-clip:border-box!important}
.mx-w.gold-text,.mx-w.silver-text,.mx-w.gold-deep{color:transparent}
.mx-w.gold-text .mx-wi,.mx-w.silver-text .mx-wi,.mx-w.gold-deep .mx-wi{color:transparent}
/* each word carries the gradient; text-fill on the inner span */
.mx-wi.gold-text,.mx-wi.silver-text,.mx-wi.gold-deep{background-size:220% 100%;animation:mxShine 7s ease-in-out infinite}
@keyframes mxShine{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ---------- Pills (buttons, tags, chips) ---------- */
html.mx .mx-pill{transition:clip-path 1.5s var(--mx-ease) var(--mx-delay,0s),opacity 1s ease var(--mx-delay,0s),translate 1.5s var(--mx-ease) var(--mx-delay,0s)}
html.mx .mx-pill:not(.in){clip-path:inset(0 calc(50% - 27px) 0 calc(50% - 27px) round 999px);opacity:0;translate:0 26px}
html.mx .mx-pill.in{clip-path:inset(-20px -20px -20px -20px round 999px)}
html.mx .mx-pill .bi{transition:rotate 1.4s var(--mx-ease-back),scale 1.4s var(--mx-ease-back);transition-delay:calc(var(--mx-delay,0s) + .35s)}
html.mx .mx-pill:not(.in) .bi{rotate:-140deg;scale:.3}
html.mx .mx-pill .mx-lbl{display:inline-block;transition:opacity 1.1s ease,translate 1.3s var(--mx-ease);transition-delay:calc(var(--mx-delay,0s) + .5s)}
html.mx .mx-pill:not(.in) .mx-lbl{opacity:0;translate:16px 0}
/* After the reveal, return clip-path control to nothing so hover shine/shadows aren't cut */
html.mx .mx-pill.done{clip-path:none;transition:transform .3s ease,box-shadow .3s ease,filter .3s ease,translate .6s var(--mx-ease)}
.btn .bi svg{transition:rotate .7s var(--mx-ease-back),scale .7s var(--mx-ease-back)}
.btn:hover .bi svg{rotate:-12deg;scale:1.15}
.btn{transition:transform .5s var(--mx-ease),box-shadow .5s ease,filter .5s ease,translate .6s var(--mx-ease)}
.btn:hover{box-shadow:inset 0 1px 0 rgba(255,250,230,.75),0 22px 40px -18px rgba(214,190,130,.7)}

/* ---------- Icons ---------- */
html.mx .mx-ic{transition:opacity 1s ease var(--mx-delay,0s),scale 1.5s var(--mx-ease-back) var(--mx-delay,0s),rotate 1.5s var(--mx-ease-back) var(--mx-delay,0s),filter 1.2s ease var(--mx-delay,0s),transform .6s var(--mx-ease-back),box-shadow .6s ease}
html.mx .mx-ic:not(.in){opacity:0;scale:.35;rotate:-35deg;filter:blur(4px)}
html.mx .mx-ic svg .mx-draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 2s var(--mx-ease-io);transition-delay:calc(var(--mx-delay,0s) + .35s + var(--j,0) * 120ms)}
html.mx .mx-ic.in svg .mx-draw{stroke-dashoffset:0}
.ic{transition:transform .6s var(--mx-ease-back),box-shadow .6s ease}
.ic svg{transition:rotate .8s var(--mx-ease-back),scale .8s var(--mx-ease-back)}
article:hover .ic,figure:hover .ic,.route-step:hover .ic,.ic:hover{transform:translateY(-4px) rotate(-6deg)}
article:hover .ic svg,figure:hover .ic svg,.ic:hover svg{scale:1.12;rotate:6deg}
/* gentle idle float for small hero icons once revealed */
html.mx .mx-float.in{animation:mxFloat 5.5s ease-in-out infinite;animation-delay:var(--fd,0s)}
@keyframes mxFloat{0%,100%{translate:0 0}50%{translate:0 -6px}}

/* ---------- Image frames: curtain + settle ---------- */
html.mx .mx-frame{transition:clip-path 1.9s var(--mx-ease-io) var(--mx-delay,0s),opacity .6s ease var(--mx-delay,0s)}
html.mx .mx-frame:not(.in){clip-path:inset(100% 0 0 0 round 24px)}
html.mx .mx-frame.in{clip-path:inset(0 0 0 0 round 0)}
html.mx .mx-frame.done{clip-path:none}
html.mx .mx-frame img{transition:scale 2.6s var(--mx-ease) var(--mx-delay,0s),filter 2s ease var(--mx-delay,0s)}
html.mx .mx-frame:not(.in) img{scale:1.35;filter:saturate(.4) brightness(.8)}
.mx-hoverzoom{overflow:hidden}
.mx-hoverzoom img{transition:scale 1.4s var(--mx-ease)!important}
.mx-hoverzoom:hover img{scale:1.07}

/* ---------- Hero ---------- */
html.mx .mx-hero{transition:opacity 1.4s ease,translate 1.8s var(--mx-ease),scale 1.8s var(--mx-ease),filter 1.6s ease,clip-path 2s var(--mx-ease-io);transition-delay:var(--mx-delay,0s)}
html.mx body:not(.mx-go) .mx-hero-nav{opacity:0;translate:0 -40px;scale:.96}
html.mx body:not(.mx-go) .mx-hero-doc{opacity:0;translate:0 120px;filter:blur(12px)}
html.mx body:not(.mx-go) .mx-hero-glow{opacity:0;scale:.6}
html.mx body:not(.mx-go) .mx-hero-ring{opacity:0;scale:.7;rotate:-30deg}
html.mx body:not(.mx-go) .mx-hero-wm{opacity:0;translate:120px 0}
html.mx body:not(.mx-go) .mx-hero-card{opacity:0;translate:-60px 0;filter:blur(8px)}
html.mx .mx-hero-ring{transition-property:opacity,scale,rotate}
.mx-hero-ring{animation:mxRingPulse 6s ease-in-out 3s infinite}
@keyframes mxRingPulse{0%,100%{box-shadow:0 0 0 14px rgba(241,212,137,.05)}50%{box-shadow:0 0 0 26px rgba(241,212,137,.08),0 0 60px rgba(241,212,137,.12)}}

/* ---------- Badges (rotating seals) ---------- */
html.mx .mx-badge{transition:opacity 1.2s ease,scale 1.8s var(--mx-ease-back),rotate 2s var(--mx-ease);transition-delay:var(--mx-delay,0s)}
html.mx .mx-badge:not(.in){opacity:0;scale:.3;rotate:-200deg}

/* ---------- Ribbons ---------- */
.rb-a{translate:calc(var(--rb,0) * -5%) 0}
.rb-b{translate:calc(var(--rb,0) * 5%) 0}
html.mx .rb-wrap .rb{transition:opacity 1.6s ease,scale 1.8s var(--mx-ease),translate .4s linear}
html.mx .rb-wrap:not(.in) .rb{opacity:0;scale:1.08 .2}
html.mx .rb-wrap .rb-b{transition-delay:.25s,.25s,0s}

/* ---------- Rounded sections: card-stack entrance ---------- */
.mx-sec{transform-origin:50% 0;will-change:scale}
html.mx .mx-sec{scale:calc(.93 + .07 * var(--sp,1)) 1;border-top-left-radius:calc(56px + 64px * (1 - var(--sp,1)))!important;border-top-right-radius:calc(56px + 64px * (1 - var(--sp,1)))!important}

/* ---------- Doctor collage ---------- */
html.mx .mx-bar{transform-origin:left;transition:scale 1.8s var(--mx-ease-io) var(--mx-delay,0s)}
html.mx .mx-bar:not(.in){scale:0 1}
html.mx .mx-bar-r{transform-origin:right}

/* ---------- Process steps: top rule draws ---------- */
.mx-step{position:relative;border-top-color:transparent!important}
.mx-step::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,#E2BC62,rgba(226,188,98,.25));transform-origin:left;transition:scale 1.8s var(--mx-ease-io) var(--mx-delay,0s)}
html.mx .mx-step:not(.in)::before{scale:0 1}
.mx-num{display:inline-block}
html.mx .mx-step .mx-num{transition:opacity 1.4s ease,translate 1.8s var(--mx-ease),filter 1.4s ease;transition-delay:calc(var(--mx-delay,0s) + .25s)}
html.mx .mx-step:not(.in) .mx-num{opacity:0;translate:0 40px;filter:blur(8px)}

/* ---------- Cards hover: lift + spotlight ---------- */
.card-l,.card-d{transition:box-shadow .8s ease,border-color .8s ease}
.mx-tilt{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .9s var(--mx-ease),box-shadow .8s ease,border-color .8s ease}
.card-l:hover{box-shadow:0 34px 60px -30px rgba(60,40,10,.45)}
.card-d{position:relative}
.card-d::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .8s ease;
  background:radial-gradient(320px 240px at var(--mx-x,50%) var(--mx-y,50%),rgba(241,212,137,.14),rgba(241,212,137,0) 70%)}
.card-d:hover::after{opacity:1}
.card-d:hover{border-color:rgba(214,169,69,.5)}
html.mx .card-l{animation:none!important}

/* ---------- Treatment route (JS-driven, replaces the scroll-timeline version) ---------- */
html.mx .mx-route .route-fill,html.mx .mx-route .route-head,html.mx .mx-route .route-step,html.mx .mx-route .route-step::before{animation:none!important}
.mx-route .route-fill{transform:scaleY(0);transform-origin:top}
.mx-route .route-head{top:0;transition:opacity .6s ease}
.mx-route .route-step{opacity:.38;translate:0 0;transition:opacity 1.1s var(--mx-ease),translate 1.3s var(--mx-ease)}
.mx-route .route-step.on{opacity:1;translate:8px 0}
.mx-route .route-step::before{background:#F6EFE3;border-color:#D4C4A4;box-shadow:none;scale:.8;transition:background .9s ease,border-color .9s ease,box-shadow 1s ease,scale 1s var(--mx-ease-back)}
.mx-route .route-step.on::before{background:#C8AE74;border-color:#E6D4A0;scale:1.15;box-shadow:0 0 0 6px rgba(200,174,116,.22),0 0 16px rgba(200,174,116,.9)}
.mx-route .route-step .ic{filter:grayscale(.85) brightness(1.08);scale:.86;transition:filter 1s ease,scale 1.2s var(--mx-ease-back),rotate 1.2s var(--mx-ease-back),transform .6s var(--mx-ease-back)}
.mx-route .route-step.on .ic{filter:none;scale:1;rotate:0deg;animation:mxStepPop 1.2s var(--mx-ease-back)}
.mx-route .route-step .route-n{transition:color 1s ease,letter-spacing 1.2s var(--mx-ease)}
.mx-route .route-step:not(.on) .route-n{color:#BFB09A;letter-spacing:.12em}
@keyframes mxStepPop{0%{rotate:-18deg}60%{rotate:6deg}100%{rotate:0deg}}

/* ---------- Carousel ---------- */
html.mx .mx-track{transition:transform 1.4s var(--mx-ease-io)!important}
.slide .pn img{transition:scale 2.2s var(--mx-ease),filter 1.6s ease}
.slide:not(.is-on) .pn img{scale:1.14;filter:brightness(.7)}
.slide .cap{transition:opacity 1s ease,translate 1.3s var(--mx-ease),filter 1s ease}
.slide .pn+.pn .cap{transition-delay:.18s}
.slide.is-on .cap{transition-delay:.7s}
.slide.is-on .pn+.pn .cap{transition-delay:.9s}
.slide:not(.is-on) .cap{opacity:0;translate:0 24px;filter:blur(6px)}
.mx-dot-on{animation:mxPill 1s var(--mx-ease) both}
@keyframes mxPill{from{scale:.29 1;opacity:.4}to{scale:1 1;opacity:1}}
.mx-counter{display:inline-block;animation:mxCount .9s var(--mx-ease) both}
@keyframes mxCount{from{opacity:0;translate:0 10px;filter:blur(4px)}to{opacity:1;translate:0 0;filter:none}}

/* ---------- FAQ ---------- */
details.faq p{overflow:hidden}
details.faq .pl{transition:transform .9s var(--mx-ease-back),box-shadow .6s ease}
details.faq summary:hover .pl{box-shadow:0 0 0 6px rgba(241,212,137,.12)}
details.faq summary{transition:color .5s ease,translate .7s var(--mx-ease)}
details.faq summary:hover{color:#F1D489;translate:12px 0}

/* ---------- Map ---------- */
html.mx .mx-map .map-road{transition:scale 2s var(--mx-ease-io),opacity 1s ease}
html.mx .mx-map:not(.in) .map-road{scale:0 1;opacity:0}
html.mx .mx-map .map-road:nth-of-type(n+3){transform-origin:50% 0}
html.mx .mx-map:not(.in) .map-road:nth-of-type(n+3){scale:1 0}
html.mx .mx-map .map-road:nth-of-type(2){transition-delay:.2s}
html.mx .mx-map .map-road:nth-of-type(3){transition-delay:.4s}
html.mx .mx-map .map-road:nth-of-type(4){transition-delay:.6s}
html.mx .mx-map .pin3d,html.mx .mx-map .pin-shadow,html.mx .mx-map .pin-ring{transition:translate 1.6s var(--mx-ease-back) .9s,opacity 1s ease .9s}
html.mx .mx-map:not(.in) .pin3d{translate:0 -160px;opacity:0}
html.mx .mx-map:not(.in) .pin-shadow,html.mx .mx-map:not(.in) .pin-ring{opacity:0}

/* ---------- Nav links underline ---------- */
.nav-links a{position:relative;transition:color .5s ease}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:linear-gradient(90deg,#E2BC62,#FBF3D2);transform-origin:right;scale:0 1;transition:scale .7s var(--mx-ease)}
.nav-links a:hover::after{transform-origin:left;scale:1 1}

/* ---------- Reduced motion: show everything, no movement ---------- */
html[data-motion="off"] .mx-loader{display:none}
html[data-motion="off"] *{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}

/* ---------- Responsive fix: doctor collage ----------
   The design sizes this collage in fixed px for a 1440 artboard, so below that
   the 934px portrait rose over the previous section. Same layout, expressed as
   proportions of the 1 / 1.08 frame (values measured at 1440). */
@media (max-width:1199px){
  #doctor img[src*="0b5a3aa4"]{height:121.6%!important;width:auto!important;max-width:none!important;left:46.5%!important}
  #doctor .gray-ph[style*="left: -97px"]{left:-2%!important;top:15.4%!important}
  #doctor .gray-ph[style*="right: 38px"]{right:2%!important;top:-8.7%!important}
  #doctor .col-bar[style*="left: -111px"]{left:-6%!important;top:12%!important;width:34%!important}
  #doctor .col-bar[style*="right: 24px"]{right:2%!important;top:45%!important}
  #doctor .badge[style*="left: 57px"]{left:8.6%!important;top:18%!important;width:24.5%!important;height:auto!important}
}
@media (max-width:1199px) and (min-width:721px){
  #doctor{padding-top:190px!important}
}
@media (max-width:720px){
  #doctor{padding-top:120px!important}
}