/* Dr. Katie Calvo — motion layer
   Purely decorative: reveal-on-scroll, cursor follower, magnetic buttons, card tilt + glare,
   spotlight on dark panels, molecular canvas in the heroes, scroll progress.
   Everything here is opt-in through the `motion` class that js/motion.js puts on <html>,
   and all of it is switched off for visitors who ask for reduced motion. */

/* ── Scroll progress ── */
.mo-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:1001;pointer-events:none;
  background:linear-gradient(90deg,var(--champ) 0%,var(--champ-l) 60%,#fff 100%);
  transform-origin:0 50%;transform:scaleX(var(--mo-progress,0));opacity:.9}

/* ── Reveal on scroll ── */
.motion [data-reveal]{opacity:0;transform:translate3d(0,28px,0);
  transition:opacity .9s cubic-bezier(.2,.65,.2,1),transform .9s cubic-bezier(.2,.65,.2,1);
  transition-delay:var(--mo-delay,0ms);will-change:opacity,transform}
.motion [data-reveal="fade"]{transform:none}
.motion [data-reveal="left"]{transform:translate3d(-36px,0,0)}
.motion [data-reveal="right"]{transform:translate3d(36px,0,0)}
.motion [data-reveal="zoom"]{transform:scale(.96)}
.motion [data-reveal].in{opacity:1;transform:none}
/* Items that are also magnetic or tilting use the reveal timing until they are in view */
.motion [data-reveal][data-magnetic]:not(.in),.motion [data-reveal][data-tilt]:not(.in){
  transition:opacity .9s cubic-bezier(.2,.65,.2,1),transform .9s cubic-bezier(.2,.65,.2,1);transition-delay:var(--mo-delay,0ms)}
/* Headlines unmask upwards */
.motion [data-reveal="mask"]{opacity:0;transform:none;transition:none}
.motion [data-reveal="mask"].in{opacity:1;animation:mo-unmask 1.1s cubic-bezier(.7,0,.2,1) var(--mo-delay,0ms) backwards}
/* the clip only exists while animating, so italic descenders are never cut afterwards */
@keyframes mo-unmask{from{clip-path:inset(0 0 100% 0);transform:translateY(18px)}to{clip-path:inset(0 0 0 0);transform:none}}
/* Champagne accent line under section eyebrows draws in */
.motion .eyebrow[data-reveal]::before{transform:scaleX(0);transform-origin:0 50%;transition:transform .8s .25s cubic-bezier(.2,.65,.2,1)}
.motion .eyebrow[data-reveal].in::before{transform:scaleX(1)}

/* ── Cursor follower (fine pointers only; the native cursor stays) ── */
.mo-cursor,.mo-cursor-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:1002;border-radius:50%;opacity:0;transition:opacity .3s}
.mo-cursor{width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(184,160,122,.75);
  transition:opacity .3s,width .3s,height .3s,margin .3s,background .3s,border-color .3s}
.mo-cursor-dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--champ)}
.mo-cursor.on,.mo-cursor-dot.on{opacity:1}
.mo-cursor.hover{width:62px;height:62px;margin:-31px 0 0 -31px;background:rgba(205,185,151,.12);border-color:rgba(205,185,151,.9)}
.mo-cursor.down{width:24px;height:24px;margin:-12px 0 0 -12px}

/* ── Buttons: shine sweep + magnetic pull (transform set by JS) ── */
/* clip-path instead of overflow:hidden, which would move the inline-block baseline */
.motion .btn,.motion .nav-book,.motion .dose-cta{position:relative;clip-path:inset(0)}
.motion .btn::after,.motion .nav-book::after,.motion .dose-cta::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.28) 50%,transparent 100%);transform:skewX(-20deg);transition:left .7s cubic-bezier(.2,.65,.2,1)}
.motion .btn:hover::after,.motion .nav-book:hover::after,.motion .dose-cta:hover::after{left:140%}
.motion [data-magnetic]{transition:transform .35s cubic-bezier(.2,.65,.2,1),background .25s,color .25s,border-color .25s,box-shadow .25s}

/* ── Card tilt with glare ── */
.motion [data-tilt]{position:relative;transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.65,.2,1),background .25s,box-shadow .5s}
.motion [data-tilt].tilting{transition:transform .12s linear,background .25s,box-shadow .5s;box-shadow:0 30px 60px -32px rgba(24,34,44,.45);z-index:2}
.mo-glare{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(205,185,151,.22),transparent 45%)}
[data-tilt].tilting>.mo-glare{opacity:1}

/* ── Spotlight that follows the mouse on dark panels ── */
.motion [data-spotlight]{position:relative;isolation:isolate}
.motion [data-spotlight]::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s;
  background:radial-gradient(600px circle at var(--sx,50%) var(--sy,50%),rgba(205,185,151,.11),transparent 55%)}
.motion [data-spotlight].lit::before{opacity:1}

/* ── Molecular canvas behind the heroes ── */
.motion .home-hero,.motion .page-hero{position:relative;isolation:isolate;overflow:hidden}
.mo-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.6s ease}
.mo-canvas.on{opacity:1}

/* ── Small living details ── */
.motion .trust-dot{animation:mo-pulse 2.8s ease-in-out infinite}
.motion .trust-item:nth-child(2) .trust-dot{animation-delay:.7s}
.motion .trust-item:nth-child(3) .trust-dot{animation-delay:1.4s}
.motion .trust-item:nth-child(4) .trust-dot{animation-delay:2.1s}
@keyframes mo-pulse{0%,100%{box-shadow:0 0 0 0 rgba(184,160,122,.55)}50%{box-shadow:0 0 0 6px rgba(184,160,122,0)}}

/* Placeholder panels get a slow light sweep so they read as "media coming" */
.motion .img-ph{position:relative;overflow:hidden}
.motion .hero-video .vph{overflow:hidden}
.motion .img-ph::after,.motion .hero-video .vph::after{content:"";position:absolute;inset:-50%;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%);animation:mo-sweep 6s ease-in-out infinite}
.motion .hero-video .vph::after{background:linear-gradient(115deg,transparent 40%,rgba(205,185,151,.09) 50%,transparent 60%)}
@keyframes mo-sweep{0%{transform:translateX(-60%)}55%,100%{transform:translateX(60%)}}
.motion .hero-video .vplay{animation:mo-ring 3s ease-out infinite}
@keyframes mo-ring{0%{box-shadow:0 0 0 0 rgba(205,185,151,.35)}70%,100%{box-shadow:0 0 0 22px rgba(205,185,151,0)}}

/* Parallax layers (transform set by JS) */
.motion [data-parallax]{will-change:transform;transition:transform .2s linear}

/* Glass navigation once the page scrolls */
@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)){
  .motion .sitenav.scrolled:not(.nav-dark){background:rgba(245,247,249,.82);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
  .motion .sitenav.nav-dark.scrolled{background:rgba(24,34,44,.86);-webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px)}
}

/* Dose calculator: zone glow breathes, active level pops */
.motion .dz-overlay{animation:mo-breathe 3.2s ease-in-out infinite}
@keyframes mo-breathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}
.motion .dose-level-btn{transition:all .18s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.motion .dose-level-btn.active{transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(205,185,151,.7)}
.motion .dose-dose-value.bump{animation:mo-bump .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes mo-bump{0%{transform:scale(1)}40%{transform:scale(1.08);color:var(--champ-l)}100%{transform:scale(1)}}

/* Section headline accent: the italic word gets a soft champagne sheen */
.motion .sec-title em,.motion .page-hero h1 em,.motion .home-hero h1 em{
  background:linear-gradient(100deg,currentColor 0%,currentColor 40%,var(--champ-l) 50%,currentColor 60%,currentColor 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:mo-sheen 7s ease-in-out infinite;
  padding-right:.08em;margin-right:-.08em} /* room for the italic overhang without changing line width */
@keyframes mo-sheen{0%,65%{background-position:100% 0}100%{background-position:-50% 0}}

@media (prefers-reduced-motion:reduce){
  .mo-cursor,.mo-cursor-dot,.mo-canvas,.mo-progress{display:none!important}
  .motion *{animation:none!important}
}
@media (hover:none),(pointer:coarse){.mo-cursor,.mo-cursor-dot{display:none}}