/* ==========================================================================
   LumaSKIN Clinic - Animations
   All @keyframes, reveal states, parallax rules, reduced-motion fallback.
   Only transform and opacity are animated.
   ========================================================================== */

/* ---- Scroll reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  filter: blur(4px);
  transition: opacity var(--dur-reveal) var(--ease-out-expo),
              transform var(--dur-reveal) var(--ease-out-expo),
              filter var(--dur-reveal) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ---- Hero scroll chevron bob ---- */
.scroll-cue {
  animation: bob 2s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ---- Mobile menu link reveal ---- */
@keyframes menuLinkIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Marquee ---- */
@keyframes marqueeLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes marqueeRight {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

/* ---- Chatbot pulse ring ---- */
@keyframes pulseRing {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ---- Chat bubble entry ---- */
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Typing dots ---- */
@keyframes dotBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-5px); }
}

/* ---- Send button pulse ---- */
@keyframes sendPulse {
  0% { transform: translateY(-50%) scale(1); }
  50% { transform: translateY(-50%) scale(1.15); }
  100% { transform: translateY(-50%) scale(1); }
}

/* ---- Parallax layers (GPU safe) ---- */
[data-parallax] {
  will-change: transform;
}

/* ---- Booking step transitions ---- */
.step {
  display: none;
}

.step.active {
  display: block;
  animation: stepIn var(--dur-base) var(--ease-smooth);
}

.step.leaving {
  animation: stepOut var(--dur-base) var(--ease-smooth) forwards;
}

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

@keyframes stepOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-24px); }
}

/* ---- Confirmation fade ---- */
.booking-confirm {
  animation: confirmIn var(--dur-slow) var(--ease-out-expo);
}

@keyframes confirmIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.booking-form.leaving {
  animation: confirmOut var(--dur-base) var(--ease-smooth) forwards;
}

@keyframes confirmOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.97); }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
    filter: none;
  }

  [data-parallax] {
    transform: none !important;
  }
}