/**
 * Animações para o tema Lotofacil Elite
 * Este arquivo contém animações sutis para melhorar a experiência do usuário
 */

/* Definição de animações */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

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

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

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

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

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

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

/* Classes de animação */
.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

.slide-in-right {
  animation: slideInRight 0.5s ease forwards;
}

.slide-in-left {
  animation: slideInLeft 0.5s ease forwards;
}

.scale-in {
  animation: scaleIn 0.5s ease forwards;
}

.pulse {
  animation: pulse 2s infinite;
}

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

/* Animações para elementos específicos */

/* Header - animar logo e menu */
.site-header .site-logo,
.site-header .site-title {
  animation: fadeIn 0.5s ease;
}

.primary-menu-container ul#primary-menu li,
.primary-menu-container ul.menu li {
  opacity: 0;
  animation: slideInRight 0.3s ease forwards;
}

/* Atrasar a animação de cada item do menu */
.primary-menu-container ul#primary-menu li:nth-child(1),
.primary-menu-container ul.menu li:nth-child(1) {
  animation-delay: 0.1s;
}

.primary-menu-container ul#primary-menu li:nth-child(2),
.primary-menu-container ul.menu li:nth-child(2) {
  animation-delay: 0.2s;
}

.primary-menu-container ul#primary-menu li:nth-child(3),
.primary-menu-container ul.menu li:nth-child(3) {
  animation-delay: 0.3s;
}

.primary-menu-container ul#primary-menu li:nth-child(4),
.primary-menu-container ul.menu li:nth-child(4) {
  animation-delay: 0.4s;
}

.primary-menu-container ul#primary-menu li:nth-child(5),
.primary-menu-container ul.menu li:nth-child(5) {
  animation-delay: 0.5s;
}

.primary-menu-container ul#primary-menu li:nth-child(n+6),
.primary-menu-container ul.menu li:nth-child(n+6) {
  animation-delay: 0.6s;
}

/* Animação para títulos de página */
.entry-title {
  animation: fadeIn 0.7s ease;
}

/* Animação para cards */
.card, .bg-white, .dark\:bg-gray-700 {
  opacity: 0;
  animation: scaleIn 0.5s ease forwards;
}

/* Atrasar a animação de cada card */
.grid > div:nth-child(1) .card,
.grid > div:nth-child(1).card,
.grid > div:nth-child(1).bg-white,
.grid > div:nth-child(1).dark\:bg-gray-700 {
  animation-delay: 0.1s;
}

.grid > div:nth-child(2) .card,
.grid > div:nth-child(2).card,
.grid > div:nth-child(2).bg-white,
.grid > div:nth-child(2).dark\:bg-gray-700 {
  animation-delay: 0.2s;
}

.grid > div:nth-child(3) .card,
.grid > div:nth-child(3).card,
.grid > div:nth-child(3).bg-white,
.grid > div:nth-child(3).dark\:bg-gray-700 {
  animation-delay: 0.3s;
}

.grid > div:nth-child(4) .card,
.grid > div:nth-child(4).card,
.grid > div:nth-child(4).bg-white,
.grid > div:nth-child(4).dark\:bg-gray-700 {
  animation-delay: 0.4s;
}

.grid > div:nth-child(n+5) .card,
.grid > div:nth-child(n+5).card,
.grid > div:nth-child(n+5).bg-white,
.grid > div:nth-child(n+5).dark\:bg-gray-700 {
  animation-delay: 0.5s;
}

/* Animação para bolas da loteria */
.lottery-ball {
  animation: scaleIn 0.3s ease;
}

/* Animação para botões */
.btn, 
.wp-element-button,
button[type="submit"],
input[type="submit"] {
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.btn:hover, 
.wp-element-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.btn:active, 
.wp-element-button:active,
button[type="submit"]:active,
input[type="submit"]:active {
  transform: translateY(0);
}

/* Animação para inputs */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Animação para alertas */
.alert {
  animation: slideInLeft 0.5s ease;
}

/* Animação para o botão de tema escuro */
#dark-mode-toggle {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#dark-mode-toggle:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

/* Animação para o spinner de carregamento */
.spinner {
  animation: spin 1s linear infinite;
}

/* Efeito de carregamento para elementos */
.loading {
  position: relative;
  overflow: hidden;
}

.loading::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.2) 50%, 
    rgba(255, 255, 255, 0) 100%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

.dark .loading::after {
  background: linear-gradient(90deg, 
    rgba(30, 30, 60, 0) 0%, 
    rgba(30, 30, 60, 0.3) 50%, 
    rgba(30, 30, 60, 0) 100%);
  background-size: 1000px 100%;
}

/* Animação para o footer */
.site-footer {
  animation: fadeIn 1s ease;
}

/* Desativar animações se o usuário preferir reduzir o movimento */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}