/* MOTION — calm, short, and only where it helps. Prices, times and buttons never wait for an animation.
   Everything here is off or reduced to a simple fade when the visitor asks for reduced motion. */
:root{--m-out:cubic-bezier(0.23,1,0.32,1)}

/* 1. the opening: the photo settles in slowly, the words rise one after another */
@media (prefers-reduced-motion:no-preference){
  .hero-bg img{animation:hero-settle 1600ms var(--m-out) both}
  .hero-eyebrow,.hero h1,.hero-text,.hero-cta,.hero-pts{animation:rise 700ms var(--m-out) both}
  .hero-eyebrow{animation-delay:60ms}
  .hero h1{animation-delay:160ms}
  .hero-text{animation-delay:280ms}
  .hero-cta{animation-delay:380ms}
  .hero-pts{animation-delay:480ms}
}
@keyframes hero-settle{from{transform:scale(1.07)}to{transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* 2. sections and cards ease in as they come into view (the script marks them; nothing is hidden without it) */
.js [data-reveal]:not([data-in]){opacity:0;transform:translateY(16px)}
[data-reveal]{transition:opacity 600ms var(--m-out),transform 600ms var(--m-out);transition-delay:var(--d,0ms)}
.js [data-reveal="fade"]:not([data-in]){transform:none}
.js [data-reveal="scale"]:not([data-in]){transform:scale(.97)}

/* 3. press and hover: the site answers the finger */
.btn,.dock a,.jump a,.shelf-btn,.hd-ic{transition-property:transform,background-color,color,border-color,opacity;transition-duration:160ms;transition-timing-function:var(--m-out)}
.btn:active,.shelf-btn:active,.dock a:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-1px)}
  .svc,.pkg,.rc{transition:transform 260ms var(--m-out),border-color 150ms ease,box-shadow 260ms var(--m-out)}
  .svc:hover,.pkg:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgb(59 45 30 / .12)}
  .svc-img img,.pkg-img img{transition:transform 700ms var(--m-out)}
  .svc:hover .svc-img img,.pkg:hover .pkg-img img{transform:scale(1.05)}
  .big::after{transition:opacity 300ms ease}
  .big:hover .big-t em{transform:translateX(calc(var(--dir) * -4px))}
}
.big-t em{display:inline-block;transition:transform 260ms var(--m-out)}
.svc-img,.pkg-img{overflow:hidden}

/* 4. the header answers the scroll: it gains a soft shadow instead of a hard line */
.hd{transition:box-shadow 250ms ease,background-color 250ms ease}
.hd[data-stuck]{box-shadow:0 4px 18px rgb(59 45 30 / .08)}

/* 5. the category bar: the active button moves smoothly, the bar slides into place */
.jump a{transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease,transform 160ms var(--m-out)}
.jump a:active{transform:scale(.96)}

/* 6. the bottom bar and WhatsApp button come in once the page has loaded */
@media (prefers-reduced-motion:no-preference){
  .dock{animation:dock-in 500ms var(--m-out) 400ms both}
  .wa{animation:pop-in 420ms var(--m-out) 700ms both}
}
@keyframes dock-in{from{transform:translateY(100%)}to{transform:none}}
@keyframes pop-in{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.wa{transition:transform 200ms var(--m-out)}
.wa:active{transform:scale(.92)}

/* 7. FAQ: the answer opens with a short fade and slide */
@media (prefers-reduced-motion:no-preference){
  .faq-item[open] .faq-a{animation:faq-open 260ms var(--m-out)}
}
@keyframes faq-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* 8. the gentle line under the opening: it draws itself once, a nod to the spa's flowing identity */
.hero-eyebrow::after{transform-origin:right center}
[dir="ltr"] .hero-eyebrow::after{transform-origin:left center}
@media (prefers-reduced-motion:no-preference){
  .hero-eyebrow::after{animation:draw-line 1100ms var(--m-out) 300ms both}
}
@keyframes draw-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* 9. cart: the count bumps when something is added */
.cart-count{transition:transform 220ms var(--m-out)}

/* reduced motion: no movement, only quick fades */
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]:not([data-in]){transform:none}
  [data-reveal]{transition-property:opacity;transition-duration:200ms}
  .btn:hover,.svc:hover,.pkg:hover{transform:none}
}