/* ==========================================================================
   Dr. Hanaa Morjane — Animations & Scroll-Reveal System
   ========================================================================== */

/* ── Keyframe Animations ── */

/* Pulse animation for WhatsApp FAB */
@keyframes fabPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4), 0 4px 16px rgba(37, 211, 102, 0.4);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0), 0 4px 16px rgba(37, 211, 102, 0.4);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 4px 16px rgba(37, 211, 102, 0.4);
  }
}

/* Glow ring rotation for hero doctor portrait */
@keyframes ringRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Floating particles in hero background */
@keyframes floatParticle {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.3;
  }
  90% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(-120vh) translateX(50px) scale(0.8);
    opacity: 0;
  }
}

/* Page transitions */
@keyframes pageExit {
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

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

/* Shimmer/Skeleton loading */
@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* Bounce for scroll indicator */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-8px);
  }
  60% {
    transform: translateY(-4px);
  }
}

/* Shake animation for invalid form fields */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* Clip path wipe reveal for hero titles */
@keyframes clipRevealLeft {
  from {
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  }
  to {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

/* ── Scroll-Reveal System Classes ── */

[data-reveal] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: var(--dur-slow);
  transition-timing-function: var(--ease-out);
  will-change: transform, opacity;
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* Directions */
[data-reveal="up"] {
  transform: translateY(40px);
}

[data-reveal="down"] {
  transform: translateY(-40px);
}

[data-reveal="left"] {
  transform: translateX(-40px);
}

[data-reveal="right"] {
  transform: translateX(40px);
}

[data-reveal="scale"] {
  transform: scale(0.92);
}

[data-reveal="fade"] {
  transform: none;
}

/* RTL reveal corrections */
[dir="rtl"] [data-reveal="left"] {
  transform: translateX(40px);
}
[dir="rtl"] [data-reveal="right"] {
  transform: translateX(-40px);
}

/* Page exit/enter triggers */
.page-exit {
  animation: pageExit 300ms var(--ease-in-out) forwards;
}

.page-enter {
  animation: pageEnter 500ms var(--ease-out) forwards;
}

/* Accessibility: respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}