/* ==========================================================================
   MedSpeakPro Animations
   Data-attribute driven animation utilities.
   ========================================================================== */

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

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-bg__layer {
    animation: none !important;
  }
}

/* ---------- Scroll-reveal base ---------- */
/* Elements are visible by default. JS adds .reveal-ready to hide them before animating. */
[data-reveal].reveal-ready {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.8s cubic-bezier(0.33, 1, 0.68, 1),
              transform 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}

[data-reveal].is-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* Reveal variants — only apply when JS has marked them ready */
[data-reveal="fade-up"].reveal-ready {
  transform: translateY(40px);
}

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

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

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

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

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

[data-reveal="zoom"].reveal-ready {
  transform: scale(0.8);
}

/* Stagger delay (set via inline style or data attribute) */
[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }
[data-reveal-delay="4"] { transition-delay: 0.4s; }
[data-reveal-delay="5"] { transition-delay: 0.5s; }
[data-reveal-delay="6"] { transition-delay: 0.6s; }

/* ---------- Text split ---------- */
[data-split] .char,
[data-split] .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s cubic-bezier(0.33, 1, 0.68, 1),
              transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}

[data-split].is-split .char,
[data-split].is-split .word {
  opacity: 1;
  transform: none;
}

/* ---------- Keyframes ---------- */

/* Pulse glow (for buttons, badges) */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(28, 176, 246, 0.2), 0 0 12px rgba(139, 92, 246, 0.08); }
  50% { box-shadow: 0 0 36px rgba(28, 176, 246, 0.35), 0 0 20px rgba(139, 92, 246, 0.15); }
}

.animate-pulse-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}

/* Float (for floating UI elements) */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-float-slow {
  animation: float 8s ease-in-out infinite;
}

.animate-float-fast {
  animation: float 4s ease-in-out infinite;
}

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

.scroll-indicator {
  animation: scroll-bounce 2.5s ease infinite;
}

/* Accent line grow from center */
@keyframes line-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.animate-line-grow {
  transform-origin: center;
  transform: scaleX(0);
}

.animate-line-grow.is-visible {
  animation: line-grow 0.8s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

/* Fade in page entrance */
@keyframes page-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

body {
  animation: page-enter 0.6s ease forwards;
}

/* Spin (for loading states) */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* ---------- Hero background layers ---------- */
@keyframes drift-1 {
  0% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(30px, -20px) rotate(120deg); }
  66% { transform: translate(-20px, 20px) rotate(240deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}

@keyframes drift-2 {
  0% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(-40px, 30px) rotate(-120deg); }
  66% { transform: translate(30px, -10px) rotate(-240deg); }
  100% { transform: translate(0, 0) rotate(-360deg); }
}

@keyframes drift-3 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -30px) scale(1.05); }
  100% { transform: translate(0, 0) scale(1); }
}

/* ---------- Counter number animation (handled in JS) ---------- */
[data-counter] {
  font-variant-numeric: tabular-nums;
}

/* ---------- Magnetic button hover area ---------- */
.magnetic {
  position: relative;
  transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}