.scroll-progress {
  background: linear-gradient(90deg, var(--sand), var(--teal));
  height: 3px;
  left: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  z-index: 100;
}

.site-header {
  transition: background-color 280ms ease, box-shadow 280ms ease, height 280ms ease;
}

.site-header.is-scrolled {
  background: rgba(251, 249, 245, 0.97);
  box-shadow: 0 12px 35px rgba(23, 37, 35, 0.08);
}

.motion-ready .hero-enter {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 850ms cubic-bezier(.2, .75, .25, 1),
    transform 850ms cubic-bezier(.2, .75, .25, 1);
  transition-delay: var(--hero-delay, 0ms);
}

.motion-ready.hero-loaded .hero-enter {
  opacity: 1;
  transform: translateY(0);
}

.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 800ms cubic-bezier(.2, .75, .25, 1),
    transform 800ms cubic-bezier(.2, .75, .25, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.motion-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero-visual,
.method-image,
.doctor-portrait,
.recovery-image,
.ritual-feature-image {
  isolation: isolate;
}

.hero-visual > img,
.method-image > img,
.doctor-portrait > img,
.recovery-image > img,
.ritual-feature-image > img {
  transform: translate3d(0, var(--parallax-y, 0), 0) scale(1.09);
  transition: filter 700ms ease;
  will-change: transform;
}

.hero-visual:hover > img,
.method-image:hover > img,
.doctor-portrait:hover > img,
.recovery-image:hover > img,
.ritual-feature-image:hover > img {
  filter: saturate(1.04) contrast(1.02);
}

.area-card,
.ritual-list article {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  will-change: transform;
}

.area-card h3,
.ritual-list article h3 {
  transition: transform 300ms cubic-bezier(.2, .75, .25, 1);
}

.area-card:hover h3,
.ritual-list article:hover h3 {
  transform: translateY(-4px);
}

.button span,
.floating-whatsapp b,
.text-link span {
  display: inline-block;
  transition: transform 240ms ease;
}

.button:hover span,
.floating-whatsapp:hover b,
.text-link:hover span {
  transform: translate(4px, -3px);
}

.floating-whatsapp {
  animation: beaute-float 3.6s ease-in-out infinite;
  box-shadow: 0 12px 35px rgba(28, 86, 82, 0.22);
}

.treatment-list summary b {
  transition: background-color 240ms ease, color 240ms ease, transform 360ms ease;
}

.treatment-list details[open] summary b {
  transform: rotate(45deg);
}

.treatment-list details[open] .treatment-body {
  animation: beaute-details 420ms cubic-bezier(.2, .75, .25, 1) both;
}

@keyframes beaute-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes beaute-details {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  .hero-visual > img,
  .method-image > img,
  .doctor-portrait > img,
  .recovery-image > img,
  .ritual-feature-image > img {
    transform: scale(1.035);
  }

  .area-card,
  .ritual-list article {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .hero-enter,
  .motion-ready [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .hero-visual > img,
  .method-image > img,
  .doctor-portrait > img,
  .recovery-image > img,
  .ritual-feature-image > img,
  .area-card,
  .ritual-list article {
    transform: none;
    will-change: auto;
  }

  .floating-whatsapp,
  .treatment-list details[open] .treatment-body {
    animation: none;
  }
}