/* Entrada da capa: camadas suaves, sem bloquear a navegação. */
@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow,
  .hero h1,
  .hero-lead,
  .hero .actions {
    animation: hero-copy-in .8s cubic-bezier(.22, 1, .36, 1) both;
  }

  .hero .eyebrow { animation-delay: .08s; }
  .hero h1 { animation-delay: .2s; }
  .hero-lead { animation-delay: .38s; }
  .hero .actions { animation-delay: .52s; }

  .hero-art {
    animation: hero-image-in 1.15s cubic-bezier(.22, 1, .36, 1) .16s both;
  }

  .hero-art .art-frame {
    animation: hero-photo-focus 1.5s cubic-bezier(.22, 1, .36, 1) .16s both;
  }

  @keyframes hero-copy-in {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes hero-image-in {
    from { opacity: 0; clip-path: inset(0 0 100% 0); }
    to { opacity: 1; clip-path: inset(0 0 0 0); }
  }

  @keyframes hero-photo-focus {
    from { background-size: 108% auto; }
    to { background-size: 100% auto; }
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .hero-art .art-frame { animation: none; }
}