/* ==========================================================================
   KAIROS SEARCH
   Animation Stylesheet
   File: css/animations.css
   ========================================================================== */

/* ==========================================================================
   GLOBAL TRANSITIONS
   ========================================================================== */

/* Optimized to only transition specific properties, avoiding heavy layout repaints */
*,
*::before,
*::after {
    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        opacity 0.3s ease;
}

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(48px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideRight {
    from {
        opacity: 0;
        transform: translateX(-48px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes heroReveal {
    0% {
        opacity: 0;
        transform: translateY(32px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   REUSABLE ANIMATION CLASSES
   ========================================================================== */

.fade-in { animation: fadeIn .8s ease both; }
.fade-up { animation: fadeUp .8s ease both; }
.slide-left { animation: slideLeft .8s ease both; }
.slide-right { animation: slideRight .8s ease both; }
.zoom-in { animation: zoomIn .8s ease both; }

/* ==========================================================================
   HERO ANIMATION
   ========================================================================== */

.hero .eyebrow { animation: heroReveal .7s ease .1s both; }
.hero h1 { animation: heroReveal .8s ease .25s both; }
.hero .hero-text { animation: heroReveal .9s ease .45s both; }
.hero .hero-actions { animation: heroReveal 1s ease .65s both; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.button {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }

.button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.12);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.button:hover::after { opacity: 1; }

/* ==========================================================================
   CARDS
   ========================================================================== */

.card {
    transform: translateY(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card:hover { transform: translateY(-8px); }
.card:active { transform: translateY(-3px); }

/* ==========================================================================
   NAVIGATION UNDERLINE
   ========================================================================== */

.nav-menu a {
    position: relative;
}

.nav-menu a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 100%;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .3s ease;
}

.nav-menu a:hover::after,
.nav-menu a:focus-visible::after,
.nav-menu a[aria-current="page"]::after {
    transform: scaleX(1);
}

/* ==========================================================================
   LOGO (Fixed: Scaled down hover state completely removed)
   ========================================================================== */

.logo img {
    transition: opacity .3s ease;
}

.logo:hover img {
    /* Kept intentionally clean and static to stick to the background */
}

/* ==========================================================================
   BACK TO TOP
   ========================================================================== */

.back-to-top {
    transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
}

.back-to-top:hover {
    transform: translateY(-4px);
}

/* ==========================================================================
   SECTION REVEAL
   ========================================================================== */

.section-header { animation: fadeUp .8s ease both; }
.section p { animation: fadeIn 1s ease both; }

/* ==========================================================================
   FOCUS STATES
   ========================================================================== */

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}