/**
 * ═══════════════════════════════════════════════════════
 *  Ciao Digital — animations.css
 *  Complementa o animations.js com micro-interações CSS
 * ═══════════════════════════════════════════════════════
 */

/* ── Estado inicial dos elementos animados ──
   Evita flash de conteúdo antes do JS rodar     */
#hero-billboard .hero-badge,
#hero-billboard h1,
#hero-billboard p,
#hero-billboard .hero-actions,
.row-title,
.row-see-all,
.ciao-about-label,
.ciao-about-title,
.ciao-about-text,
.ciao-about-cta,
.ciao-stat,
.media-card,
.whatsapp-fab {
  visibility: hidden; /* JS restaura para visible ao animar */
}

/* ── Hover nos cards — lift suave ── */
.media-card {
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.32s ease;
}
.media-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  z-index: 2;
}

/* ── Hover nos botões do hero ── */
.btn-hero-primary,
.btn-hero-secondary {
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-hero-primary:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 24px rgba(229, 9, 20, 0.5);
  filter: brightness(1.1);
}
.btn-hero-secondary:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
}

/* ── Hover no botão CTA Sobre ── */
.btn-cta-accent {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-cta-accent:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45);
}

/* ── Stats — número grande em destaque ── */
.ciao-stat strong {
  display: inline-block;
  transition: transform 0.3s ease;
}
.ciao-stat:hover strong {
  transform: scale(1.12);
}

/* ── FAB WhatsApp ── */
.whatsapp-fab {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s ease;
}
.whatsapp-fab:hover {
  transform: scale(1.18) rotate(-8deg);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.55);
}

/* ── Row titles — underline animado ── */
.row-title {
  position: relative;
  display: inline-block;
}
.row-title::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: #e50914;
  transition: width 0.5s ease 0.3s; /* delay para esperar a entrada */
}
.row-title.underline-active::after {
  width: 100%;
}

/* ── Reduce motion (acessibilidade) ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay:    0ms    !important;
    transition-duration: 0.01ms !important;
  }
  #hero-billboard .hero-badge,
  #hero-billboard h1,
  #hero-billboard p,
  #hero-billboard .hero-actions,
  .row-title,
  .row-see-all,
  .ciao-about-label,
  .ciao-about-title,
  .ciao-about-text,
  .ciao-about-cta,
  .ciao-stat,
  .media-card,
  .whatsapp-fab {
    visibility: visible !important;
  }
}