@tailwind base;
@tailwind components;
@tailwind utilities;

/* ==========================================================================
   PROJECT & CERTIFICATE CARDS FLOAT ANIMATION (MCLAREN F1 TELEMETRY)
   ========================================================================== */
@keyframes f1CardFloat {
    0%, 100% {
        translate: 0 -8px;
    }
    50% {
        translate: 0 -14px;
    }
}

.f1-float-card,
#work .grid > article,
#work .grid > div:not(.col-span-full),
#selected-work .grid > article,
#selected-work .grid > div:not(.col-span-full),
#projects .grid > article,
#projects .grid > div:not(.col-span-full),
#recent-projects .grid > article,
#recent-projects .grid > div:not(.col-span-full),
#certificates .grid > article,
#certificates .grid > div:not(.col-span-full) {
    translate: 0 0;
    transition:
        translate 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.24s ease,
        background-color 0.24s ease,
        filter 0.24s ease;
    will-change: translate, filter;
}

.f1-float-card:hover,
.f1-float-card:focus-within,
#work .grid > article:hover,
#work .grid > article:focus-within,
#work .grid > div:not(.col-span-full):hover,
#work .grid > div:not(.col-span-full):focus-within,
#selected-work .grid > article:hover,
#selected-work .grid > article:focus-within,
#selected-work .grid > div:not(.col-span-full):hover,
#selected-work .grid > div:not(.col-span-full):focus-within,
#projects .grid > article:hover,
#projects .grid > article:focus-within,
#projects .grid > div:not(.col-span-full):hover,
#projects .grid > div:not(.col-span-full):focus-within,
#recent-projects .grid > article:hover,
#recent-projects .grid > article:focus-within,
#recent-projects .grid > div:not(.col-span-full):hover,
#recent-projects .grid > div:not(.col-span-full):focus-within,
#certificates .grid > article:hover,
#certificates .grid > article:focus-within,
#certificates .grid > div:not(.col-span-full):hover,
#certificates .grid > div:not(.col-span-full):focus-within {
    translate: 0 -8px;
    border-color: var(--accent-papaya, #ff8000);
    filter: drop-shadow(0 16px 26px rgba(255, 128, 0, 0.24));
    animation: f1CardFloat 2.4s ease-in-out 0.22s infinite;
}

@media (prefers-reduced-motion: reduce) {
    .f1-float-card,
    #work .grid > article,
    #work .grid > div:not(.col-span-full),
    #selected-work .grid > article,
    #selected-work .grid > div:not(.col-span-full),
    #projects .grid > article,
    #projects .grid > div:not(.col-span-full),
    #recent-projects .grid > article,
    #recent-projects .grid > div:not(.col-span-full),
    #certificates .grid > article,
    #certificates .grid > div:not(.col-span-full) {
        animation: none !important;
        translate: none !important;
        transition: none !important;
    }
}