/* ================================================================
   ENHANCED GLASSMORPHISM CARDS
   Improved contrast and visibility for light & dark modes

   IMPORTANT: This file is wrapped in @layer enhanced-glass so that
   Tailwind utility classes (border-b-2, border-t-[3px], etc.) have
   higher cascade priority and correctly override these styles.
   Layer order declared in app.css: base < components < enhanced-glass < utilities
================================================================ */

@layer enhanced-glass {

/* Light Mode - Enhanced Glass Card */
.glass-card {
    /* More visible tinted background with cooler tone */
    background: linear-gradient(135deg, 
        rgba(241, 245, 249, 0.95) 0%, 
        rgba(248, 250, 252, 1) 100%);
    
    /* Much stronger visible border */
    border: 1.5px solid rgba(148, 163, 184, 0.40);
    
    /* Slightly stronger blur */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    
    /* Medium shadow for subtle depth */
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(100, 116, 139, 0.15);
    
    border-radius: 16px;
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
}

.glass-card:hover {
    border-color: rgba(148, 163, 184, 0.60);
    
    /* Slightly larger shadow on hover */
    box-shadow: 
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(100, 116, 139, 0.20);
}

/* Dark Mode - Enhanced Glass Card */
.dark .glass-card {
    /* More visible dark background with better definition */
    background: linear-gradient(135deg, 
        rgba(30, 41, 59, 0.90) 0%, 
        rgba(15, 23, 42, 0.95) 100%);
    
    /* Stronger visible border for dark mode */
    border: 1.5px solid rgba(71, 85, 105, 0.60);
    
    /* Large shadow for dark mode depth */
    box-shadow: 
        0 10px 15px -3px rgba(0, 0, 0, 0.4),
        0 4px 6px -2px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}

.dark .glass-card:hover {
    border-color: rgba(71, 85, 105, 0.80);
    
    /* Slightly larger shadow on hover in dark mode */
    box-shadow: 
        0 20px 25px -5px rgba(0, 0, 0, 0.5),
        0 10px 10px -5px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}

/* ================================================================
   GLASS CARD VARIANTS
================================================================ */

/* Elevated Glass Card (for feature cards) */
.glass-card-elevated {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(249, 250, 251, 0.85) 100%);
    
    border: 1px solid rgba(229, 231, 235, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.08),
        0 3px 8px rgba(0, 0, 0, 0.06),
        inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    
    border-radius: 20px;
}

.dark .glass-card-elevated {
    background: linear-gradient(135deg, 
        rgba(31, 41, 55, 0.85) 0%, 
        rgba(17, 24, 39, 0.75) 100%);
    
    border: 1px solid rgba(75, 85, 99, 0.7);
    
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.5),
        0 3px 8px rgba(0, 0, 0, 0.4),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Subtle Glass Card (for less prominent elements) */
.glass-card-subtle {
    background: linear-gradient(135deg, 
        rgba(241, 245, 249, 0.92) 0%, 
        rgba(226, 232, 240, 0.85) 100%);
    
    border: 1px solid rgba(148, 163, 184, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    
    border-radius: 12px;
}

.dark .glass-card-subtle {
    background: linear-gradient(135deg, 
        rgba(31, 41, 55, 0.6) 0%, 
        rgba(17, 24, 39, 0.5) 100%);
    
    border: 1px solid rgba(75, 85, 99, 0.4);
    
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

/* ================================================================
   COLORED GLASS VARIANTS (for branded elements)
================================================================ */

/* Primary Blue Glass */
.glass-card-primary {
    background: linear-gradient(135deg, 
        rgba(0, 91, 193, 0.1) 0%, 
        rgba(67, 153, 222, 0.08) 100%),
        linear-gradient(135deg, 
        rgba(255, 255, 255, 0.85) 0%, 
        rgba(249, 250, 251, 0.75) 100%);
    
    border: 1px solid rgba(0, 91, 193, 0.2);
}

.dark .glass-card-primary {
    background: linear-gradient(135deg, 
        rgba(0, 91, 193, 0.15) 0%, 
        rgba(67, 153, 222, 0.1) 100%),
        linear-gradient(135deg, 
        rgba(31, 41, 55, 0.75) 0%, 
        rgba(17, 24, 39, 0.65) 100%);
    
    border: 1px solid rgba(0, 91, 193, 0.3);
}

/* Secondary Red Glass */
.glass-card-secondary {
    background: linear-gradient(135deg, 
        rgba(191, 13, 62, 0.1) 0%, 
        rgba(255, 99, 132, 0.08) 100%),
        linear-gradient(135deg, 
        rgba(255, 255, 255, 0.85) 0%, 
        rgba(249, 250, 251, 0.75) 100%);
    
    border: 1px solid rgba(191, 13, 62, 0.2);
}

.dark .glass-card-secondary {
    background: linear-gradient(135deg, 
        rgba(191, 13, 62, 0.15) 0%, 
        rgba(255, 99, 132, 0.1) 100%),
        linear-gradient(135deg, 
        rgba(31, 41, 55, 0.75) 0%, 
        rgba(17, 24, 39, 0.65) 100%);
    
    border: 1px solid rgba(191, 13, 62, 0.3);
}

/* Success Green Glass */
.glass-card-success {
    background: linear-gradient(135deg, 
        rgba(16, 185, 129, 0.1) 0%, 
        rgba(52, 211, 153, 0.08) 100%),
        linear-gradient(135deg, 
        rgba(255, 255, 255, 0.85) 0%, 
        rgba(249, 250, 251, 0.75) 100%);
    
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.dark .glass-card-success {
    background: linear-gradient(135deg, 
        rgba(16, 185, 129, 0.15) 0%, 
        rgba(52, 211, 153, 0.1) 100%),
        linear-gradient(135deg, 
        rgba(31, 41, 55, 0.75) 0%, 
        rgba(17, 24, 39, 0.65) 100%);
    
    border: 1px solid rgba(16, 185, 129, 0.3);
}

/* ================================================================
   USAGE GUIDE
   
   Basic Glass Card:
   <div class="glass-card p-6">Content</div>
   
   Elevated (Featured):
   <div class="glass-card-elevated p-8">Featured Content</div>
   
   Subtle (Secondary):
   <div class="glass-card-subtle p-4">Subtle Content</div>
   
   Branded:
   <div class="glass-card-primary p-6">Primary Branded</div>
   <div class="glass-card-secondary p-6">Secondary Branded</div>
   <div class="glass-card-success p-6">Success Message</div>
================================================================ */

/* ================================================================
   POST HIGHLIGHT ANIMATION
   Applied to newly created or updated posts to draw attention.
   Border pulses from emerald to transparent over 3 seconds.
================================================================ */

@keyframes post-highlight-border {
    0% {
        border-color: rgba(16, 185, 129, 0.8);
        box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3), 0 0 20px rgba(16, 185, 129, 0.15);
    }
    30% {
        border-color: rgba(16, 185, 129, 0.5);
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15), 0 0 12px rgba(16, 185, 129, 0.1);
    }
    100% {
        border-color: transparent;
        box-shadow: none;
    }
}

.post-highlight-animation {
    animation: post-highlight-border 3s ease-out forwards;
    border: 2px solid rgba(16, 185, 129, 0.8);
}

.dark .post-highlight-animation {
    animation: post-highlight-border 3s ease-out forwards;
    border: 2px solid rgba(52, 211, 153, 0.7);
}

@keyframes post-highlight-border-dark {
    0% {
        border-color: rgba(52, 211, 153, 0.7);
        box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.25), 0 0 20px rgba(52, 211, 153, 0.1);
    }
    30% {
        border-color: rgba(52, 211, 153, 0.4);
        box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.1), 0 0 12px rgba(52, 211, 153, 0.05);
    }
    100% {
        border-color: transparent;
        box-shadow: none;
    }
}

.dark .post-highlight-animation {
    animation: post-highlight-border-dark 3s ease-out forwards;
}

/* ================================================================
   AUTO-HIDE HEADER ON SCROLL (mobile < lg)
   scroll-direction.js toggles .header-hidden on <html>
================================================================ */
@media (max-width: 1023px) {
    .header-hidden #app-header {
        transform: translateY(-100%);
    }

    /* When header is hidden, sticky tabs slide up to top-0 */
    .header-hidden .sticky-tabs {
        top: 0 !important;
    }

    /* Bottom nav also hides when header is hidden (scroll down) */
    .header-hidden #mobile-bottom-nav {
        transform: translateY(100%);
    }
}

/* ================================================================
   GLASS PANEL (navigation bars, tab backgrounds)
================================================================ */
.glass-panel {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(249, 250, 251, 0.80) 100%);
    border: 1px solid rgba(229, 231, 235, 0.60);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.dark .glass-panel {
    background: linear-gradient(135deg,
        rgba(31, 41, 55, 0.80) 0%,
        rgba(17, 24, 39, 0.75) 100%);
    border: 1px solid rgba(71, 85, 105, 0.50);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.30);
}

/* ================================================================
   GLOBAL TOUCH FEEDBACK
   Remove 300ms tap delay, scale feedback on press, prevent text selection
================================================================ */
button,
a,
[role="button"],
.touch-target {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Scale feedback on interactive cards and buttons (opt-in via .tap-feedback) */
.tap-feedback {
    transition: transform 100ms ease;
    user-select: none;
    -webkit-user-select: none;
}

.tap-feedback:active {
    transform: scale(0.95);
}

/* ================================================================
   SKELETON SHIMMER
   Glassmorphic gradient shimmer for loading placeholders.
   .skeleton-shimmer  — primary bar (darker)
   .skeleton-shimmer-light — secondary bar (lighter)
================================================================ */
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-shimmer {
    background: linear-gradient(90deg,
        rgba(203, 213, 225, 0.5) 0%,
        rgba(226, 232, 240, 0.8) 40%,
        rgba(203, 213, 225, 0.5) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.8s ease-in-out infinite;
}

.dark .skeleton-shimmer {
    background: linear-gradient(90deg,
        rgba(51, 65, 85, 0.6) 0%,
        rgba(71, 85, 105, 0.8) 40%,
        rgba(51, 65, 85, 0.6) 100%);
    background-size: 200% 100%;
}

.skeleton-shimmer-light {
    background: linear-gradient(90deg,
        rgba(226, 232, 240, 0.4) 0%,
        rgba(241, 245, 249, 0.7) 40%,
        rgba(226, 232, 240, 0.4) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.8s ease-in-out infinite;
}

.dark .skeleton-shimmer-light {
    background: linear-gradient(90deg,
        rgba(30, 41, 55, 0.5) 0%,
        rgba(51, 65, 85, 0.7) 40%,
        rgba(30, 41, 55, 0.5) 100%);
    background-size: 200% 100%;
}

/* ================================================================
   FAB SPEED-DIAL ANIMATION
   Items slide up + fade in with stagger delay
================================================================ */
@keyframes fab-item-enter {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.85);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.animate-fab-item {
    animation: fab-item-enter 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

} /* end @layer enhanced-glass */