/* === Animações Suaves Reutilizáveis === */

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

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

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

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

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

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

/* === Classes de animação === */

.fade-in {
  opacity: 0;
  animation: fadeIn 0.8s ease-out forwards;
}

.slide-up {
  opacity: 0;
  animation: slideUp 0.8s ease-out forwards;
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}

.float {
  animation: float 3s ease-in-out infinite;
}

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

/* === Delays escalonados === */

.hero .subtitle { animation-delay: 0.1s; }
.hero .title { animation-delay: 0.3s; }
.hero .name { animation-delay: 0.5s; }
.hero .age-badge { animation-delay: 0.7s; }
.photo-section { animation-delay: 0.9s; }
.info-section { animation-delay: 1.1s; }
.countdown-section { animation-delay: 1.3s; }
.form-section { animation-delay: 1.5s; }
footer { animation-delay: 1.7s; }

/* === Hover suave global === */

.info-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(233, 30, 123, 0.15);
}

.time-box {
  transition: transform 0.3s ease;
}

.time-box:hover {
  transform: scale(1.05);
}

/* === Responsivo === */

@media (max-width: 400px) {
  .title { font-size: 2.5rem; }
  .name { font-size: 1.6rem; }
  .countdown { gap: 8px; }
  .time-box { min-width: 60px; padding: 10px 8px; }
  .time-box span { font-size: 1.4rem; }
}