/* Shared case-study polish: entrance + mobile (photo & video dossiers) */

/* Instant scroll — beat per-page `scroll-behavior: smooth` / overflow-x:hidden pairing */
html, body {
    scroll-behavior: auto !important;
    overflow-x: clip !important;
}

/* ——— ENTRANCE ——— */
.case-hero .hero-bg {
    transform: scale(1.08); opacity: 0;
    transition: opacity 1.1s ease, transform 1.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s;
}
body.is-ready .case-hero .hero-bg { opacity: 1; transform: scale(1); }

.client-logo-large,
.case-client,
.case-type {
    opacity: 0; transform: translateY(22px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.client-logo-large { transition-delay: 0.15s; }
.case-client { transition-delay: 0.28s; }
.case-type { transition-delay: 0.42s; }
body.is-ready .client-logo-large,
body.is-ready .case-client,
body.is-ready .case-type { opacity: 1; transform: translateY(0); }

/* Brief + meta stay readable on first scroll (don't gate behind opacity:0) */
.data-cell {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
}

.m-img,
.next-project,
.recap-section,
.video-section,
.reel-section,
.stills-label,
.video-label {
    opacity: 0; transform: translateY(22px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.m-img.is-in,
.next-project.is-in,
.recap-section.is-in,
.video-section.is-in,
.reel-section.is-in,
.stills-label.is-in,
.video-label.is-in {
    opacity: 1; transform: translateY(0);
}
.m-img {
    transform: translateY(18px) scale(0.985);
    content-visibility: auto;
    contain-intrinsic-size: 320px 420px;
}
.m-img.is-in { transform: translateY(0) scale(1); }

@media (prefers-reduced-motion: reduce) {
    .case-hero .hero-bg,
    .client-logo-large, .case-client, .case-type,
    .m-img, .next-project,
    .recap-section, .video-section, .reel-section,
    .stills-label, .video-label {
        opacity: 1 !important; transform: none !important; transition: none !important;
    }
}

/* ——— MOBILE ——— */
@media (max-width: 1000px) {
    .hud-telemetry { display: none; }

    .case-hero {
        height: 100svh; height: 100dvh;
        min-height: 560px;
        padding: 0 5vw max(72px, calc(env(safe-area-inset-bottom, 0px) + 56px));
        justify-content: flex-end;
        box-sizing: border-box;
    }
    .case-hero::after {
        content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
        background: linear-gradient(180deg, rgba(3,3,3,0.35) 0%, transparent 28%, rgba(3,3,3,0.55) 62%, rgba(3,3,3,0.92) 100%);
    }
    .case-hero .hero-bg { filter: brightness(0.55); }
    .case-header-content { position: relative; z-index: 2; max-width: 100%; padding-bottom: 8px; }
    .client-logo-large { width: 112px; margin-bottom: 16px; }
    .case-client {
        font-size: clamp(2.8rem, 14vw, 4.4rem) !important;
        letter-spacing: -0.05em; line-height: 0.88;
    }
    .case-type {
        font-size: 0.62rem; letter-spacing: 2.5px; margin-top: 14px;
        padding: 8px 12px; max-width: 100%; line-height: 1.4; white-space: normal;
    }
    .scroll-down {
        left: 5vw; right: auto; transform: none; align-items: flex-start;
        bottom: max(22px, env(safe-area-inset-bottom, 0px));
        font-size: 0.55rem; letter-spacing: 3px;
    }

    .data-strip {
        grid-template-columns: 1fr !important;
        border-bottom: none;
    }
    .data-cell {
        padding: 28px 5vw;
        border-right: none !important;
        border-bottom: 1px solid #1a1a1a;
    }
    .cell-meta { gap: 18px 20px; }
    .m-lab { font-size: 0.55rem; letter-spacing: 2.5px; }
    .m-val { font-size: 0.95rem; letter-spacing: -0.02em; }
    .brief-text { font-size: 0.95rem; line-height: 1.7; max-width: none; }
    .t-list { font-size: 0.68rem; gap: 12px; }
    .t-list span { width: 64px; }

    /* Photo / stills walls — keep density */
    .mega-wall-section,
    .stills-section { padding: 3px; }
    .mega-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 3px;
    }
    /* ABG-style dense rows */
    .mega-grid[style],
    .mega-wall-section .mega-grid {
        grid-auto-rows: minmax(160px, 28vw);
    }
    .m-img { cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .m-img.landscape-wide,
    .m-img.span-2 { grid-column: span 2; }
    .m-img.hero { grid-column: span 2; grid-row: span 2; }
    .m-img.portrait-tall { grid-row: span 2; }
    .stills-grid {
        grid-template-columns: 1fr !important;
        gap: 3px;
        padding: 0 3px 3px;
    }
    .stills-label,
    .video-label {
        font-size: 0.65rem; letter-spacing: 3px;
        padding: 40px 5vw 28px;
    }

    .video-section {
        padding: 48px 5vw 64px;
    }
    .video-wrap video {
        border-radius: 6px;
    }

    .reel-section { padding: 48px 5vw 72px; }
    .reel-head { margin-bottom: 24px; gap: 10px; }
    .reel-kicker { font-size: 0.62rem; letter-spacing: 3px; }
    .reel-player-wrap { border-radius: 8px; }
    .reel-player-wrap video { max-height: 56vh; }
    .reel-rail {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px; margin-top: 16px;
    }
    .reel-now { font-size: 0.6rem; letter-spacing: 2px; margin-bottom: 14px; }

    .recap-section { padding: 72px 6vw; }
    .recap-quote {
        font-size: clamp(1.35rem, 6.5vw, 1.85rem) !important;
        letter-spacing: -0.5px; line-height: 1.35;
    }
    .recap-author { font-size: 0.68rem; letter-spacing: 3px; }

    .lightbox img { max-width: 100vw; max-height: 100dvh; }
    .lb-close {
        top: max(16px, env(safe-area-inset-top, 0px));
        right: 5vw;
        font-size: 0.72rem;
        padding: 10px 14px;
        background: rgba(0,0,0,0.55);
        border-radius: 999px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .next-project {
        height: 42vh; min-height: 280px; max-height: 420px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .next-title {
        font-size: clamp(2.4rem, 12vw, 3.6rem) !important;
        letter-spacing: -0.04em;
        -webkit-text-stroke: 1.2px #fff;
    }
    .next-label { font-size: 0.62rem; letter-spacing: 4px; margin-bottom: 12px; }
}

@media (max-width: 600px) {
    .case-hero { min-height: 520px; }
    .client-logo-large { width: 96px; }
    .data-cell { padding: 24px 5vw; }
    .mega-wall-section .mega-grid { grid-auto-rows: minmax(150px, 36vw); }
    /* Keep 2-col — do not collapse video mega grids to 1 */
    .mega-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .m-img.span-2 { grid-column: span 2 !important; }
    .reel-rail { grid-template-columns: 1fr 1fr; }
    .next-project { height: 38vh; min-height: 250px; }
}

@media (hover: none) and (pointer: coarse) {
    .m-img img { filter: brightness(0.95); }
    .next-bg { filter: brightness(0.35) !important; transform: scale(1.02); }
    .next-title {
        color: #fff !important;
        -webkit-text-stroke: 0 !important;
        text-shadow: 0 10px 30px rgba(0,0,0,0.8);
    }
}

/* Light theme — mobile hero veil + next stroke */
[data-theme="light"] .case-hero::after {
    background: linear-gradient(180deg, rgba(247,247,247,0.15) 0%, transparent 28%, rgba(0,0,0,0.35) 62%, rgba(0,0,0,0.72) 100%);
}
[data-theme="light"] .data-cell { border-bottom-color: rgba(0,0,0,0.08); }
[data-theme="light"] .next-title { -webkit-text-stroke: 1.2px rgba(10,10,10,0.5); }
@media (hover: none) and (pointer: coarse) {
    [data-theme="light"] .next-title {
        color: #0a0a0a !important;
        -webkit-text-stroke: 0 !important;
        text-shadow: 0 10px 24px rgba(0,0,0,0.12);
    }
}