/* =============================================
   infra.day -- Cinematic Documentary Styles
   ============================================= */

/* ---- Reset & Base ---- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    background: #1A0B0F;
}

body {
    font-family: 'Libre Baskerville', serif;
    background: #1A0B0F;
    color: #F2E6E0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---- Film Grain Overlay ---- */
.grain-svg {
    position: absolute;
    width: 0;
    height: 0;
}

body::before {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    pointer-events: none;
    z-index: 1000;
    filter: url(#grain);
    opacity: 0.03;
}

/* ---- Scroll Progress Bar ---- */
.progress-bar {
    position: fixed;
    top: 0;
    right: 12px;
    width: 1px;
    height: 100vh;
    z-index: 900;
    pointer-events: none;
}

.progress-fill {
    width: 1px;
    height: 0%;
    background: #6B1D2B;
    transition: height 0.1s linear;
}

.progress-percent {
    position: absolute;
    top: 8px;
    right: 6px;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: 0.7rem;
    color: #6B1D2B;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    opacity: 0;
    transition: opacity 0.4s ease;
    white-space: nowrap;
}

.progress-percent.visible {
    opacity: 1;
}

/* ---- Reel Sections ---- */
.reel {
    min-height: 100vh;
    position: relative;
    transition: opacity 1.5s ease;
}

.reel.faded {
    opacity: 0.2;
}

.reel-modules {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 3px;
}

/* ---- Reel Spacers (Dissolve Zones) ---- */
.reel-spacer {
    height: 20vh;
    background: #1A0B0F;
}

.reel-spacer-final {
    height: 10vh;
}

/* ---- Module Base ---- */
.module {
    position: relative;
    overflow: hidden;
    background: #1A0B0F;
    cursor: default;
    box-shadow: inset 0 0 20px rgba(26, 11, 15, 0.8);
}

.module-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.0);
    filter: blur(2px);
    transition: transform 8s cubic-bezier(0.25, 0, 0.25, 1), filter 2s ease-out;
    will-change: transform;
}

/* Color grade overlay via mix-blend-mode */
.module-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #2D1219;
    opacity: 0.15;
    mix-blend-mode: multiply;
}

/* Noise overlay per module */
.module-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: url(#grain);
    opacity: 0.04;
    z-index: 2;
    pointer-events: none;
}

/* Botanical modules get green tint border -- #3D4A3A */
.module-image.botanical {
    border: 1px solid #3D4A3A;
}

/* Module in-view: zoom and focus */
.module.in-view .module-image {
    transform: scale(1.15);
    filter: blur(0px);
}

/* Module hover: faster zoom */
.module:hover .module-image {
    transition-duration: 5s, 2s;
}

/* ---- Vignette Overlay ---- */
.module-vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(26, 11, 15, 0.6) 100%);
    pointer-events: none;
    z-index: 3;
}

/* ---- Module Captions ---- */
.module-caption {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    font-family: 'Libre Baskerville', serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(0.85rem, 1.2vw, 1rem);
    color: #A89B94;
    letter-spacing: 0.02em;
    line-height: 1.65;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    pointer-events: none;
    z-index: 5;
}

.module:hover .module-caption {
    opacity: 1;
}

/* ---- Hover Seam Brightening ---- */
.module::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border: 3px solid #1A0B0F;
    transition: border-color 0.4s ease;
    pointer-events: none;
    z-index: 4;
}

.module:hover::after {
    border-color: #2D1219;
}

/* ---- Intertitles ---- */
.intertitle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
    pointer-events: none;
}

.intertitle-text {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: clamp(2.8rem, 7vw, 6rem);
    color: #F2E6E0;
    letter-spacing: 0.04em;
    line-height: 1.1;
    text-shadow: 0 0 40px rgba(107, 29, 43, 0.4);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 2s ease, transform 2s ease;
}

.module.in-view .intertitle-text {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================
   REEL ONE -- Surface (Full Viewport)
   ============================================= */
.reel-one .reel-modules {
    max-width: 100%;
    padding: 0;
}

.module-full {
    width: 100%;
    height: 100vh;
}

/* =============================================
   REEL TWO -- Conduit (6 Modules Grid)
   ============================================= */
.grid-conduit {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    gap: 3px;
}

/* Module sizing classes */
.module-wide {
    grid-column: span 2;
    aspect-ratio: 16 / 9;
}

.module-square {
    grid-column: span 1;
    aspect-ratio: 1 / 1;
}

.module-portrait {
    grid-column: span 1;
    grid-row: span 2;
    aspect-ratio: 3 / 4;
}

.module-standard {
    grid-column: span 1;
    aspect-ratio: 4 / 3;
}

.module-large {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: 1 / 1;
}

/* =============================================
   REEL THREE -- Root (4 Modules Grid)
   ============================================= */
.grid-root {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
}

.grid-root .module-large {
    grid-column: span 2;
    grid-row: span 2;
}

.grid-root .module-standard {
    grid-column: span 2;
    aspect-ratio: 4 / 3;
}

.grid-root .module-wide {
    grid-column: span 4;
    aspect-ratio: 21 / 9;
}

/* Botanical green border tint for root reel */
.reel-three .module {
    box-shadow: inset 0 0 20px rgba(26, 11, 15, 0.8), inset 0 0 1px rgba(61, 74, 58, 0.4);
}

/* =============================================
   REEL FOUR -- Maintenance (2x2 + 2x 1x1)
   ============================================= */
.grid-maintenance {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
}

.grid-maintenance .module-large {
    grid-column: span 2;
    grid-row: span 2;
}

.grid-maintenance .module-square {
    grid-column: span 2;
}

/* =============================================
   REEL FIVE -- Duration (Full Viewport)
   ============================================= */
.reel-five .reel-modules {
    max-width: 100%;
    padding: 0;
}

/* =============================================
   ACTIVE MODULE HIGHLIGHT
   ============================================= */
.module.in-view {
    box-shadow: inset 0 0 20px rgba(26, 11, 15, 0.8), 0 0 0 1px #8C3A4A;
}

/* Steel highlight for infrastructure detail elements -- #7A7D80 */
.reel-four .module-caption {
    color: #7A7D80;
}

/* =============================================
   DESATURATION FILTER ON ALL IMAGES
   ============================================= */
.module-image {
    filter: blur(2px) saturate(0.7);
}

.module.in-view .module-image {
    filter: blur(0px) saturate(0.7);
}

/* =============================================
   RESPONSIVE -- Tablet
   ============================================= */
@media (max-width: 1024px) {
    .grid-conduit,
    .grid-root,
    .grid-maintenance {
        grid-template-columns: repeat(2, 1fr);
    }

    .module-wide {
        grid-column: span 2;
    }

    .module-portrait {
        grid-row: span 1;
        aspect-ratio: 3 / 4;
    }

    .module-large {
        grid-column: span 2;
        grid-row: span 1;
        aspect-ratio: 16 / 9;
    }

    .grid-root .module-wide {
        grid-column: span 2;
    }

    .grid-maintenance .module-square {
        grid-column: span 1;
    }
}

/* =============================================
   RESPONSIVE -- Mobile
   ============================================= */
@media (max-width: 640px) {
    .grid-conduit,
    .grid-root,
    .grid-maintenance {
        grid-template-columns: 1fr;
    }

    .module-wide,
    .module-portrait,
    .module-large,
    .module-standard,
    .module-square {
        grid-column: span 1;
        grid-row: span 1;
        aspect-ratio: 16 / 9;
    }

    .grid-root .module-wide,
    .grid-root .module-large,
    .grid-root .module-standard {
        grid-column: span 1;
    }

    .grid-maintenance .module-large,
    .grid-maintenance .module-square {
        grid-column: span 1;
    }

    .module-full {
        aspect-ratio: auto;
        height: 100vh;
    }

    .intertitle-text {
        font-size: clamp(2rem, 10vw, 3.5rem);
    }

    .progress-bar {
        right: 6px;
    }
}