/**
 * File: public/assets/css/teaser-mode.css
 * Purpose: Styles for visitor/teaser mode experience
 *
 * Features:
 * - Blur effects for locked content
 * - Gradient overlays
 * - Lock icons and indicators
 * - Smooth transitions
 * - Responsive design
 */

/* ========================================
   Blur and Lock Utilities
   ======================================== */

.visitor-blur {
    filter: blur(8px);
    pointer-events: none;
    user-select: none;
    transition: filter 0.3s ease;
}

.blur-1 { filter: blur(2px); }
.blur-2 { filter: blur(4px); }
.blur-3 { filter: blur(6px); }
.blur-4 { filter: blur(8px); }
.blur-5 { filter: blur(10px); }
.blur-6 { filter: blur(12px); }
.blur-7 { filter: blur(14px); }
.blur-8 { filter: blur(16px); }
.blur-9 { filter: blur(18px); }
.blur-10 { filter: blur(20px); }

.visitor-locked {
    position: relative;
    overflow: hidden;
}

.visitor-locked::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.7) 50%,
        rgba(255, 255, 255, 0.9) 100%
    );
    backdrop-filter: blur(4px);
    z-index: 5;
    pointer-events: auto;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.dark .visitor-locked::before {
    background: linear-gradient(
        135deg,
        rgba(17, 24, 39, 0.9) 0%,
        rgba(17, 24, 39, 0.7) 50%,
        rgba(17, 24, 39, 0.9) 100%
    );
}

.visitor-locked::after {
    content: '🔒';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    z-index: 10;
    animation: lock-pulse 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes lock-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

.visitor-locked:hover::before {
    opacity: 0.95;
}

/* ========================================
   Masked Content
   ======================================== */

.visitor-masked-row {
    position: relative;
    filter: blur(2px);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.visitor-masked-row:hover {
    filter: blur(1px);
    opacity: 0.7;
}

.visitor-fade-bottom {
    position: relative;
}

.visitor-fade-bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.8) 50%,
        rgba(255, 255, 255, 1) 100%
    );
    pointer-events: none;
    z-index: 5;
}

.dark .visitor-fade-bottom::after {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(17, 24, 39, 0.8) 50%,
        rgba(17, 24, 39, 1) 100%
    );
}

/* ========================================
   Unlock Tooltips
   ======================================== */

.visitor-unlock-tooltip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    color: #1f2937;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    font-size: 0.875rem;
    font-weight: 600;
    z-index: 10;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dark .visitor-unlock-tooltip {
    background: #374151;
    color: white;
}

.visitor-locked:hover .visitor-unlock-tooltip {
    opacity: 1;
}

/* ========================================
   Leaderboard Specific Styles
   ======================================== */

.visitor-leaderboard-row-hidden {
    filter: blur(4px);
    opacity: 0.4;
    pointer-events: none;
}

.visitor-leaderboard-sticky-cta {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.visitor-leaderboard-sticky-cta.visible {
    transform: translateY(0);
}

/* ========================================
   Statistics Tiles
   ======================================== */

.visitor-stat-tile-locked {
    position: relative;
    filter: blur(6px);
    opacity: 0.5;
    cursor: pointer;
    transition: all 0.3s ease;
}

.visitor-stat-tile-locked:hover {
    filter: blur(4px);
    opacity: 0.6;
}

.visitor-stat-tile-locked::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.8) 100%
    );
    border-radius: inherit;
    z-index: 1;
    pointer-events: none;
}

.dark .visitor-stat-tile-locked::before {
    background: radial-gradient(
        circle at center,
        rgba(17, 24, 39, 0.1) 0%,
        rgba(17, 24, 39, 0.5) 50%,
        rgba(17, 24, 39, 0.8) 100%
    );
}

/* ========================================
   Picks Demo Specific
   ======================================== */

.visitor-pick-disabled {
    pointer-events: none;
    opacity: 0.5;
    filter: grayscale(0.5);
}

.visitor-pick-limit-badge {
    position: fixed;
    top: 80px;
    right: 20px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.875rem;
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
    z-index: 40;
    animation: badge-bounce 2s ease-in-out infinite;
}

@keyframes badge-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* ========================================
   CTA Modal Animations
   ======================================== */

[data-cta-backdrop] {
    opacity: 0;
    transition: opacity 0.3s ease;
}

[data-cta-content] {
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.3s ease;
}

/* ========================================
   Responsive Adjustments
   ======================================== */

@media (max-width: 768px) {
    .visitor-locked::after {
        font-size: 2rem;
    }

    .visitor-unlock-tooltip {
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
    }

    .visitor-fade-bottom::after {
        height: 150px;
    }

    .visitor-pick-limit-badge {
        top: 70px;
        right: 10px;
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }
}

/* ========================================
   Accessibility
   ======================================== */

.visitor-locked[role="button"],
.visitor-locked[tabindex] {
    outline: none;
}

.visitor-locked:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .visitor-blur,
    .visitor-locked::before,
    .visitor-masked-row,
    .visitor-unlock-tooltip,
    .visitor-stat-tile-locked {
        transition: none;
    }

    @keyframes lock-pulse {
        0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    }

    @keyframes badge-bounce {
        0%, 100% { transform: translateY(0); }
    }
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
    .visitor-blur,
    .visitor-locked,
    .visitor-masked-row {
        filter: none !important;
        opacity: 1 !important;
    }

    .visitor-locked::before,
    .visitor-locked::after,
    .visitor-fade-bottom::after,
    .visitor-pick-limit-badge {
        display: none !important;
    }

    [data-teaser-cta] {
        display: none !important;
    }
}