/* Showcase Theme - FLiPT Ecosystem Standards
 * Extends the existing trophy-case.css variables
 * Uses theme-* and rarity-* variables from the design system
 */

/* ============================================
   SHOWCASE-SPECIFIC EXTENSIONS
   (Uses existing trophy-case.css :root variables)
   ============================================ */
:root {
    /* Glass effect for sidebar cards */
    --showcase-glass-bg: rgba(255, 255, 255, 0.03);
    --showcase-glass-border: rgba(255, 255, 255, 0.08);
    --showcase-glass-blur: blur(12px);

    /* Shadows - consistent with FLiPT design */
    --showcase-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.12);
    --showcase-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.18);
    --showcase-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.24);

    /* Animation timing */
    --showcase-duration-fast: 0.15s;
    --showcase-duration-normal: 0.3s;
    --showcase-duration-slow: 0.5s;
    --showcase-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --showcase-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Light mode adjustments */
[data-bs-theme="light"] {
    --showcase-glass-bg: rgba(255, 255, 255, 0.7);
    --showcase-glass-border: rgba(0, 0, 0, 0.08);
    --showcase-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --showcase-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --showcase-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
}

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

/* Tooltip fade */
@keyframes showcase-tooltip-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Panel slide in from right */
@keyframes showcase-slide-in-right {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Content cross-fade for tab switching */
@keyframes showcase-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ============================================
   TIER-SPECIFIC STYLES (Uses trophy-case.css colors)
   ============================================ */

/* Trophy tier badges - uses existing --trophy-* variables */
.showcase-tier {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.showcase-tier--gold {
    background: linear-gradient(135deg, #f5d76e, var(--trophy-gold), #c49b2e);
    color: #1a1a1a;
    box-shadow: 0 0 12px var(--trophy-glow);
}

.showcase-tier--silver {
    background: linear-gradient(135deg, var(--trophy-silver), #a0a0a0);
    color: #1a1a1a;
    box-shadow: 0 0 8px rgba(192, 192, 192, 0.3);
}

.showcase-tier--bronze {
    background: linear-gradient(135deg, #e0956a, var(--trophy-bronze));
    color: #1a1a1a;
    box-shadow: 0 0 8px rgba(205, 127, 50, 0.3);
}

/* ============================================
   GLASS CARD EFFECT
   ============================================ */
.showcase-glass {
    background: var(--showcase-glass-bg);
    backdrop-filter: var(--showcase-glass-blur);
    -webkit-backdrop-filter: var(--showcase-glass-blur);
    border: 1px solid var(--showcase-glass-border);
    border-radius: 12px;
}

.showcase-glass--elevated {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Light mode glass adjustments */
[data-bs-theme="light"] .showcase-glass--elevated {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 0, 0, 0.1);
}

/* ============================================
   GLOW EFFECTS (Uses existing rarity colors)
   ============================================ */
.showcase-glow {
    position: relative;
}

.showcase-glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--trophy-glow), transparent);
    opacity: 0;
    transition: opacity var(--showcase-duration-normal) ease;
    z-index: -1;
}

.showcase-glow:hover::before {
    opacity: 1;
}

/* Tier-specific glows using existing variables */
.showcase-glow--gold::before {
    background: radial-gradient(circle at center, var(--trophy-glow) 0%, transparent 70%);
}

.showcase-glow--legendary::before {
    background: radial-gradient(circle at center, var(--rarity-legendary-glow) 0%, transparent 70%);
}

.showcase-glow--epic::before {
    background: radial-gradient(circle at center, var(--rarity-epic-glow) 0%, transparent 70%);
}

.showcase-glow--rare::before {
    background: radial-gradient(circle at center, var(--rarity-rare-glow) 0%, transparent 70%);
}

/* ============================================
   TOOLTIP STYLES
   ============================================ */
.showcase-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem 0.75rem;
    background: var(--theme-surface-3);
    border: 1px solid var(--theme-border-color);
    border-radius: 6px;
    font-size: 0.8rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: 1000;
    box-shadow: var(--showcase-shadow-md);
}

.showcase-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--theme-surface-3);
}

.showcase-tooltip--visible {
    animation: showcase-tooltip-in var(--showcase-duration-fast) ease forwards;
}

/* ============================================
   SECTION HEADERS
   ============================================ */
.showcase-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--theme-border-color);
}

.showcase-section-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--theme-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.showcase-section-title__icon {
    color: var(--trophy-gold);
    font-size: 1rem;
}

.showcase-section-count {
    font-size: 0.75rem;
    color: var(--theme-text-muted);
    background: var(--theme-surface-2);
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
}