/* modern-animations.css – Additional microinteraction and transition styles for Mr T Tribute site */

/* Fade-in animation for hero banners, cards, sections */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(40px) scale(.98); }
  65% { opacity: .85; transform: translateY(-6px) scale(1.01);}
  100% { opacity: 1; transform: translateY(0) scale(1);}
}
.fade-in {
  animation: fadeInUp 0.7s cubic-bezier(.32,1.4,.44,1.02) both;
}

.card-anim, .section-anim, .timeline-highlight {
  animation: fadeInUp 0.6s cubic-bezier(.42,1.15,.52,1.03) both;
}

.cta-block {
  animation: fadeInUp 0.5s cubic-bezier(.35,1.25,.35,1.09) both;
}

/* Simple modal overlay fade */
@keyframes fadeModalIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.media-modal {
  animation: fadeModalIn 0.33s cubic-bezier(.21,1,.38,1.08) both;
}

/* Add interactive transforms for media gallery, nav, and credits */
.media-embed:hover, .timeline-entry:hover, .hero-banner-overlay:hover, .nav a:focus-visible {
  transition: box-shadow .28s cubic-bezier(.37,1.28,.25,.93), transform .16s cubic-bezier(.45,1.25,.23,1.03);
  box-shadow: 0 14px 44px #2f1e0799, 0 8px 24px #FFD70044;
  transform: scale(1.04) rotate(-1deg);
}

/* Extra attention: animated underline on nav links for active/hover states */
nav a.active, nav a[aria-current="page"], nav a:hover:not(.active) {
  position: relative;
}
nav a.active::after, nav a[aria-current="page"]::after {
  content: "";
  display: block;
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 5px;
  height: 3px;
  background: linear-gradient(90deg,#FFD700 50%,#fffbe7 100%);
  border-radius: 2px;
  opacity: 0.85;
  animation: fadeInUp 0.65s cubic-bezier(.37,1.15,.39,1.03) both;
}