/* Desert Chiropractic — Maloremi Motion layer. html.m-on = animations on, html.m-full = all effects. */

/* scroll progress */
.m-progressbar{position:fixed;left:0;top:0;height:3px;width:100%;z-index:100;transform-origin:left;transform:scaleX(var(--sp,0));background:linear-gradient(90deg,var(--dark),var(--accent),var(--accent));pointer-events:none}

/* ---------- hero ---------- */
.hero{isolation:isolate}
.m-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}
.m-glow{position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:0;transition:opacity .6s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(143,150,171,.25),transparent 60%)}
.m-full .hero:hover .m-glow{opacity:1}
.m-full .rays{transform-origin:200px 300px;animation:m-spin 60s linear infinite,m-fade 2.4s .6s both}
@keyframes m-spin{to{transform:rotate(360deg)}}
@keyframes m-fade{from{opacity:0}}
.m-full .sun{animation:sunrise 2.4s cubic-bezier(.2,.7,.2,1) both,m-breathe 6s 2.4s ease-in-out infinite}
@keyframes m-breathe{50%{transform:scale(1.05)}}
.m-full .bird{animation:m-fly 9s ease-in-out infinite}
.m-full .bird--2{animation-duration:12s;animation-delay:-4s}
@keyframes m-fly{0%{transform:translate(-30px,6px)}50%{transform:translate(40px,-8px)}100%{transform:translate(-30px,6px)}}
/* nerve pulse travelling down the spine */
.nerve{opacity:0}
.m-full .nerve{animation:m-nerve 3.2s 2.4s cubic-bezier(.45,0,.55,1) infinite;filter:drop-shadow(0 0 6px #ffd27a)}
.m-full .nerve--2{animation-delay:4s}
@keyframes m-nerve{0%{transform:translateY(0);opacity:0}10%{opacity:1}85%{opacity:1}100%{transform:translateY(270px);opacity:0}}
.m-full .nerve-line{animation:m-line 3.2s 2.4s ease-in-out infinite}
@keyframes m-line{0%,100%{opacity:0}50%{opacity:.35}}
/* the spine drifts out of line and snaps back every few seconds */
.m-full .vert{animation:align 1.1s cubic-bezier(.3,1.4,.5,1) both,m-realign 9s calc(4s + var(--i) * .05s) cubic-bezier(.3,1.4,.5,1) infinite;animation-delay:calc(1s + var(--i) * .09s),calc(4s + var(--i) * .05s)}
@keyframes m-realign{0%,78%,100%{transform:translateX(0)}84%{transform:translateX(calc(var(--off) * .7))}92%{transform:translateX(0)}}
.m-float{position:absolute;right:-8px;top:18%;display:flex;align-items:center;gap:8px;background:var(--black);color:#fff;font-weight:700;font-size:.82rem;padding:10px 14px;border-radius:999px;box-shadow:var(--shadow);z-index:2}
.m-float svg{width:18px;height:18px;fill:var(--accent)}
.m-full .m-float{animation:m-bob 5s ease-in-out infinite,m-pop .7s 1.6s cubic-bezier(.3,1.6,.5,1) both}
@keyframes m-bob{50%{transform:translateY(-10px) rotate(-2deg)}}
@keyframes m-pop{from{opacity:0;transform:scale(.4)}}
.m-full .hero__chip{animation:floaty 6s ease-in-out infinite,m-pop .7s 1.3s cubic-bezier(.3,1.6,.5,1) both}
.m-clock{width:18px;height:18px;fill:none;stroke:var(--dark);stroke-width:2;stroke-linecap:round;flex:none}
.m-full .m-clock__m{transform-origin:12px 12px;animation:m-spin 4s linear infinite}
.m-full .m-clock__h{transform-origin:12px 12px;animation:m-spin 48s linear infinite}
.m-full .dune--b{animation:m-drift2 18s ease-in-out infinite alternate}
@keyframes m-drift2{to{transform:translateX(16px)}}

/* word-by-word headings */
.m-on [data-split].reveal{opacity:1;transform:none}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.wi{display:inline-block;transform:translateY(105%) rotate(4deg);opacity:0;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .6s;transition-delay:calc(var(--wi) * 55ms)}
.in .wi,.in.wi,[data-split].in .wi{transform:none;opacity:1}
h1 em,h2 em{position:relative}
.m-on h1 em::after{display:none;content:"";position:absolute;left:0;right:0;bottom:-.06em;height:.16em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c40-6 80-8 120-4s56 2 76-2' stroke='%23f5a524' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") left/100% 100% no-repeat;clip-path:inset(0 100% 0 0);transition:clip-path 1s 1.1s cubic-bezier(.6,0,.2,1)}
.m-on h1.in em::after{clip-path:inset(0 0 0 0)}

/* reveal variants */
.m-on .reveal[data-reveal=left]{transform:translateX(-50px)}
.m-on .reveal[data-reveal=right]{transform:translateX(50px)}
.m-on .reveal[data-reveal=zoom]{transform:scale(.88) translateY(20px)}
.m-on .reveal.in[data-reveal]{transform:none}

/* buttons */
.m-full .btn{transition:transform .25s cubic-bezier(.3,1.4,.5,1),background .2s,box-shadow .2s}
.m-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:m-ripple .65s ease-out forwards;pointer-events:none}
.btn--ghost .m-ripple{background:rgba(22,25,30,.2)}
@keyframes m-ripple{to{transform:scale(4);opacity:0}}
.m-full .hero .btn--primary{animation:m-ping 3s 3s ease-out infinite}
@keyframes m-ping{0%{box-shadow:0 0 0 0 rgba(245,165,36,.55)}60%,100%{box-shadow:0 0 0 16px rgba(245,165,36,0)}}
.m-full .fab-call{animation:m-ring 4s 2s ease-in-out infinite}
@keyframes m-ring{0%,80%,100%{transform:rotate(0)}83%{transform:rotate(-10deg)}86%{transform:rotate(10deg)}89%{transform:rotate(-8deg)}92%{transform:rotate(6deg)}95%{transform:rotate(0)}}

/* tilt */
[data-tilt]{transform-style:preserve-3d;will-change:transform}
.m-full [data-tilt].in{transition:transform .35s ease,box-shadow .35s,opacity .8s}
[data-tilt] .m-shine{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(300px circle at var(--tx,50%) var(--ty,50%),rgba(255,255,255,.35),transparent 55%);opacity:0;transition:opacity .3s}
[data-tilt]:hover .m-shine{opacity:1}
.fact,.step,.rv,.about__photo{position:relative}

/* facts icons */
.m-full .fact.in svg{animation:m-icon .8s .3s cubic-bezier(.3,1.6,.5,1) both}
@keyframes m-icon{from{transform:scale(.3) rotate(-25deg)}}
.m-full .fact:hover svg{animation:m-wobble .6s ease}
@keyframes m-wobble{30%{transform:rotate(-12deg) scale(1.1)}60%{transform:rotate(8deg)}}

/* marquee */
.m-marquee{overflow:hidden;background:var(--ink);color:#fff;margin:56px 0 0;padding:14px 0;transform:rotate(-1.2deg);box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}
.m-marquee__track{display:flex;align-items:center;gap:28px;width:max-content;animation:m-marq 34s linear infinite;font:700 1.1rem/1 var(--head);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.m-marquee i{width:10px;height:10px;border-radius:50%;background:var(--accent);display:inline-block;flex:none}
.m-marquee:hover .m-marquee__track{animation-play-state:paused}
@keyframes m-marq{to{transform:translateX(-50%)}}
html:not(.m-full) .m-marquee__track{animation:none}

/* photo placeholder shimmer */
.m-full .ph{background-size:auto,200% 200%;animation:m-sheen 8s ease-in-out infinite alternate}
@keyframes m-sheen{to{background-position:0 0,100% 100%}}
.m-full .ph .mark{animation:m-bob 5s ease-in-out infinite}

/* explainer: off vertebra clicks into line when in view */
.m-full .explain.in .explain__art .off{animation:m-snap 4s 1s cubic-bezier(.3,1.6,.5,1) infinite}
@keyframes m-snap{0%,20%{transform:translateX(12px);background:var(--accent)}35%,80%{transform:translateX(0);background:var(--dark)}100%{transform:translateX(12px);background:var(--accent)}}

/* wave divider */
.visit{overflow:visible}
.m-wave{position:absolute;left:0;top:-39px;width:200%;height:40px;fill:var(--ink)}
.m-full .m-wave{animation:m-wave 16s linear infinite}
@keyframes m-wave{to{transform:translateX(-50%)}}
.visit>.wrap{position:relative}
.visit{background:radial-gradient(600px 300px at var(--vx,80%) 0%,rgba(245,165,36,.10),transparent 70%),var(--ink)}

/* steps */
.m-on .step .step__n{transform:scale(0);transition:transform .7s cubic-bezier(.3,1.7,.5,1)}
.m-on .step.in .step__n{transform:scale(1)}
.m-full .step.in .step__n::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--accent);animation:m-halo 2.6s 1s ease-out infinite}
@keyframes m-halo{from{transform:scale(.9);opacity:.9}to{transform:scale(1.5);opacity:0}}
.m-on .steps__line span{transform:scaleX(var(--p,0))}

/* hours table rows cascade */
.m-on .hours__card .hours__table tr{opacity:0;transform:translateX(-14px);transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.2,1)}
.m-on .hours__card.in .hours__table tr{opacity:1;transform:none}
.m-on .hours__card.in .hours__table tr:nth-child(2){transition-delay:.07s}.m-on .hours__card.in .hours__table tr:nth-child(3){transition-delay:.14s}
.m-on .hours__card.in .hours__table tr:nth-child(4){transition-delay:.21s}.m-on .hours__card.in .hours__table tr:nth-child(5){transition-delay:.28s}
.m-on .hours__card.in .hours__table tr:nth-child(6){transition-delay:.35s}.m-on .hours__card.in .hours__table tr:nth-child(7){transition-delay:.42s}

@keyframes m-today{to{background-position:-200% 0}}

/* reviews stars fill */
.m-on .rv .stars,.m-on .rating .stars{clip-path:inset(0 100% 0 0)}
.m-on .rv.in .stars,.m-on .rating.in .stars{animation:m-stars 1.2s .3s ease forwards}
@keyframes m-stars{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* callback form */
.m-progress{position:absolute;left:32px;right:32px;top:0;height:4px;border-radius:0 0 4px 4px;background:var(--bg-2);overflow:hidden;z-index:1}
.m-progress span{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(var(--fp,0));background:linear-gradient(90deg,var(--dark),var(--accent),var(--accent));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.m-on .cb__card::before{display:none}
.m-on .field input:focus,.m-on .field select:focus{transform:translateY(-1px)}
.m-on .field label{transition:color .2s}
.m-on .field:focus-within>label{color:var(--accent)}
.m-on .pills input:checked+span{animation:m-pill .4s cubic-bezier(.3,1.7,.5,1)}
@keyframes m-pill{from{transform:scale(.85)}}
.m-shake{animation:m-shake .45s}
@keyframes m-shake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.m-confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:200}

/* footer */
.m-full .foot__dunes{animation:m-footdune 14s ease-in-out infinite alternate}
@keyframes m-footdune{to{transform:translateX(-30px) scaleY(1.15)}}
.foot__dunes{width:calc(100% + 60px)!important}

/* nav underline */
.m-on .nav a:not(.nav__cta){position:relative}
.m-on .nav a:not(.nav__cta)::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .35s}
.m-on .nav a:not(.nav__cta):hover::after{transform:scaleX(1);transform-origin:left}

@media (max-width:980px){.m-float{right:4%;top:6%}}
@media (max-width:560px){.m-marquee__track{font-size:1.1rem}.m-progress{left:22px;right:22px}}
@media (prefers-reduced-motion:reduce){
  .m-dust,.m-glow,.m-confetti,.m-progressbar{display:none}
  .wi{transform:none!important;opacity:1!important}
  .m-on .hours__card .hours__table tr{opacity:1;transform:none}
  .m-on .step .step__n{transform:none}
}
@media (max-width:980px){.m-full .hero__chip{animation:m-pop .7s 1.3s cubic-bezier(.3,1.6,.5,1) both}}
@media (max-width:980px){@keyframes m-pop{from{opacity:0}}}
main,.foot{overflow-x:clip}
.m-full .fronds path{animation:m-sway 5s ease-in-out infinite}
.m-full .fronds path:nth-child(2n){animation-delay:-1.3s;animation-duration:6s}
.m-full .fronds path:nth-child(3){animation-delay:-2.1s}
@keyframes m-sway{50%{transform:rotate(4deg)}}
.m-on .fronds{animation:m-pop .9s 1.9s cubic-bezier(.3,1.6,.5,1) both;transform-box:fill-box;transform-origin:50% 100%}

/* marker highlight sweeps in behind "Happy you." */
.m-on h1 em{background-size:0% 100%;background-repeat:no-repeat;transition:background-size 1s 1s cubic-bezier(.6,0,.2,1)}
.m-on h1.in em{background-size:100% 100%}