/* =========================================================
   SITE-WIDE MICRO-INTERACTION LAYER
   Subtle motion, tactile feedback, and clearer interactive states.
   This file is loaded after page-specific CSS so behavior stays
   consistent without changing page structure or content.
   ========================================================= */

:root {
    --micro-fast: 140ms;
    --micro-medium: 190ms;
    --micro-slow: 240ms;
    --micro-ease: cubic-bezier(0.2, 0.75, 0.25, 1);
    --micro-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    --micro-shadow-raised: 0 16px 38px rgba(0, 0, 0, 0.36);
}

:where(a, button, input, select, textarea, summary, [role="button"]) {
    -webkit-tap-highlight-color: transparent;
}

:where(a, button, [role="button"]) {
    transition:
        transform var(--micro-medium) var(--micro-ease),
        box-shadow var(--micro-medium) ease,
        border-color var(--micro-fast) ease,
        background-color var(--micro-fast) ease,
        color var(--micro-fast) ease,
        opacity var(--micro-fast) ease,
        filter var(--micro-medium) ease,
        letter-spacing var(--micro-medium) ease;
}

:where(input, select, textarea) {
    transition:
        border-color var(--micro-fast) ease,
        background-color var(--micro-fast) ease,
        box-shadow var(--micro-medium) ease;
}

:where(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
    outline: 2px solid var(--accent, #ff4a54);
    outline-offset: 3px;
}

/* Branding / header */
.logo-banner a,
.mobile-brand,
.navigation-list a,
.navigation-toggle,
.navigation-close,
.site-logo {
    transition:
        transform var(--micro-medium) var(--micro-ease),
        filter var(--micro-medium) ease,
        border-color var(--micro-fast) ease,
        background-color var(--micro-fast) ease,
        color var(--micro-fast) ease,
        box-shadow var(--micro-medium) ease;
}

/* Shared buttons */
.primary-button,
.secondary-button,
.post-share-button,
.news-rail-button,
.media-kit-primary-button,
.media-kit-secondary-button,
.prediction-button {
    transform-origin: 50% 60%;
    will-change: transform;
}

.primary-button:active,
.secondary-button:active,
.post-share-button:active,
.news-rail-button:active,
.media-kit-primary-button:active,
.media-kit-secondary-button:active,
.prediction-button:active,
.navigation-toggle:active,
.navigation-close:active {
    transform: translateY(1px) scale(0.985);
    box-shadow: none;
}

/* Shared elevated surfaces */
.featured-article,
.article-card,
.post-navigation-card,
.post-archive-link,
.post-share,
.archive-tools,
.platform-card,
.privacy-email-card,
.contact-hero-main,
.about-hero-copy,
.simple-about-hero,
.privacy-hero,
.media-kit-card {
    transition:
        transform var(--micro-medium) var(--micro-ease),
        box-shadow var(--micro-medium) ease,
        border-color var(--micro-fast) ease,
        background-color var(--micro-fast) ease;
}

.featured-article:focus-within,
.article-card:focus-within,
.post-navigation-card:focus-within,
.post-archive-link:focus-within,
.post-share:focus-within,
.archive-tools:focus-within,
.platform-card:focus-within,
.privacy-email-card:focus-within,
.contact-hero-main:focus-within,
.about-hero-copy:focus-within,
.simple-about-hero:focus-within,
.privacy-hero:focus-within,
.media-kit-card:focus-within {
    border-color: rgba(255, 74, 84, 0.58);
    box-shadow: var(--micro-shadow-raised);
}

/* Image response inside editorial surfaces */
.featured-article img,
.article-card img,
.post-featured-image img,
.platform-card img,
.mma-gallery-image-button img,
.footer-socials img {
    transition:
        transform var(--micro-slow) var(--micro-ease),
        filter var(--micro-medium) ease,
        opacity var(--micro-fast) ease;
}

/* Text-link details */
.homepage-text-link,
.card-link,
.post-breadcrumbs a,
.footer-navigation a,
.footer-socials a,
.post-body a,
.about-email-link,
.contact-address,
.event-card-meta a {
    text-underline-offset: 0.16em;
    text-decoration-thickness: 1px;
}

/* Form / filter feedback */
.archive-tools input:focus,
.archive-tools select:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    border-color: var(--accent, #ff4a54);
    box-shadow: 0 0 0 3px rgba(255, 74, 84, 0.12);
}

@media (hover: hover) and (pointer: fine) {
    .logo-banner a:hover .site-logo {
        transform: translateY(-1px) scale(1.015);
        filter: brightness(1.05);
    }

    .mobile-brand:hover {
        color: #ffffff;
        transform: translateX(2px);
    }

    .navigation-list a:hover {
        transform: translateY(-1px);
    }

    .primary-button:hover,
    .secondary-button:hover,
    .post-share-button:hover,
    .news-rail-button:hover,
    .media-kit-primary-button:hover,
    .media-kit-secondary-button:hover,
    .prediction-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 7px 0 rgba(255, 255, 255, 0.08), 0 13px 24px rgba(0, 0, 0, 0.26);
    }

    .featured-article:hover,
    .article-card:hover,
    .post-navigation-card:hover,
    .post-archive-link:hover,
    .platform-card:hover,
    .privacy-email-card:hover,
    .media-kit-card:hover {
        transform: translateY(-3px);
        border-color: rgba(255, 255, 255, 0.28);
        box-shadow: var(--micro-shadow-raised);
    }

    .post-share:hover,
    .archive-tools:hover,
    .contact-hero-main:hover,
    .about-hero-copy:hover,
    .simple-about-hero:hover,
    .privacy-hero:hover {
        border-color: rgba(255, 255, 255, 0.24);
        box-shadow: var(--micro-shadow);
    }

    .featured-article:hover img,
    .article-card:hover img,
    .platform-card:hover img {
        transform: scale(1.018);
        filter: contrast(1.025) brightness(1.025);
    }

    .post-navigation-card:hover .post-navigation-label,
    .card-link:hover,
    .homepage-text-link:hover,
    .post-breadcrumbs a:hover,
    .footer-navigation a:hover {
        letter-spacing: 0.065em;
    }

    .card-link:hover,
    .homepage-text-link:hover,
    .footer-navigation a:hover {
        transform: translateX(2px);
    }

    .footer-socials a:hover {
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, 0.24);
        box-shadow: 0 9px 22px rgba(0, 0, 0, 0.28);
    }

    .footer-socials a:hover img {
        transform: scale(1.06) rotate(-2deg);
    }

    .post-body a:hover {
        text-decoration-thickness: 2px;
    }

    .archive-tools input:hover,
    .archive-tools select:hover,
    input:hover,
    select:hover,
    textarea:hover {
        border-color: rgba(255, 255, 255, 0.34);
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(a, button, input, select, textarea, summary, [role="button"]),
    .site-logo,
    .featured-article,
    .article-card,
    .post-navigation-card,
    .post-archive-link,
    .post-share,
    .archive-tools,
    .platform-card,
    .privacy-email-card,
    .contact-hero-main,
    .about-hero-copy,
    .simple-about-hero,
    .privacy-hero,
    .media-kit-card,
    .featured-article img,
    .article-card img,
    .post-featured-image img,
    .platform-card img,
    .mma-gallery-image-button img,
    .footer-socials img {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Keep event exploration independent from the moving news rail. */
.site-event-stack.is-open ~ .site-news-ticker .site-news-track {
    animation-play-state: running !important;
}

.site-event-stack.is-open ~ .site-news-ticker .site-news-viewport:hover .site-news-track,
.site-event-stack.is-open ~ .site-news-ticker .site-news-viewport:focus-within .site-news-track {
    animation-play-state: paused !important;
}