/* ==========================================================================
   Motion layer — soft, slow, spa-like movement.
   Every hidden/starting state is scoped to html.motion, which is only added
   when JavaScript runs and the visitor has not asked for reduced motion.
   ========================================================================== */
:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.45,.05,.25,1);
  --reveal-distance:34px;
}

/* ---------- Scroll progress ---------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;pointer-events:none;transform-origin:0 50%;transform:scaleX(var(--progress,0));background:linear-gradient(90deg,#e8b4c4,#b67a91 60%,#70465a)}

/* ---------- Hero entrance ---------- */
.motion .hero-content>*{opacity:0;transform:translateY(26px);transition:opacity 1.1s var(--ease-out),transform 1.1s var(--ease-out)}
.motion .hero h1{opacity:1;transform:none}
.motion .hero h1 .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.motion .hero h1 .line>span{display:inline-block;transform:translateY(105%);transition:transform 1.3s var(--ease-out)}
.motion .hero-photo-frame{clip-path:inset(100% 0 0 0 round 49% 49% 4px 4px / 38% 38% 4px 4px);transition:clip-path 1.6s var(--ease-soft)}
.motion .hero-photo{transform:scale(1.18);transition:transform 2.4s var(--ease-out)}
.motion .hero-photo-caption{opacity:0;transition:opacity 1.2s ease 1.3s}
.motion .floating-seal{opacity:0;transform:scale(.6) rotate(-25deg);transition:opacity .9s var(--ease-out) 1.1s,transform 1.2s var(--ease-out) 1.1s}
.motion .hero-bottom{opacity:0;transition:opacity 1s ease 1.5s}

.motion.is-loaded .hero-content>*{opacity:1;transform:none}
.motion.is-loaded .hero-content>:nth-child(1){transition-delay:.15s}
.motion.is-loaded .hero h1 .line>span{transform:none}
.motion.is-loaded .hero h1 .line:nth-child(1)>span{transition-delay:.3s}
.motion.is-loaded .hero h1 .line:nth-child(2)>span{transition-delay:.45s}
.motion.is-loaded .hero-content>:nth-child(3){transition-delay:.7s}
.motion.is-loaded .hero-content>:nth-child(4){transition-delay:.82s}
.motion.is-loaded .hero-content>:nth-child(5){transition-delay:.95s}
.motion.is-loaded .hero-content>:nth-child(6){transition-delay:1.1s}
.motion.is-loaded .hero-photo-frame{clip-path:inset(0 0 0 0 round 49% 49% 4px 4px / 38% 38% 4px 4px)}
.motion.is-loaded .hero-photo{transform:scale(1.04)}
.motion.is-loaded .hero-photo-caption,.motion.is-loaded .hero-bottom{opacity:1}
.motion.is-loaded .floating-seal{opacity:1;transform:none}

/* Ambient hero details */
.motion .hero-orb{animation:orb-drift 18s ease-in-out infinite alternate}
@keyframes orb-drift{to{transform:translate(90px,-50px) scale(1.15)}}
.motion.is-loaded .floating-seal .seal-emblem{animation:seal-breathe 6s ease-in-out 2.4s infinite}
@keyframes seal-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.motion .scroll-hint>span{display:inline-block;animation:hint-bob 2.4s ease-in-out infinite}
@keyframes hint-bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}
.motion .hero-photo-frame{will-change:transform}
.hero-photo-frame{transform:translate3d(0,var(--parallax,0px),0)}

/* ---------- Scroll reveals ---------- */
.motion [data-reveal]{opacity:0;transform:translateY(var(--reveal-distance));transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out);transition-delay:var(--reveal-delay,0s)}
.motion [data-reveal="fade"]{transform:none}
.motion [data-reveal="left"]{transform:translateX(calc(var(--reveal-distance) * -1))}
.motion [data-reveal="right"]{transform:translateX(var(--reveal-distance))}
.motion [data-reveal="zoom"]{transform:scale(.94)}
.motion [data-reveal].is-visible{opacity:1;transform:none}
.motion .reveal-done{--reveal-delay:0s}
.motion .reveal-done .benefit-icon{transition-delay:0s}
.motion .treatment-card.reveal-done,.motion .testimonial-card.reveal-done{transition:transform .45s var(--ease-out),box-shadow .45s}
.motion .treatment-card.is-visible:hover{transform:translateY(-5px)}
.motion .testimonial-card.is-visible:hover{transform:translateY(-4px)}
.motion .benefit.is-visible:hover .benefit-icon{transform:translateY(-3px) rotate(8deg)}

/* Eyebrow rules draw in */
.motion [data-reveal] .eyebrow-line{transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease-out) calc(var(--reveal-delay,0s) + .25s)}
.motion [data-reveal].is-visible .eyebrow-line{transform:scaleX(1)}

/* Display headings: italic line glides in after the heading */
.motion [data-reveal] .display-heading em{display:inline-block;opacity:0;transform:translateX(-14px);transition:opacity 1.1s var(--ease-out) calc(var(--reveal-delay,0s) + .35s),transform 1.2s var(--ease-out) calc(var(--reveal-delay,0s) + .35s)}
.motion [data-reveal].is-visible .display-heading em{opacity:1;transform:none}

/* Image unveil for treatment cards and the about photo */
.motion .treatment-card[data-reveal] .treatment-image,
.motion .about-images[data-reveal] .about-photo-wrap{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease-soft) calc(var(--reveal-delay,0s) + .1s)}
.motion .treatment-card[data-reveal].is-visible .treatment-image,
.motion .about-images[data-reveal].is-visible .about-photo-wrap{clip-path:inset(0 0 0 0)}
.motion .treatment-card[data-reveal] .treatment-image img{transform:scale(1.15)}
.motion .treatment-card[data-reveal].is-visible .treatment-image img{transform:scale(1);transition:transform 1.8s var(--ease-out) calc(var(--reveal-delay,0s) + .1s)}
.motion .treatment-card[data-reveal].is-visible:hover .treatment-image img{transform:scale(1.045);transition-duration:.7s;transition-delay:0s}
.about-photo-wrap img{transform:translate3d(0,var(--parallax,0px),0) scale(1.08)}

/* Benefit icons settle in with a soft spin */
.motion .benefit[data-reveal] .benefit-icon{transform:scale(.5) rotate(-60deg);transition:transform 1s var(--ease-out) calc(var(--reveal-delay,0s) + .2s)}
.motion .benefit[data-reveal].is-visible .benefit-icon{transform:none}
.benefit-icon{transition:background .35s,transform .5s var(--ease-out)}
.benefit:hover .benefit-icon{transform:translateY(-3px) rotate(8deg)}

/* Testimonial stars twinkle in */
.motion .testimonial-card[data-reveal] .testimonial-stars{background:linear-gradient(90deg,currentColor 50%,rgba(197,139,158,.25) 50%) 100% 0/200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:background-position 1.4s var(--ease-soft) calc(var(--reveal-delay,0s) + .35s)}
.motion .testimonial-card[data-reveal].is-visible .testimonial-stars{background-position:0 0}

/* ---------- Hover refinements ---------- */
.button{position:relative;overflow:hidden;isolation:isolate}
.button::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease-out)}
.button:hover::before{transform:translateX(120%)}

.step{position:relative;transition:padding .45s var(--ease-out)}
.step::before{content:"";position:absolute;inset:-1px -22px;background:rgba(255,236,242,.06);opacity:0;transition:opacity .4s}
.step:hover::before{opacity:1}
.step-arrow{transition:transform .45s var(--ease-out),color .3s}
.step:hover .step-arrow{transform:translate(4px,-4px) rotate(45deg);color:#fff}
.step-number{transition:transform .45s var(--ease-out)}
.step:hover .step-number{transform:translateX(5px)}

.testimonial-initial{transition:transform .5s var(--ease-out)}
.testimonial-card:hover .testimonial-initial{transform:scale(1.08) rotate(-6deg)}

.footer-links a{position:relative}
.footer-links a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease-out)}
.footer-links a:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- Ambient section motion ---------- */
.motion .area-circles span{animation:area-ripple 7s ease-in-out infinite}
.motion .area-circles span:nth-child(2){animation-delay:-2.3s}
.motion .area-circles span:nth-child(3){animation-delay:-4.6s}
@keyframes area-ripple{0%,100%{transform:scale(.96);opacity:.55}50%{transform:scale(1.04);opacity:1}}
.motion .area-pin{position:relative;animation:pin-float 4s ease-in-out infinite}
.motion .area-pin::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid #b67a91;animation:pin-pulse 2.8s var(--ease-out) infinite}
@keyframes pin-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pin-pulse{from{transform:scale(1);opacity:.8}to{transform:scale(2.3);opacity:0}}

.wellness-banner-image{transform:translate3d(0,var(--parallax,0px),0) scale(1.18)}
.motion .banner-asterisk{display:inline-block;animation:spin-slow 22s linear infinite}
@keyframes spin-slow{to{transform:rotate(360deg)}}
.steps-decor{transform:translate3d(0,var(--parallax,0px),0)}

.motion .contact-emblem{animation:emblem-float 6s ease-in-out infinite}
@keyframes emblem-float{0%,100%{transform:translateY(0);box-shadow:0 8px 28px rgba(0,0,0,.10)}50%{transform:translateY(-8px);box-shadow:0 18px 34px rgba(0,0,0,.08)}}
.motion .booking-phone{animation:cta-glow 3.2s ease-in-out infinite}
@keyframes cta-glow{0%,100%{box-shadow:0 0 0 0 rgba(255,228,236,0)}50%{box-shadow:0 0 0 8px rgba(255,228,236,.14)}}

.mobile-booking{transition:transform .5s var(--ease-out),opacity .4s}

/* ---------- Reduced motion: everything visible and still ---------- */
@media(prefers-reduced-motion:reduce){
  .scroll-progress{display:none}
  .hero-photo-frame,.about-photo-wrap img,.wellness-banner-image,.steps-decor{transform:none}
}