/* =========================================================================
   UX & MOTION POLISH
   Linear/Vercel-level interaction and physics enhancements.
   ========================================================================= */

/* --- 1. KEYBOARD FOCUS ONLY (Accessibility + Mouse Polish) --- */
/* Removes ugly focus rings when clicking with a mouse, 
   but preserves them for keyboard navigation (WCAG AAA compliant). */
:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

:focus-visible {
    outline: 2px solid var(--focus-ring-color, rgba(168, 197, 69, 0.45));
    outline-offset: var(--focus-ring-offset, 2px);
    transition: outline-color 0.2s ease;
}

/* --- 2. SCROLLBAR GUTTER (Layout Thrashing Fix) --- */
/* Prevents the entire page from shifting left when a scrollbar appears. */
html {
    scrollbar-gutter: stable;
}

/* --- 3. HARDWARE ACCELERATION FOR ANIMATIONS --- */
/* GPU compositing for lightweight interactive elements only.
   .post and .topic-card are excluded: with 100+ instances on a page,
   permanent GPU layers saturate mobile VRAM and cause tab crashes.
   They get hover-only promotion via performance-optimizations.css. */
.btn {
    will-change: transform, box-shadow;
    /* translateZ(0) acts as a forcing function for older webkit engines */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* --- 4. TAP HIGHLIGHT RESET (Mobile Polish) --- */
/* Removes the native grey tap flash on iOS in favor of our own active states. */
* {
    -webkit-tap-highlight-color: transparent;
}

/* --- 5. NATURAL SCROLL BEHAVIOR --- */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* --- 6. GHOST DRAG PREVENTION --- */
/* Prevents dragging images and links which ruins immersion in web apps */
img,
a {
    -webkit-user-drag: none;
}

/* --- 7. BUTTON ACTIVE STATES (Spring physics simulation) --- */
/* Simulates physical spring compression when a button is held down.
   NOTE: .topic-card excluded — its :active is handled in style.css with
   @media (hover:hover/none) guards to prevent scroll-induced flicker on mobile. */
.btn:active,
.icon-btn:active {
    transform: scale(0.97) translateY(0);
    transition: transform 0.1s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Special case: Floating action buttons compress more */
.btn-create-topic:active {
    transform: scale(0.94);
}