/* ============================================================
   animations.css — Keyframes e classes de animação
   ============================================================ */

/* ---------- Keyframes de layout ---------- */
@keyframes logoFadeIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* Letras entrando da esquerda */
@keyframes letterFromLeft {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Letras entrando da direita */
@keyframes letterFromRight {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Letras caindo do topo com bounce */
@keyframes letterFromTop {
  0%   { opacity: 0; transform: translateY(-80px) scaleY(0.8); }
  60%  { opacity: 1; transform: translateY(8px)  scaleY(1.05); }
  80%  { transform: translateY(-4px) scaleY(0.97); }
  100% { opacity: 1; transform: translateY(0)    scaleY(1); }
}

/* Bounce dos pontos de loading */
@keyframes dotBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.6; }
  40%           { transform: translateY(-14px); opacity: 1; }
}

/* Fade genérico (para transições de tela) */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

/* ── Badge de pares: chacoalha ao receber novo par ───────────────── */
@keyframes badge-shake {
  0%   { transform: scale(1)    rotate(0deg); }
  12%  { transform: scale(1.22) rotate(-6deg); }
  28%  { transform: scale(1.28) rotate(5deg)  translateX(2px); }
  44%  { transform: scale(1.18) rotate(-4deg) translateX(-2px); }
  62%  { transform: scale(1.12) rotate(3deg); }
  78%  { transform: scale(1.07) rotate(-2deg); }
  92%  { transform: scale(1.03) rotate(1deg); }
  100% { transform: scale(1)    rotate(0deg); }
}

.pairs-badge--shaking {
  animation: badge-shake 0.52s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* ---------- Classes utilitárias de animação ---------- */
.anim-fade-in {
  animation: fadeIn var(--transition-slow) forwards;
}

/* ---------- Classes de letras geradas pelo LetterAnimator ---------- */
.letter-from-left {
  animation: letterFromLeft 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.letter-from-right {
  animation: letterFromRight 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.letter-from-top {
  animation: letterFromTop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Estado inicial: letra invisível antes de animar */
.letter-span {
  opacity: 0;
}

/* ---------- LoadingDots ---------- */
.loading-dots__dot:nth-child(1) {
  animation: dotBounce 1.2s ease-in-out 0s infinite;
}
.loading-dots__dot:nth-child(2) {
  animation: dotBounce 1.2s ease-in-out 0.2s infinite;
}
.loading-dots__dot:nth-child(3) {
  animation: dotBounce 1.2s ease-in-out 0.4s infinite;
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  /* Desabilita todas as animações */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Garante que as letras fiquem visíveis mesmo sem animar */
  .letter-span {
    opacity: 1 !important;
    transform: none !important;
  }

  .letter-from-top {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .loading-dots__dot {
    opacity: 1 !important;
    transform: none !important;
  }

  .splash-ice__hint {
    animation: none !important;
    opacity: 0.7 !important;
  }
}
/* ============================================================
   Responsividade por Orientação - Animações
   ============================================================ */

@media (orientation: landscape) {
  /* Reduz duração de animações em landscape para melhor performance */
  :root {
    --animation-duration: 0.3s;
  }

  .anim-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
  }

  .letter-animator {
    animation-duration: 0.08s;
  }

  /* Desativa animações em alturas muito pequenas */
  @media (max-height: 400px) {
    .anim-fade-in,
    .letter-animator,
    .loading-dots,
    .splash-ice__hint {
      animation: none !important;
    }
  }
}