@keyframes ken-burns { 0% { transform: scale(1); } 100% { transform: scale(1.08); } }
@keyframes progress-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.animate-ken-burns { animation: ken-burns 8s ease-out forwards; }

/* Container queries: slider adapts content to its actual height */
.slider-container { container-type: size; container-name: slider; }
.slider-desc { display: none; }
@container slider (min-height: 500px) {
    .slider-desc { display: block; }
}

/*
 * Slider Edge Blending
 * Creates smooth transitions at slider boundaries using the theme's gray-950 color.
 *
 * Browser Support:
 * - color-mix(): Chrome 111+, Firefox 113+, Safari 16.2+ (~95% global support)
 * - Graceful degradation: Edge blending hidden in unsupported browsers
 *
 * The @supports query ensures we only show edge blending when color-mix is available.
 * Without it, the gradients would fail silently and show nothing (acceptable fallback).
 */

/* Hide edge blending by default - only show when color-mix is supported */
.slider-edge-blend { display: none; }

@supports (background: color-mix(in oklch, red 50%, transparent)) {
    .slider-edge-blend { display: block; }

    .slider-edge-top {
        background: linear-gradient(to bottom,
            var(--color-gray-950) 0%,
            color-mix(in oklch, var(--color-gray-950) 80%, transparent) 20%,
            color-mix(in oklch, var(--color-gray-950) 50%, transparent) 45%,
            color-mix(in oklch, var(--color-gray-950) 20%, transparent) 70%,
            transparent 100%);
    }
    .slider-edge-bottom {
        background: linear-gradient(to top,
            var(--color-gray-950) 0%,
            color-mix(in oklch, var(--color-gray-950) 85%, transparent) 15%,
            color-mix(in oklch, var(--color-gray-950) 55%, transparent) 40%,
            color-mix(in oklch, var(--color-gray-950) 25%, transparent) 65%,
            transparent 100%);
    }
    .slider-edge-left {
        background: linear-gradient(to right,
            var(--color-gray-950) 0%,
            color-mix(in oklch, var(--color-gray-950) 75%, transparent) 25%,
            color-mix(in oklch, var(--color-gray-950) 40%, transparent) 55%,
            color-mix(in oklch, var(--color-gray-950) 15%, transparent) 80%,
            transparent 100%);
    }
    .slider-edge-right {
        background: linear-gradient(to left,
            var(--color-gray-950) 0%,
            color-mix(in oklch, var(--color-gray-950) 75%, transparent) 25%,
            color-mix(in oklch, var(--color-gray-950) 40%, transparent) 55%,
            color-mix(in oklch, var(--color-gray-950) 15%, transparent) 80%,
            transparent 100%);
    }
    .slider-corner-tl {
        background: radial-gradient(ellipse at top left,
            var(--color-gray-950) 0%,
            color-mix(in oklch, var(--color-gray-950) 60%, transparent) 35%,
            transparent 70%);
    }
    .slider-corner-tr {
        background: radial-gradient(ellipse at top right,
            var(--color-gray-950) 0%,
            color-mix(in oklch, var(--color-gray-950) 60%, transparent) 35%,
            transparent 70%);
    }
    .slider-corner-bl {
        background: radial-gradient(ellipse at bottom left,
            var(--color-gray-950) 0%,
            color-mix(in oklch, var(--color-gray-950) 60%, transparent) 35%,
            transparent 70%);
    }
    .slider-corner-br {
        background: radial-gradient(ellipse at bottom right,
            var(--color-gray-950) 0%,
            color-mix(in oklch, var(--color-gray-950) 60%, transparent) 35%,
            transparent 70%);
    }
}

/* Smoke effect on edges */
            .gotd-bg::after {
                content: '';
                position: absolute;
                inset: 0;
                pointer-events: none;
                box-shadow:
                    inset 80px 0 60px -30px var(--color-gray-950),
                    inset -80px 0 60px -30px var(--color-gray-950),
                    inset 0 60px 60px -30px var(--color-gray-950),
                    inset 0 -60px 60px -30px var(--color-gray-950),
                    inset 0 0 120px 60px rgba(3, 7, 18, 0.4);
            }

            /* Background gradients */
            .gotd-bg-overlay {
                background: linear-gradient(to right, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0.5) 100%);
            }
            @media (max-width: 767px) {
                .gotd-bg-overlay {
                    background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.85) 50%, rgba(0,0,0,0.95) 100%);
                }
            }

            /* Fade effect */
            .gotd-bg-fade { box-shadow: inset 0 0 100px 50px var(--color-gray-900); }

            /* Poster */
            .gotd-poster { box-shadow: 0 15px 50px -15px rgba(0,0,0,0.7); }
            .gotd-poster:hover { transform: scale(1.02) translateY(-2px); box-shadow: 0 20px 60px -15px rgba(0,0,0,0.8); }

            /* Corner accents */
            .gotd-poster-frame span { position: absolute; width: 20px; height: 20px; border-color: var(--color-primary-500); border-style: solid; border-width: 0; opacity: 0.8; }
            .gotd-poster-frame span:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
            .gotd-poster-frame span:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
            .gotd-poster-frame span:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
            .gotd-poster-frame span:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

            /* Ribbon */
            .gotd-ribbon::after { content: ''; position: absolute; bottom: -7px; left: 0; right: 0; height: 7px; background: linear-gradient(135deg, var(--color-primary-500) 50%, transparent 50%), linear-gradient(-135deg, var(--color-primary-500) 50%, transparent 50%); background-size: 14px 7px; }

            /* Animations */
            .gotd-playing-dot { animation: gotd-blink 1s ease-in-out infinite; }
            @keyframes gotd-blink { 50% { opacity: 0.3; } }

            /* Genre separator */
            .gotd-meta-genre:not(:last-child)::after { content: ','; margin-right: 0.25rem; }

            /* Button hover */
            .gotd-btn-primary:hover { background: var(--color-primary-500); color: #fff; }
            .gotd-btn-primary:hover svg { transform: translateX(3px); }

/* ── Reusable collection card - cinematic franchise tile. Shared by the
               home "collections" module and the /collections bento, so this is the
               one place to evolve the card. Sizing is self-contained via aspect-ratio;
               the bento overrides it with fixed grid rows. ── */
            .cl-hub{position:relative;border-radius:1rem;overflow:hidden;isolation:isolate;display:block;
                aspect-ratio:16/9;background:var(--color-gray-900);border:1px solid rgba(255,255,255,.07);
                transition:box-shadow .4s cubic-bezier(.4,0,.2,1),border-color .3s ease;
                /* Skip painting cards that are nowhere near the viewport. Each one
                   carries a large blurred backdrop, so this is the difference
                   between rasterising 28 blurs and rasterising the few on screen. */
                content-visibility:auto;contain-intrinsic-size:auto 232px}
            /* Grid usage (home): a short cinematic card that flattens further as the
               viewport narrows so full-width cards aren't tall. Bento overrides to auto. */
            @media(max-width:1023px){.cl-hub{aspect-ratio:2/1}}
            @media(max-width:639px){.cl-hub{aspect-ratio:21/9}}
            .cl-art{position:absolute;inset:0;z-index:0;overflow:hidden}
            .cl-blur{position:absolute;inset:-18%;z-index:0}
            .cl-blur img,.cl-blur picture{width:100%;height:100%;object-fit:cover;
                filter:blur(26px) saturate(1.7) brightness(.72);transform:scale(1.08)}
            .cl-cover{position:absolute;inset:0;z-index:0}
            .cl-cover img,.cl-cover picture{width:100%;height:100%;object-fit:cover;transform:scale(1.03);
                transition:transform 1.1s cubic-bezier(.4,0,.2,1);filter:saturate(1.05)}
            .cl-blur.dim img{filter:blur(30px) saturate(1.35) brightness(.42)}
            .cl-collage{position:absolute;inset:0;z-index:0}
            /* Posters are sized off the card HEIGHT (not width), so the fan scales
               with the card at any aspect-ratio - container-responsive. True-centre
               anchoring keeps the fan inside the card, so the hover fan-out never
               clips regardless of how short the card is. */
            .cl-collage .p{position:absolute;top:50%;left:50%;height:78%;width:auto;aspect-ratio:2/3;border-radius:8px;overflow:hidden;
                border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 34px -12px rgba(0,0,0,.9);
                transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .4s ease}
            .cl-collage .p img,.cl-collage .p picture{width:100%;height:100%;object-fit:cover}
            .cl-collage .p:nth-child(1){transform:translate(-50%,-50%) translateX(-48%) rotate(-9deg);opacity:.64;z-index:1}
            .cl-collage .p:nth-child(3){transform:translate(-50%,-50%) translateX(48%) rotate(9deg);opacity:.64;z-index:1}
            .cl-collage .p:nth-child(2){transform:translate(-50%,-50%);z-index:2}
            .cl-collage.solo .p:nth-child(1){transform:translate(-50%,-50%) rotate(0);opacity:1;z-index:2;height:92%}
            .cl-grade{position:absolute;inset:0;z-index:1;
                background:radial-gradient(120% 100% at 80% 8%,rgba(255,255,255,.07),transparent 52%),linear-gradient(125deg,rgba(0,0,0,.22),transparent 46%)}
            .cl-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(2,5,10,.96) 3%,rgba(2,5,10,.55) 40%,rgba(2,5,10,.06) 74%,rgba(2,5,10,.28) 100%)}
            .cl-mark{position:absolute;right:16px;top:6px;z-index:1;line-height:1;color:rgba(255,255,255,.08);pointer-events:none;font-size:76px;letter-spacing:-.03em}
            .cl-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:15px 16px 14px;display:flex;flex-direction:column;gap:8px}
            .cl-title{color:#fff;font-weight:700;line-height:1.02;letter-spacing:-0.01em;text-shadow:0 2px 18px rgba(0,0,0,.75);text-wrap:balance}
            .cl-hud{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.76);font-size:12px;font-variant-numeric:tabular-nums}
            .cl-hud .u{display:inline-flex;align-items:center;gap:6px}
            .cl-hud svg{width:13px;height:13px;color:var(--primary-color);opacity:.95}
            .cl-hud b{color:#fff;font-weight:600}
            .cl-hud .bar{width:1px;height:11px;background:rgba(255,255,255,.22)}
            .cl-peek{position:absolute;top:12px;right:12px;z-index:3;width:31px;height:31px;border-radius:9px;display:grid;place-items:center;
                background:rgba(2,5,10,.72);border:1px solid color-mix(in srgb,var(--primary-color) 45%,transparent);color:var(--primary-color);
                opacity:0;transform:translate(4px,-4px);transition:.35s cubic-bezier(.4,0,.2,1)}
            /* Hover is desktop-only (touch has none, so it's pure cost there). Only
               transform animates - animating blur()/filter drops raster quality and
               softens the poster thumbnails, so filters stay constant. */
            @media(hover:hover){
                /* No translateY lift - moving the card up pulls its bottom edge off
                   the cursor, which toggles :hover in a loop (the flicker). Hover
                   feedback is the art zoom + deeper shadow + a subtle neutral border,
                   not a coloured glow. */
                .cl-hub:hover{border-color:rgba(255,255,255,.16);box-shadow:0 18px 40px -26px rgba(0,0,0,.85)}
                .cl-hub:hover .cl-cover img{transform:scale(1.09)}
                .cl-hub:hover .cl-collage .p:nth-child(1){transform:translate(-50%,-50%) translateX(-66%) rotate(-13deg);opacity:.78}
                .cl-hub:hover .cl-collage .p:nth-child(3){transform:translate(-50%,-50%) translateX(66%) rotate(13deg);opacity:.78}
                .cl-hub:hover .cl-collage .p:nth-child(2){transform:translate(-50%,-56%)}
                .cl-hub:hover .cl-collage.solo .p:nth-child(1){transform:translate(-50%,-53%) rotate(0)}
                .cl-hub:hover .cl-peek{opacity:1;transform:none}
            }
            /* Touch / low-power: skip painting offscreen cards, soften the big blur. */
            @media(pointer:coarse){
                .cl-hub{content-visibility:auto;contain-intrinsic-size:auto 210px}
                .cl-blur img{filter:blur(14px) saturate(1.6) brightness(.72)}
                .cl-blur.dim img{filter:blur(16px) saturate(1.3) brightness(.42)}
            }
            @media(prefers-reduced-motion:reduce){
                .cl-hub,.cl-blur img,.cl-cover img,.cl-collage,.cl-blur.dim{transition:none!important}
            }

.social-btn-body { background-color: var(--btn-bg); }
            .social-btn:hover .social-btn-body { background-color: var(--btn-bg-hover); }
            .social-btn-glow {
                background-image: linear-gradient(to right, var(--btn-glow-from), var(--btn-glow-to));
            }