/* Motion Design & Compositor-Friendly Interaction Architecture */

:root {
    --ease-out-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 180ms;
    --duration-medium: 300ms;
    --duration-slow: 450ms;
}

html {
    scroll-behavior: smooth;
}

/* Scroll margin for sticky header anchor navigation */
section[id] {
    scroll-margin-top: 100px;
}

/* Page Scroll Progress Bar - Compositor-friendly transform scaleX */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2.5px;
    background: #2563EB;
    transform: scaleX(0);
    transform-origin: left center;
    z-index: 100;
    will-change: transform;
}

/* Ambient Hero Background Drift */
@keyframes ambientDrift {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 0%; }
}

.ambient-hero-bg {
    background-image: radial-gradient(ellipse at 50% -20%, rgba(37, 99, 235, 0.08), transparent 70%),
                      radial-gradient(ellipse at 80% 60%, rgba(59, 130, 246, 0.04), transparent 50%);
    background-size: 150% 150%;
    animation: ambientDrift 25s ease infinite;
}

/* Staggered Scroll Reveal System */
[data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--duration-slow) var(--ease-out-spring),
                transform var(--duration-slow) var(--ease-out-spring);
    will-change: opacity, transform;
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

[data-reveal-delay="1"] { transition-delay: 60ms; }
[data-reveal-delay="2"] { transition-delay: 120ms; }
[data-reveal-delay="3"] { transition-delay: 180ms; }
[data-reveal-delay="4"] { transition-delay: 240ms; }
[data-reveal-delay="5"] { transition-delay: 300ms; }

/* Micro Interaction Classes */
.card-hover-effect {
    transition: transform var(--duration-medium) var(--ease-out-spring),
                border-color var(--duration-medium) var(--ease-out-spring),
                box-shadow var(--duration-medium) var(--ease-out-spring);
    will-change: transform;
}

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

.card-hover-effect:hover .cta-arrow {
    transform: translateX(4px);
}

.card-hover-effect:hover .logo-scale {
    transform: scale(1.03);
}

.cta-arrow, .logo-scale {
    transition: transform var(--duration-fast) var(--ease-out-spring);
    will-change: transform;
}

/* Verified Badge Accessible Tooltip System (Hover + Keyboard Focus) */
.tooltip-trigger {
    position: relative;
}

.tooltip-trigger .tooltip-content {
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--duration-fast) var(--ease-out-spring),
                transform var(--duration-fast) var(--ease-out-spring),
                visibility var(--duration-fast) var(--ease-out-spring);
    pointer-events: none;
}

.tooltip-trigger:hover .tooltip-content,
.tooltip-trigger:focus .tooltip-content,
.tooltip-trigger:focus-within .tooltip-content {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* Rating Distribution Bar Animation - Compositor-friendly transform scaleX */
.rating-bar-fill {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 600ms var(--ease-out-spring);
    will-change: transform;
}

/* Filter Soft Update Pulse */
.filter-refreshing {
    opacity: 0.45;
    transition: opacity var(--duration-fast) ease-out;
}

/* Prefers Reduced Motion Accessibility Override */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
    .ambient-hero-bg {
        animation: none !important;
    }
    #scroll-progress {
        display: none !important;
    }
    .rating-bar-fill {
        transform: scaleX(1) !important;
    }
}

/* Enhanced Bold & Distinct H2 Heading Typography System */
.prose h2,
article h2 {
    font-size: 1.65rem;
    line-height: 1.35;
    font-weight: 800 !important;
    color: #0f172a !important; /* slate-900 */
    letter-spacing: -0.02em;
    margin-top: 2.5rem !important;
    margin-bottom: 1.25rem !important;
    padding-left: 0.85rem;
    border-left: 4px solid #2563eb; /* brand-600 accent bar */
    border-bottom: 1px solid #f1f5f9; /* slate-100 line */
    padding-bottom: 0.5rem;
}

@media (min-width: 640px) {
    .prose h2,
    article h2 {
        font-size: 1.875rem; /* text-3xl */
    }
}