/* ════════════════════════════════════════════════════════════════════
   APP.CSS — Global Style Layer
   MovieVault — Modern Glass Aesthetic
   ════════════════════════════════════════════════════════════════════ */

/* ─── CSS Layers ───────────────────────────────────────────────── */
@layer reset, variables, base, components, utilities;

/* ════════════════════════════════════════════════════════════════════
   RESET LAYER
   ════════════════════════════════════════════════════════════════════ */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    img, video { max-width: 100%; height: auto; display: block; }
    button { cursor: pointer; font-family: inherit; }
    a { color: inherit; text-decoration: none; }
}

/* ════════════════════════════════════════════════════════════════════
   VARIABLES LAYER
   ════════════════════════════════════════════════════════════════════ */
@layer variables {
    :root {
        --radius-xs: 6px;
        --radius-sm: 8px;
        --radius-md: 12px;
        --radius-lg: 16px;
        --radius-xl: 24px;
        --radius-full: 9999px;

        --transition-fast: 0.15s ease;
        --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        --transition-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

        --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

        --z-dropdown: 100;
        --z-sticky: 200;
        --z-navbar: 1000;
        --z-overlay: 999;
        --z-modal: 2000;
        --z-toast: 9999;
    }
}

/* ════════════════════════════════════════════════════════════════════
   BASE LAYER
   ════════════════════════════════════════════════════════════════════ */
@layer base {
    html { scroll-behavior: smooth; }
    body {
        font-family: var(--font-sans);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        line-height: 1.6;
    }
    ::selection {
        background: var(--accent);
        color: #fff;
    }
    :focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
        border-radius: 4px;
    }
}

/* ════════════════════════════════════════════════════════════════════
   COMPONENTS LAYER (reusable UI pieces)
   ════════════════════════════════════════════════════════════════════ */
@layer components {
    /* ── Glass Card ── */
    .glass-card {
        background: var(--glass-bg);
        backdrop-filter: var(--blur-md);
        -webkit-backdrop-filter: var(--blur-md);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-md);
        box-shadow: var(--glass-shadow);
        transition: all var(--transition-spring);
    }
    .glass-card:hover {
        background: var(--bg-card-hover);
        border-color: var(--glass-border-hover);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    /* ── Pill Badge ── */
    .pill {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 10px;
        border-radius: var(--radius-full);
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
    }
    .pill-accent { background: var(--accent-subtle); color: var(--accent); border: 1px solid var(--accent-glow); }
    .pill-gold { background: rgba(245,197,24,0.1); color: var(--gold); border: 1px solid rgba(245,197,24,0.15); }
    .pill-green { background: rgba(16,185,129,0.1); color: #34d399; border: 1px solid rgba(16,185,129,0.15); }

    /* ── Divider ── */
    .divider {
        height: 1px;
        background: var(--border);
        margin: 16px 0;
    }
    .divider-vertical {
        width: 1px;
        height: 24px;
        background: var(--border);
        flex-shrink: 0;
    }

    /* ── Truncate Text ── */
    .truncate {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ── Clamp Text (multi-line) ── */
    .clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
    .clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

    /* ── Spinner ── */
    .spinner {
        display: inline-block;
        width: 18px;
        height: 18px;
        border: 2px solid var(--border);
        border-top-color: var(--accent);
        border-radius: 50%;
        animation: spin 0.6s linear infinite;
    }
    .spinner-sm { width: 14px; height: 14px; border-width: 2px; }
    .spinner-lg { width: 24px; height: 24px; border-width: 3px; }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    /* ── Shimmer Loading ── */
    @keyframes shimmer {
        0% { background-position: -200px 0; }
        100% { background-position: calc(200px + 100%) 0; }
    }

    .shimmer {
        background: linear-gradient(90deg,
            var(--bg-card) 25%,
            var(--bg-card-hover) 50%,
            var(--bg-card) 75%
        );
        background-size: 200px 100%;
        animation: shimmer 1.8s ease-in-out infinite;
        border-radius: var(--radius-sm);
    }
}

/* ════════════════════════════════════════════════════════════════════
   UTILITIES LAYER
   ════════════════════════════════════════════════════════════════════ */
@layer utilities {
    .flex-center { display: flex; align-items: center; justify-content: center; }
    .flex-between { display: flex; align-items: center; justify-content: space-between; }
    .flex-col { display: flex; flex-direction: column; }
    .gap-xs { gap: 4px; }
    .gap-sm { gap: 8px; }
    .gap-md { gap: 12px; }
    .gap-lg { gap: 16px; }
    .gap-xl { gap: 24px; }

    .text-center { text-align: center; }
    .text-muted { color: var(--text-muted); }
    .text-accent { color: var(--accent); }
    .text-gold { color: var(--gold); }

    .w-full { width: 100%; }
    .h-full { height: 100%; }
    .relative { position: relative; }
    .absolute { position: absolute; }

    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }

    .scrollbar-hide {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .scrollbar-hide::-webkit-scrollbar { display: none; }

    .no-select {
        user-select: none;
        -webkit-user-select: none;
    }
}

/* ════════════════════════════════════════════════════════════════════
   APP-LIKE NAVIGATION — View Transitions + Turbo Progress Bar
   ════════════════════════════════════════════════════════════════════ */

/* ── Turbo progress bar (instant-nav feedback) ── */
.turbo-progress-bar {
    height: 3px;
    background: linear-gradient(90deg, var(--accent, #e50914), var(--gold, #f5c518));
    box-shadow: 0 0 10px var(--accent-glow, rgba(229, 9, 20, 0.5));
}

/* ── Page loading overlay (smooth Turbo navigation indicator) ── */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-loader.active {
    opacity: 1;
}
.page-loader-ring {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.08);
    border-top-color: var(--accent, #e50914);
    border-right-color: var(--gold, #f5c518);
    animation: pageLoaderSpin 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
    box-shadow: 0 0 20px rgba(229, 9, 20, 0.15);
}
@keyframes pageLoaderSpin {
    to { transform: rotate(360deg); }
}

/* ── Page transition fade (works with Turbo + view-transitions) ── */
.main-content {
    animation: contentFadeIn 0.35s ease both;
}
@keyframes contentFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Smooth app-like page transitions ── */
@media (prefers-reduced-motion: no-preference) {
    ::view-transition-group(root) {
        animation-duration: 0.28s;
    }

    ::view-transition-old(root) {
        animation: mv-page-out 0.18s ease both;
    }

    ::view-transition-new(root) {
        animation: mv-page-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    /* Going back feels like going back */
    html[data-turbo-visit-direction="back"]::view-transition-old(root) {
        animation-name: mv-page-in-rev;
    }
    html[data-turbo-visit-direction="back"]::view-transition-new(root) {
        animation-name: mv-page-out-rev;
    }
}

@keyframes mv-page-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@keyframes mv-page-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0.5; transform: translateY(-6px); }
}
@keyframes mv-page-in-rev {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: none; }
}
@keyframes mv-page-out-rev {
    from { opacity: 1; transform: none; }
    to   { opacity: 0.5; transform: translateY(6px); }
}