/* ============================================================================
   Animations
   ============================================================================ */

/* Fade In Up - Primary entrance animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade In - Simple fade */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Pulse - Loading state */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* Stroke Draw - For SVG check animations */
@keyframes strokeDraw {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

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

/* Spin - Loading spinner */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Scale In - For modals/popups */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Slide Down - For accordion/dropdown */
@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 500px;
  }
}

/* Glow Pulse - For highlighted elements */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 30px var(--color-brand-glow);
  }
  50% {
    box-shadow: 0 0 60px var(--color-brand-glow-strong);
  }
}

/* Card idle pulse — sutil border glow para cards em repouso pré-scroll */
@keyframes cardIdlePulse {
  0%, 100% {
    border-color: var(--color-border-subtle);
    box-shadow: var(--shadow-lg);
  }
  50% {
    border-color: var(--color-brand-glow-strong);
    box-shadow: var(--shadow-lg), 0 0 12px var(--color-brand-glow);
  }
}

/* Shimmer - For skeleton loading */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* ============================================================================
   Parallax Helpers (for Phase S.2)
   ============================================================================ */

@keyframes parallaxFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(2deg);
  }
}

@keyframes parallaxSlow {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -10px, 0);
  }
}

/* ECG Heartbeat Animation */
@keyframes ecgPulse {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -60;
  }
}

/* Chart Line Draw Animation */
@keyframes drawLine {
  from {
    stroke-dashoffset: 400;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Count Fade In */
@keyframes countFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pop In with bounce - for chart points and badges */
@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  70% {
    opacity: 1;
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============================================================================
   Scroll-linked Reveal Animations
   ============================================================================ */

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

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

@keyframes revealScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

/* ============================================================================
   Animation Utility Classes
   ============================================================================ */

.animate-fade-in-up {
  animation: fadeInUp 600ms var(--ease-default) forwards;
}

.animate-fade-in {
  animation: fadeIn 400ms var(--ease-default) forwards;
}

.animate-pulse {
  animation: pulse 2s var(--ease-in-out) infinite;
}

.animate-float {
  animation: float 3s var(--ease-in-out) infinite;
}

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

.animate-glow {
  animation: glowPulse 2s var(--ease-in-out) infinite;
}

.animate-scale-in {
  animation: scaleIn 300ms var(--ease-spring) forwards;
}

/* Reveal animations */
.animate-reveal-left {
  animation: revealFromLeft 600ms var(--ease-default) both;
}

.animate-reveal-right {
  animation: revealFromRight 600ms var(--ease-default) both;
}

.animate-reveal-scale {
  animation: revealScale 600ms var(--ease-spring) both;
}

.animate-reveal-bottom {
  animation: revealFromBottom 600ms var(--ease-default) both;
}

/* Parallax animations */
.animate-parallax-float {
  animation: parallaxFloat 6s var(--ease-in-out) infinite;
}

.animate-parallax-slow {
  animation: parallaxSlow 8s var(--ease-in-out) infinite;
}

/* ============================================================================
   Staggered Animation Delays
   ============================================================================ */

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }
.delay-900 { animation-delay: 900ms; }
.delay-1000 { animation-delay: 1000ms; }
.delay-1200 { animation-delay: 1200ms; }
.delay-1500 { animation-delay: 1500ms; }

/* ============================================================================
   Initial State for Animated Elements
   ============================================================================ */

[data-animate] {
  opacity: 0;
  transform: translateY(24px);
}

[data-animate].visible {
  animation: fadeInUp 600ms var(--ease-default) forwards;
}

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

[data-animate="left"].visible {
  animation: revealFromLeft 600ms var(--ease-default) forwards;
}

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

[data-animate="right"].visible {
  animation: revealFromRight 600ms var(--ease-default) forwards;
}

[data-animate="scale"] {
  opacity: 0;
  transform: scale(0.9);
}

[data-animate="scale"].visible {
  animation: revealScale 600ms var(--ease-spring) forwards;
}

/* ============================================================================
   Phase 2 - Ticker Animation
   ============================================================================ */

@keyframes ticker {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes tickerReverse {
  0% {
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

/* ============================================================================
   Phase 2 - Section Divider Line Reveal
   ============================================================================ */

@keyframes sectionLineReveal {
  0% {
    width: 0%;
  }
  100% {
    width: 60%;
  }
}

/* ============================================================================
   Phase 2 - Word Reveal Animation
   ============================================================================ */

@keyframes wordReveal {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================================
   Phase 2 - Card Deck Reveal Animation
   ============================================================================ */

@keyframes cardDeckReveal {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(0.9) rotateZ(var(--card-rotate, 2deg));
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotateZ(0deg);
  }
}

/* ============================================================================
   Phase 2 - Icon Pulse Animation
   ============================================================================ */

@keyframes iconPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

/* ============================================================================
   Phase 2 - Feature Card 3D Reveal
   ============================================================================ */

@keyframes featureCardReveal {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.95) perspective(1000px) rotateY(var(--card-rotateY, 3deg));
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) perspective(1000px) rotateY(0deg);
  }
}

/* ============================================================================
   Phase 2 - FAQ Accordion Slide
   ============================================================================ */

@keyframes accordionSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================================
   Reduced Motion Support
   ============================================================================ */

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

  [data-animate],
  [data-animate="left"],
  [data-animate="right"],
  [data-animate="scale"] {
    opacity: 1;
    transform: none;
  }

  /* Disable ECG animation */
  .ecg-path {
    animation: none;
    stroke-dashoffset: 0;
  }

  /* Show chart immediately */
  .chart-line {
    stroke-dashoffset: 0;
  }

  .chart-area {
    opacity: 1;
  }

  /* Show floating metrics immediately */
  .floating-metric {
    opacity: 1;
    transform: scale(1);
  }

  /* Show list items immediately */
  .mockup-list-item {
    opacity: 1;
    transform: translateY(0);
  }

  /* Show chart points, labels and badge immediately */
  .chart-point {
    opacity: 1;
    transform: scale(1);
  }

  .chart-rep-label {
    opacity: 1;
  }

  .chart-badge {
    opacity: 1;
    transform: scale(1);
  }

  /* Phase 2 - Ticker paused */
  .ticker-track {
    animation-play-state: paused !important;
  }

  /* Phase 2 - Section divider visible immediately */
  .section-divider::before {
    width: 60% !important;
  }

  /* Phase 2 - Word reveal visible immediately */
  .word-reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Phase 2 - Feature cards visible immediately */
  .feature-card {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Phase 4.2 - Features horizontal scroll disabled */
  .features-scroll-container {
    height: auto !important;
  }

  .features-sticky {
    position: relative !important;
    height: auto !important;
  }

  .features-track {
    flex-direction: column !important;
    transform: none !important;
  }

  .features-track .feature-card {
    opacity: 1 !important;
    transform: none !important;
    min-width: 100% !important;
  }

  .features-progress {
    display: none !important;
  }

  /* Phase 2 - Plano cards visible immediately */
  .plano-card-animated {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Phase 2 - FAQ items visible immediately */
  .accordion-item {
    opacity: 1 !important;
    transform: none !important;
  }
}