/* Cross-cutting overrides - THIS FILE MUST LOAD LAST.
   Everything here beats a component by source order, not specificity, so moving it earlier
   silently breaks it: the shared card hover, the scroll reveal, the global breakpoints
   that patch nav/stats/spotlight/tier, and the reduced-motion kill. */

/* ---------- Depth: one hover treatment for every card surface ----------
   Cards keep their own transform (the roster/carousel lift); everything else reacts with
   edge + shadow only, so this can't fight the reveal animation below. */
.card, .req, .fact, .tier {
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.card:hover, .req:hover, .fact:hover, .tier:hover {
    border-color: color-mix(in srgb, var(--blue) 45%, var(--border));
    box-shadow: var(--shadow-lg);
}
.fact:hover { border-left-color: var(--red); }

/* Scroll reveal, CSS only. Guarded by @supports so browsers without scroll-driven
   animations simply render the content - nothing is hidden by default. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .card, .tier, .req, .fact, .spotlight, .pyramid, .stats-grid > div {
            animation: rlag-rise linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 38%;
        }
    }
}
@keyframes rlag-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 52rem) {
    .spotlight { grid-template-columns: 1fr; }
    .spot-side { flex-direction: column-reverse; }
}
@media (max-width: 52rem) {
    .stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
    .stats-grid { gap: 1rem; }
    .spot-stats { gap: .3rem 1rem; }
    .tier { grid-template-columns: minmax(0, 1fr); gap: .35rem; padding: 1.15rem 1.15rem 1.25rem 1.4rem; }
    .tier-step { font-size: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto; } }