/* ==========================================================================
   Animations & Keyframes
   ========================================================================== */

@keyframes scrollLine {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
  50.1% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

@keyframes heroScale {
  0% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Hero Entrance Animations
   ========================================================================== */
.hero__eyebrow,
.hero__headline,
.hero__description,
.hero__buttons {
  opacity: 1;
  transform: none;
}

.hero--loaded .hero__eyebrow {
  animation: heroFadeUp 0.8s ease forwards;
}

.hero--loaded .hero__headline {
  animation: heroFadeUp 0.9s ease forwards;
}

.hero--loaded .hero__description {
  animation: heroFadeUp 0.8s ease forwards;
}

.hero--loaded .hero__buttons {
  animation: heroFadeUp 0.8s ease forwards;
}

.hero--loaded .hero__scroll {
  animation: heroFadeUp 0.8s ease forwards;
}

/* ==========================================================================
   Media Animations
   ========================================================================== */
.hero__media {
  animation: heroScale 8s ease forwards;
}

/* ==========================================================================
   Page Hero Entrance Animations (Secondary Pages)
   ========================================================================== */
.page-hero__image {
  animation: heroScale 10s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: center;
}

.page-hero__content .eyebrow,
.page-hero__content .heading-xl,
.page-hero__content p {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Smooth Scroll Reveal Keyframes & Timings
   ========================================================================== */
.reveal {
  opacity: 1;
  transform: none;
}

.reveal--visible {
  opacity: 1;
  transform: none;
}

.reveal--delay-1 { transition-delay: 0.12s; }
.reveal--delay-2 { transition-delay: 0.24s; }
.reveal--delay-3 { transition-delay: 0.36s; }
.reveal--delay-4 { transition-delay: 0.48s; }

/* ==========================================================================
   Interactive Card Hover Transitions
   ========================================================================== */
.treatment-card-v2,
.membership-card,
.feature-block,
.gallery__item {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}

/* ==========================================================================
   Accessibility: Prefers Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .reveal {
    opacity: 1;
    transform: none;
  }
  
  .hero__eyebrow,
  .hero__headline,
  .hero__description,
  .hero__buttons,
  .page-hero__content .eyebrow,
  .page-hero__content .heading-xl,
  .page-hero__content p {
    opacity: 1;
    transform: none;
  }
}