/* ==========================================================================
   TwitchLift — UX Enhancement Layer (additive, non-breaking)
   Loaded after style.css. Uses existing design tokens only.
   Adds accessibility, micro-interactions, polish and mobile refinements.
   ========================================================================== */

/* Smooth in-page scrolling for anchor navigation */
html { scroll-behavior: smooth; }

/* Consistent, on-brand text selection */
::selection { background: rgba(168, 85, 247, 0.35); color: #fff; }
::-moz-selection { background: rgba(168, 85, 247, 0.35); color: #fff; }

/* Refined custom scrollbar (WebKit + Firefox) */
* { scrollbar-width: thin; scrollbar-color: #2a2a3e var(--bg, #0a0a0f); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg, #0a0a0f); }
::-webkit-scrollbar-thumb {
    background: #26263a; border-radius: 999px; border: 2px solid var(--bg, #0a0a0f);
}
::-webkit-scrollbar-thumb:hover { background: var(--purple, #a855f7); }

/* Accessible keyboard focus rings across interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible {
    outline: 2px solid var(--purple, #a855f7);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 8px);
}

/* Buttons: smoother, GPU-friendly interactions (transition specific props only) */
.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger {
    transition: transform var(--tr, 0.2s ease), box-shadow var(--tr, 0.2s ease),
                background-color var(--tr, 0.2s ease), border-color var(--tr, 0.2s ease),
                opacity var(--tr, 0.2s ease);
    will-change: transform;
}
.btn:hover, .btn-primary:hover, .btn-secondary:hover { transform: translateY(-1px); }
.btn:active, .btn-primary:active, .btn-secondary:active { transform: translateY(0); }
.btn-primary:hover { box-shadow: 0 8px 28px rgba(168, 85, 247, 0.35); }

/* Cards: subtle lift + border glow on hover */
.card {
    transition: transform var(--tr, 0.2s ease), box-shadow var(--tr, 0.2s ease),
                border-color var(--tr, 0.2s ease), background-color var(--tr, 0.2s ease);
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow, 0 4px 24px rgba(0,0,0,0.4)), var(--shadow-glow, 0 0 30px rgba(168,85,247,0.15));
    border-color: var(--border-hover, #2a2a3e);
}

/* Form fields: clearer active state */
.form-input:focus, input:focus, textarea:focus, select:focus {
    border-color: var(--purple, #a855f7);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
}

/* Nav links: animated underline reveal */
.nav-link { position: relative; }
.nav-link::after {
    content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0;
    background: var(--grad, linear-gradient(135deg, #a855f7, #6366f1));
    transition: width var(--tr, 0.2s ease);
}
.nav-link:hover::after, .nav-link:focus-visible::after { width: 100%; }

/* Larger, comfortable tap targets on touch devices */
@media (hover: none) and (pointer: coarse) {
    .btn, .btn-sm, .nav-link, .nav-toggle { min-height: 44px; }
    .btn, .btn-sm { display: inline-flex; align-items: center; justify-content: center; }
}

/* Gentle entrance for primary hero content */
@media (prefers-reduced-motion: no-preference) {
    .hero-copy > * { animation: tlFadeUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) both; }
    .hero-copy > *:nth-child(2) { animation-delay: 0.06s; }
    .hero-copy > *:nth-child(3) { animation-delay: 0.12s; }
    .hero-copy > *:nth-child(4) { animation-delay: 0.18s; }
    @keyframes tlFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* Respect users who prefer reduced motion — disable all non-essential animation */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Images never overflow their container (responsive safety net) */
img { max-width: 100%; height: auto; }