/* ============================================
   MI ETAPA — Animations
   ============================================ */

/* === KEYFRAMES === */

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

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

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

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes floatCard {
  0%, 100% { transform: translateY(0px) rotate(-1deg); }
  50%       { transform: translateY(-8px) rotate(-1deg); }
}

@keyframes pulseGreen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45, 90, 61, 0.3); }
  50%       { box-shadow: 0 0 0 8px rgba(45, 90, 61, 0); }
}

@keyframes walkDot {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(4px); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes progressFill {
  from { width: 0; }
}

/* === VIEW TRANSITIONS === */

@keyframes slide-to-left {
  to { transform: translateX(-100%); }
}

@keyframes slide-from-right {
  from { transform: translateX(100%); }
}

@keyframes slide-to-right {
  to { transform: translateX(100%); }
}

@keyframes slide-from-left {
  from { transform: translateX(-100%); }
}

::view-transition-group(root) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

html:active-view-transition-type(forward)::view-transition-old(root) {
  animation-name: slide-to-left;
}
html:active-view-transition-type(forward)::view-transition-new(root) {
  animation-name: slide-from-right;
}

html:active-view-transition-type(backward)::view-transition-old(root) {
  animation-name: slide-to-right;
}
html:active-view-transition-type(backward)::view-transition-new(root) {
  animation-name: slide-from-left;
}

/* === SCROLL ANIMATIONS === */

.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.animate-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}

.animate-delay-1 { transition-delay: 100ms; }
.animate-delay-2 { transition-delay: 200ms; }
.animate-delay-3 { transition-delay: 300ms; }
.animate-delay-4 { transition-delay: 400ms; }

/* === HERO ANIMATIONS === */

.hero-content-enter {
  animation: slideUp 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-image-enter {
  animation: fadeIn 900ms ease both;
  animation-delay: 200ms;
}

.floating-card-animate {
  animation: floatCard 4s ease-in-out infinite;
  animation-delay: 1s;
}

/* === MICRO-ANIMATIONS === */

/* Pulsing recording dot */
.pulse {
  animation: pulseGreen 2s infinite;
}

/* Loading shimmer */
.shimmer {
  background: linear-gradient(
    90deg,
    var(--color-cream-dark) 25%,
    var(--color-cream-mid) 50%,
    var(--color-cream-dark) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.8s infinite;
}

/* Active playing indicator */
.playing-dot {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 16px;
}

.playing-dot span {
  display: block;
  width: 3px;
  background: var(--color-yellow-vivid);
  border-radius: 2px;
  animation: equalizerBar 1s ease-in-out infinite;
}

.playing-dot span:nth-child(1) { animation-delay: 0s;    height: 8px; }
.playing-dot span:nth-child(2) { animation-delay: 0.2s;  height: 14px; }
.playing-dot span:nth-child(3) { animation-delay: 0.4s;  height: 6px; }
.playing-dot span:nth-child(4) { animation-delay: 0.1s;  height: 12px; }

@keyframes equalizerBar {
  0%, 100% { transform: scaleY(0.5); }
  50%       { transform: scaleY(1.0); }
}

/* === REDUCED MOTION === */

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

  ::view-transition-group(root) {
    animation: none !important;
  }

  .floating-card-animate,
  .pulse {
    animation: none;
  }
}