/**
 * ==========================================================================
 * ETERNIZE — MICRO-ANIMATIONS & KEYFRAMES (v3 — HUMAN WARMTH)
 * ==========================================================================
 * Animações com propósito: respondem ao scroll, cursor e contexto musical.
 * Sem pulses genéricos, shimmers tech ou glassmorphism.
 * Tudo é suave, orgânico e respeita prefers-reduced-motion.
 */

/* ---- KEYFRAMES ORGÂNICOS ---- */

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

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleInSoft {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

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

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

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}

@keyframes floatGentle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes grainShift {
  0%   { background-position: 0 0; }
  100% { background-position: 256px 256px; }
}

@keyframes soundWaveOrganic {
  0%   { height: 6px; border-radius: 4px; }
  50%  { height: 22px; border-radius: 6px; }
  100% { height: 10px; border-radius: 4px; }
}

@keyframes progressFillSmooth {
  from { width: 0%; }
  to   { width: var(--target-width, 100%); }
}

@keyframes stepCompleteBounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

@keyframes cardLift {
  from { opacity: 0; transform: translateY(32px) rotate(0.5deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0deg); }
}

@keyframes typewriterCursor {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ---- UTILITÁRIOS DE ANIMAÇÃO ---- */

.anim-fadeInUp {
  animation: fadeInUp 0.7s var(--ease-out) both;
}

.anim-fadeInDown {
  animation: fadeInDown 0.6s var(--ease-out) both;
}

.anim-scaleInSoft {
  animation: scaleInSoft 0.5s var(--ease-out) both;
}

.anim-slideInRight {
  animation: slideInRight 0.6s var(--ease-out) both;
}

.anim-slideInLeft {
  animation: slideInLeft 0.6s var(--ease-out) both;
}

.anim-delay-1 { animation-delay: 0.1s; }
.anim-delay-2 { animation-delay: 0.2s; }
.anim-delay-3 { animation-delay: 0.3s; }
.anim-delay-4 { animation-delay: 0.4s; }
.anim-delay-5 { animation-delay: 0.5s; }

/* ---- REVEAL ON SCROLL (Intersection Observer) ---- */

.reveal-fade {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out);
}

.reveal-fade.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.97);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
}

.reveal-scale.is-revealed {
  opacity: 1;
  transform: scale(1);
}

/* ---- BREATHING / FLOAT (elementos vivos, não mecânicos) ---- */

.anim-breathe {
  animation: breathe 4s var(--ease-in-out) infinite;
}

.anim-float {
  animation: floatGentle 5s var(--ease-in-out) infinite;
}

/* ---- EQUALIZER ORGÂNICO (player de música) ---- */

.audio-player-card.is-playing .eq-bar:nth-child(1) { animation: soundWaveOrganic 0.9s ease-in-out infinite alternate; }
.audio-player-card.is-playing .eq-bar:nth-child(2) { animation: soundWaveOrganic 1.2s ease-in-out infinite alternate 0.15s; }
.audio-player-card.is-playing .eq-bar:nth-child(3) { animation: soundWaveOrganic 0.8s ease-in-out infinite alternate 0.3s; }
.audio-player-card.is-playing .eq-bar:nth-child(4) { animation: soundWaveOrganic 1.1s ease-in-out infinite alternate 0.1s; }
.audio-player-card.is-playing .eq-bar:nth-child(5) { animation: soundWaveOrganic 1.0s ease-in-out infinite alternate 0.25s; }

/* ---- HOVER INTERACTIONS (micro-respostas ao cursor) ---- */

.hover-lift {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.hover-glow-terra {
  transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.hover-glow-terra:hover {
  box-shadow: var(--shadow-terra);
  border-color: var(--color-border-terra-hover);
}

/* ---- REDUCED MOTION (respeito absoluto) ---- */

@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;
  }

  .reveal-fade,
  .reveal-scale,
  .anim-fadeInUp,
  .anim-fadeInDown,
  .anim-scaleInSoft,
  .anim-slideInRight,
  .anim-slideInLeft {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .anim-breathe,
  .anim-float {
    animation: none !important;
  }
}