/* ============================================================
   ANIMATIONS.CSS — Micro animações e transições globais
   ============================================================ */

/* ── Respeitar preferência de movimento reduzido ──────────── */
@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;
  }
}

/* ── Entrada de elementos genérica ───────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

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

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

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

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

/* ── Classes utilitárias de animação ─────────────────────── */
.animate-fade-in       { animation: fadeIn       var(--duration-base) var(--ease-out) both; }
.animate-fade-in-up    { animation: fadeInUp     var(--duration-slow) var(--ease-out) both; }
.animate-fade-in-down  { animation: fadeInDown   var(--duration-slow) var(--ease-out) both; }
.animate-fade-in-scale { animation: fadeInScale  var(--duration-slow) var(--ease-spring) both; }

/* Delays utilitários */
.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; }

/* ── Ondas decorativas ────────────────────────────────────── */
@keyframes wave {
  0%       { transform: translateX(0); }
  100%     { transform: translateX(-50%); }
}

.wave-decoration {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 60px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60'%3E%3Cpath fill='%23FAFCFF' fill-opacity='1' d='M0,30 C360,60 720,0 1080,30 C1260,45 1380,20 1440,30 L1440,60 L0,60 Z'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 1440px 60px;
  animation: wave 8s linear infinite;
  pointer-events: none;
}

/* ── Spinner de carregamento ──────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--color-gray-200);
  border-top-color: var(--color-ocean);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* ── Page Loader ──────────────────────────────────────────── */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  transition: opacity var(--duration-slow) var(--ease-out);
}

.page-loader.fade-out {
  opacity: 0;
  pointer-events: none;
}