/* Explain: Adds motion layer animations for scroll reveals, hovers, and ambient effects. */
/* ==========================================================================
   Motion layer — scroll reveals, micro-interactions and ambient movement.
   The hidden pre-reveal state is only applied once JavaScript adds the
   .js-anim class to <html>, so all content stays visible without JS.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

    /* --- Scroll reveal ------------------------------------------------- */
    .js-anim .reveal-target {
        opacity: 0;
    }

    .js-anim .reveal-target.is-visible {
        opacity: 1;
        animation: revealUp 750ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
        animation-delay: var(--reveal-delay, 0ms);
    }

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

    /* --- Card hover lift ----------------------------------------------- */
    article.site-card,
    figure.site-card,
    div.site-card {
        transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
    }

    article.site-card:hover,
    figure.site-card:hover,
    div.site-card:hover {
        border-color: var(--primary-color);
        box-shadow: var(--shadow-soft);
        transform: translateY(-6px);
    }

    /* --- Button lift --------------------------------------------------- */
    .btn {
        transition: transform 250ms ease, box-shadow 250ms ease, background-color 250ms ease, color 250ms ease, border-color 250ms ease;
    }

    .btn:hover {
        transform: translateY(-2px);
    }

    .btn:active {
        transform: translateY(0);
    }

    /* --- Showcase frame motion ------------------------------------------ */
    .browser-frame img {
        transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .browser-frame:hover img {
        transform: scale(1.06);
    }

    .browser-bar {
        transition: background 300ms ease;
    }

    .browser-frame:hover .browser-bar {
        background: var(--surface-strong);
    }

    /* --- Ambient background motion -------------------------------------- */
    .soft-grid-bg {
        animation: gridPan 26s linear infinite;
    }

    @keyframes gridPan {
        from {
            background-position: 0 0;
        }
        to {
            background-position: 42px 42px;
        }
    }

    .drift-blob {
        animation: driftBlob 16s ease-in-out infinite;
    }

    @keyframes driftBlob {
        0%,
        100% {
            translate: 0 0;
            scale: 1;
        }
        50% {
            translate: -22px 26px;
            scale: 1.06;
        }
    }

    /* --- Small ambient accents ------------------------------------------ */
    .section-kicker i {
        animation: kickerPulse 3.4s ease-in-out infinite;
    }

    @keyframes kickerPulse {
        0%,
        100% {
            opacity: 1;
            transform: scale(1);
        }
        50% {
            opacity: 0.85;
            transform: scale(1.14);
        }
    }

    /* --- Navigation underline ------------------------------------------- */
    .nav-link {
        position: relative;
    }

    .nav-link::after {
        content: "";
        position: absolute;
        left: 0.85rem;
        right: 0.85rem;
        bottom: 0.4rem;
        height: 2px;
        border-radius: 999px;
        background: var(--primary-color);
        transform: scaleX(0);
        transition: transform 260ms ease;
    }

    .nav-link:hover::after,
    .nav-link:focus-visible::after {
        transform: scaleX(1);
    }
}

/* --- Shimmering accent text --------------------------------------------- */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    @media (prefers-reduced-motion: no-preference) {
        .shimmer-text {
            background-image: linear-gradient(100deg, var(--primary-color) 0%, var(--accent-color) 42%, var(--primary-color) 78%);
            background-size: 220% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            animation: shimmerText 7s ease-in-out infinite;
        }

        @keyframes shimmerText {
            0%,
            100% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
        }
    }
}