/* =============================================
   ANIMATIONS
   ============================================= */

@keyframes fadeDown {
  from {
    opacity: 0.01;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0.01;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Keep first paint deterministic on constrained/mobile devices. */
@media (max-width: 767px), (hover: none), (prefers-reduced-motion: reduce) {
  .header,
  .card,
  .portfolio__avatar,
  .footer {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}