/* ============================================
   LIQUID GLASS DESIGN SYSTEM
   Apple TV-inspired prismatic "liquid glass" aesthetic
   
   USAGE:
   - Import this file in your HTML: <link rel="stylesheet" href="liquid-glass.css">
   - For buttons: Use .btn-glass-primary class
   - For navigation: Use .nav-item and .nav-item--active classes
   - For glass surfaces: Use .glass-surface utility class
   - For pointer tracking: Add .js-liquid-highlight class and import liquid-glass.js
   
   KEY COMPONENTS:
   1. .glass-surface - Base utility for glass effect
   2. .btn-glass-primary - Primary button with all states (hover, active, loading, disabled)
   3. .btn-fetch-content - Variant for fetch/refresh buttons
   4. .nav-item / .nav-item--active - Navigation items with white active state
   5. .js-liquid-highlight - Enables cursor-following highlight (requires JS)
   
   HOW IT WORKS:
   - Glass effect: Semi-transparent background + backdrop-filter blur
   - Prismatic colors: Layered radial/linear gradients with mix-blend-mode
   - Hover effects: Animated gradient drift via @keyframes
   - Active state: Scale transform + intensified gradients
   - Pointer tracking: JS updates CSS variables --hl-x and --hl-y
   
   BROWSER SUPPORT:
   - Modern browsers: Full support with backdrop-filter
   - Older browsers: Automatic fallback to solid background
   - Reduced motion: Animations automatically disabled
   
   See LIQUID_GLASS_EXAMPLES.md for usage examples.
   ============================================ */

/* ============================================
   CSS VARIABLES - PRISMATIC COLOR PALETTE
   ============================================ */

:root {
    /* Glass surface colors - using shared palette */
    --glass-bg: var(--bg-elevated, rgba(255, 255, 255, 0.04));
    --glass-border: var(--border-subtle, rgba(255, 255, 255, 0.08));
    --glass-shadow-inner: inset 0 1px 1px rgba(255, 255, 255, 0.06);
    --glass-shadow-outer: 0 2px 8px rgba(0, 0, 0, 0.15);

    /* Accent gradient for interactive states - uses brand cyan */
    --glass-gradient: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(39, 197, 255, 0.08) 100%
    );

    /* Pointer highlight position (set via JS) */
    --hl-x: 50%;
    --hl-y: 50%;
}

/* ============================================
   BASE GLASS SURFACE UTILITY CLASS
   ============================================
   Clean, minimal glass effect for UI elements.
*/

.glass-surface {
    position: relative;
    background: var(--glass-bg);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-outer);
    overflow: hidden;
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(1px)) {
    .glass-surface {
        background: var(--bg-elevated);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* ============================================
   PRIMARY GLASS BUTTON - BASE STYLES
   ============================================
   Clean, minimal button with subtle glass effect.
*/

.btn-glass-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #f5f5f5);
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    z-index: 1;
    overflow: hidden;

    /* Clean glass effect */
    background: var(--bg-elevated, #161616);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    border: 1px solid var(--border-subtle, #262626);
    box-shadow: var(--glass-shadow-outer);
    
    transition: 
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

/* Fallback for browsers without backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
    .btn-glass-primary {
        background: var(--bg-elevated, #161616);
    }
}

/* Subtle accent tint on hover */
.btn-glass-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent, #27C5FF);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
    transition: opacity 0.15s ease;
}

/* ============================================
   BUTTON STATES - HOVER
   ============================================
*/

.btn-glass-primary:hover:not(:disabled):not(.loading) {
    background: var(--bg-hover, #1f1f1f);
    border-color: var(--border-default, #333333);
    transform: translateY(-1px);
}

.btn-glass-primary:hover:not(:disabled):not(.loading)::after {
    opacity: 0.06;
}

/* Pointer-based highlight (when JS is enabled) */
.btn-glass-primary.js-liquid-highlight::after {
    background: radial-gradient(
        circle 100px at var(--hl-x) var(--hl-y),
        var(--accent, #27C5FF) 0%,
        transparent 60%
    );
}

.btn-glass-primary.js-liquid-highlight:hover:not(:disabled):not(.loading)::after {
    opacity: 0.1;
}

/* ============================================
   BUTTON STATES - ACTIVE/PRESSED
   ============================================
*/

.btn-glass-primary:active:not(:disabled):not(.loading) {
    transform: scale(0.98);
    background: var(--bg-subtle, #1a1a1a);
}

.btn-glass-primary:active:not(:disabled):not(.loading)::after {
    opacity: 0.1;
}

/* ============================================
   BUTTON STATES - FOCUS-VISIBLE
   ============================================
*/

.btn-glass-primary:focus-visible {
    outline: 2px solid var(--accent, #27C5FF);
    outline-offset: 2px;
}

/* ============================================
   BUTTON STATES - DISABLED
   ============================================
*/

.btn-glass-primary:disabled,
.btn-glass-primary.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-glass-primary:disabled::after,
.btn-glass-primary.disabled::after {
    opacity: 0;
}

/* ============================================
   BUTTON STATES - LOADING
   ============================================
   This is an "in action" state - has animation to show activity.
*/

.btn-glass-primary.loading {
    opacity: 0.7;
    cursor: wait;
    pointer-events: none;
}

.btn-glass-primary.loading::after {
    opacity: 0.15;
    /* Animation only for "in action" states */
    background: var(--accent, #27C5FF);
    animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.2; }
}

/* ============================================
   FETCH CONTENT BUTTON VARIANT
   ============================================
   Extends .btn-glass-primary with fetch-specific styling.
   Can be used on Feed and Sources pages.
*/

.btn-fetch-content {
    /* Inherits all .btn-glass-primary styles */
    /* Always circular - width and height must be equal */
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 50%; /* Perfect circle */
    aspect-ratio: 1; /* Ensure it stays square */
    /* Center content both horizontally and vertically */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure icon/content is above glass layers */
.btn-fetch-content > * {
    position: relative;
    z-index: 1;
}

/* ============================================
   NAVIGATION ITEM - BASE STYLES
   ============================================
   Clean, minimal navigation styling.
*/

.nav-item,
.navbar-link.nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    color: var(--text-secondary, #a3a3a3);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    white-space: nowrap;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    
    transition: 
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.nav-item:hover,
.navbar-link.nav-item:hover {
    color: var(--text-primary, #f5f5f5);
    background: var(--bg-hover, #1f1f1f);
    border-color: var(--border-subtle, #262626);
}

/* ============================================
   NAVIGATION ITEM - ACTIVE STATE
   ============================================
   Clean white background for active state.
*/

.nav-item--active,
.navbar-link.nav-item--active,
.navbar-link.active.nav-item--active {
    color: var(--bg-base, #0a0a0a) !important;
    background: var(--text-primary, #f5f5f5) !important;
    border: 1px solid transparent;
    font-weight: 600;
}

.nav-item--active:hover,
.navbar-link.nav-item--active:hover {
    background: #ffffff !important;
}

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================
*/

/* Slow gradient drift for prismatic effect */
@keyframes prismaticDrift {
    0%, 100% {
        background-position: 0% 50%, 0% 50%;
    }
    25% {
        background-position: 50% 0%, 25% 50%;
    }
    50% {
        background-position: 100% 50%, 50% 50%;
    }
    75% {
        background-position: 50% 100%, 75% 50%;
    }
}

/* ============================================
   ACCESSIBILITY - REDUCED MOTION
   ============================================
*/

@media (prefers-reduced-motion: reduce) {
    .btn-glass-primary::after {
        animation: none;
        background-position: 0% 50%;
    }

    .btn-glass-primary:hover::after,
    .btn-glass-primary:active::after {
        animation: none;
    }

    .btn-glass-primary {
        transition: opacity 0.2s ease, transform 0.1s ease;
    }

    .nav-item,
    .nav-item--active {
        transition: background-color 0.2s ease, color 0.2s ease;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================
*/

/* Small button variant */
.btn-glass-primary.btn-sm {
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 20px;
}

/* Large button variant */
.btn-glass-primary.btn-lg {
    padding: 16px 32px;
    font-size: 16px;
    border-radius: 28px;
}

/* Icon-only button (square-ish) */
.btn-glass-primary.btn-icon {
    padding: 10px;
    border-radius: 12px;
    min-width: 44px;
    min-height: 44px;
}