/* Custom animations used by the site
         - Provides both "fade-up" and "fade-in" animations
         - Adds small "delay-" utility classes as aliases so HTML that uses
             `delay-200`, `delay-400`, `delay-600` works without requiring Tailwind
             to provide those utilities (useful when mixing CDNs / versions).
    */

    @keyframes fade-up {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fade-in {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    /* Animation helper classes */
    .animate-fade-up {
        animation: fade-up 1s ease-out forwards;
    }

    .animate-fade-in {
        animation: fade-in 0.9s ease-out forwards;
    }

    /* Delay helpers (named to match classes used in `index.html`) */
    .delay-200 { animation-delay: 0.2s !important; }
    .delay-400 { animation-delay: 0.4s !important; }
    .delay-600 { animation-delay: 0.6s !important; }

    /* Backwards-compatible names (in case any markup used these) */
    .animation-delay-200 { animation-delay: 0.2s !important; }
    .animation-delay-400 { animation-delay: 0.4s !important; }
    .animation-delay-600 { animation-delay: 0.6s !important; }

    /* Small utility to ensure transitions for opacity are smooth */
    .transition-opacity {
        transition: opacity 1s ease-in-out;
    }

    /* Small accessibility improvement: prefer-reduced-motion respect */
    @media (prefers-reduced-motion: reduce) {
        .animate-fade-up,
        .animate-fade-in {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
        }
        .delay-200, .delay-400, .delay-600,
        .animation-delay-200, .animation-delay-400, .animation-delay-600 {
            transition-delay: 0s !important;
            animation-delay: 0s !important;
        }
    }

/* Contact card specific fixes to prevent long words (emails) from overflowing
   - `.ml-4` inside flex should allow shrinking (min-width:0)
   - allow word breaks and wrapping inside anchors and paragraphs
*/
.contact-card .ml-4 { min-width: 0; }
.contact-card a, .contact-card p {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Make links block-level to help wrapping across narrow columns (optional) */
.contact-card a { display: inline-block; }