/* ==========================================================================
   SUNSHINE AESTHETIC CLINIC — MOTION GUIDELINES
   Moves like a slow exhale. No bounce, no snap, no aggressive easing.
   Mirrors the voice rule: one playful moment per page, not five — and never
   on safety, pricing, or consent elements.
   ========================================================================== */

/*
  DURATIONS
  - micro (150ms)    → hover states, focus rings, small toggles
  - standard (350ms)  → buttons, cards, reveals, nav transitions
  - slow (550ms)      → page-level reveals, hero entrances, modal open

  EASING
  - --ease-signature  cubic-bezier(0.16, 1, 0.3, 1) — "the exhale": fast start,
    long soft settle. Use for anything entering the viewport or lifting on hover.
  - --ease-standard   ease-in-out — reserved for simple color/opacity swaps only.
  - Never use bounce, elastic, or overshoot easings — it reads playful in the
    wrong way for a clinical-luxury brand.

  THE ONE PLAYFUL MOMENT
  - Each page may have exactly one small delight beat (e.g. a soft shimmer
    across a CTA on hover, a petal-soft fade on the signature treatment card).
  - It never appears on: pricing figures, consent/booking confirmation copy,
    safety or aftercare instructions. Those stay static and legible.

  ACCESSIBILITY
  - All animation respects prefers-reduced-motion (see below).
*/

/* Reveal on scroll — fade + gentle rise, the standard entrance */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--duration-slow) var(--ease-signature),
              transform var(--duration-slow) var(--ease-signature);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children — treatment grids, testimonial rows */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--duration-slow) var(--ease-signature),
              transform var(--duration-slow) var(--ease-signature);
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms;   }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 90ms;  }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 270ms; }
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Hover lift — buttons, cards (see buttons.css / cards.css for applied values) */
.lift-on-hover {
  transition: transform var(--duration-standard) var(--ease-signature),
              box-shadow var(--duration-standard) var(--ease-signature);
}
.lift-on-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

/* The one playful moment — CTA shimmer. Use sparingly, never on price/consent CTAs. */
.shimmer-on-hover {
  position: relative;
  overflow: hidden;
}
.shimmer-on-hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left var(--duration-slow) var(--ease-signature);
}
.shimmer-on-hover:hover::before {
  left: 130%;
}

/* Page/section fade-through (route or tab transitions) */
.fade-through-enter {
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-signature);
}
.fade-through-enter.is-visible {
  opacity: 1;
}

/* Signature mint gradient — slow, ambient drift for hero backgrounds only */
.signature-gradient-bg {
  background: var(--gradient-mint);
  background-size: 100% 200%;
  animation: sunshine-drift 18s var(--ease-standard) infinite alternate;
}
@keyframes sunshine-drift {
  from { background-position: 50% 0%; }
  to   { background-position: 50% 100%; }
}

/* Respect user motion preferences — always */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > *,
  .lift-on-hover,
  .shimmer-on-hover::before,
  .fade-through-enter,
  .signature-gradient-bg {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}