/* ========================================================================= */
/* --- SECTION FOUR: 400vh PINNED & MODULAR DIVIDERS --- */
/* ========================================================================= */
.sec-four {
    height: 760vh;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    overflow: visible;
}

#mesh2 {
    height: 140vh;
}

/* --- SECTION 4 MODULAR COMPOSITE DIVIDERS (EP-133 K.O. II Style) --- */
.sec-four-divider {
    position: absolute;
    width: 92vw;
    height: 4vh;
    margin-left: 4vw;
    left: 0;
    box-sizing: border-box;
    z-index: 10;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    border: none;
    overflow: visible;
}

.sec-four-divider .div-seg {
    height: 100%;
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    overflow: visible;
    text-align: center;
    white-space: nowrap;
}

/* --- PATTERN MODULES --- */

/* 1. Slanted Stripes (Exact match to .pattern-box between Sec 1 and 2) */
.pat-hatch-a {
    background-color: transparent;
    background-image: linear-gradient(45deg,
            rgba(255, 255, 255, 0.35) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.35) 50%,
            rgba(255, 255, 255, 0.35) 75%,
            transparent 75%,
            transparent);
    background-size: 8px 8px;
}

/* 2. Reverse Slanted Stripes */
.pat-hatch-reverse {
    background-color: transparent;
    background-image: linear-gradient(-45deg,
            rgba(255, 255, 255, 0.35) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.35) 50%,
            rgba(255, 255, 255, 0.35) 75%,
            transparent 75%,
            transparent);
    background-size: 8px 8px;
}

/* 3. Steep Industrial Slanted Stripes */
.pat-hatch-steep {
    background-color: transparent;
    background-image: linear-gradient(45deg,
            rgba(255, 255, 255, 0.35) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.35) 50%,
            rgba(255, 255, 255, 0.35) 75%,
            transparent 75%,
            transparent);
    background-size: 8px 8px;
}

/* 4. Staggered Honeycomb Dot Matrix (Offset center speaker grille) */
.pat-dots-staggered {
    background-color: transparent;
    background-image:
        radial-gradient(circle at 4px 4px, rgba(255, 255, 255, 0.55) 3.2px, transparent 3.8px),
        radial-gradient(circle at 12px 12px, rgba(255, 255, 255, 0.55) 3.2px, transparent 3.8px);
    background-size: 16px 16px;
}

/* 5. Mechanical Punch Holes (Large bold circles) */
.pat-dots-punch {
    background-color: transparent;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.6) 4.2px, transparent 4.8px);
    background-size: 16px 16px;
    background-position: center;
}

/* 6. Rectangular Blueprint Graph Grid (18px x 8px) */
.pat-grid-rect {
    background-color: transparent;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.28) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.28) 1px, transparent 1px);
    background-size: 18px 8px;
}

/* 7. Bold Optical Scanner Barcode */
.pat-barcode-bold {
    background-color: transparent;
    background-image: repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.5) 0,
            rgba(255, 255, 255, 0.5) 6px,
            transparent 6px,
            transparent 12px,
            rgba(255, 255, 255, 0.5) 12px,
            rgba(255, 255, 255, 0.5) 15px,
            transparent 15px,
            transparent 26px,
            rgba(255, 255, 255, 0.5) 26px,
            rgba(255, 255, 255, 0.5) 32px,
            transparent 32px,
            transparent 36px);
}

/* 8. Dense Variable Telemetry Barcode */
.pat-barcode-dense {
    background-color: transparent;
    background-image: repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.45) 0,
            rgba(255, 255, 255, 0.45) 1.5px,
            transparent 1.5px,
            transparent 4px,
            rgba(255, 255, 255, 0.45) 4px,
            rgba(255, 255, 255, 0.45) 7px,
            transparent 7px,
            transparent 9px,
            rgba(255, 255, 255, 0.45) 9px,
            rgba(255, 255, 255, 0.45) 10.5px,
            transparent 10.5px,
            transparent 15px,
            rgba(255, 255, 255, 0.45) 15px,
            rgba(255, 255, 255, 0.45) 19px,
            transparent 19px,
            transparent 22px);
}

/* 9. Off-Center Acoustic Groove Sweep */
.pat-grooves-offset {
    background-color: transparent;
    background-image: repeating-radial-gradient(circle at 25% 50%,
            rgba(255, 255, 255, 0.35) 0,
            rgba(255, 255, 255, 0.35) 1.5px,
            transparent 1.5px,
            transparent 7px);
}

/* 10. Multi-Disc Concentric Vinyl Grooves */
.pat-grooves-multi {
    background-color: transparent;
    background-image: repeating-radial-gradient(circle,
            rgba(255, 255, 255, 0.32) 0,
            rgba(255, 255, 255, 0.32) 1.5px,
            transparent 1.5px,
            transparent 5px);
    background-size: 22px 22px;
}

/* --- TEENAGE ENGINEERING LABELS & BLOCKS --- */
.div-label {
    background-color: #202020;
    color: #ffffff;
    font-family: 'Nohemi', sans-serif;
    font-size: clamp(8px, 0.8vw, 11px);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0 8px;
}

.div-block {
    background-color: #0c0c0c;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Nohemi', sans-serif;
    font-size: clamp(8px, 0.8vw, 11px);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
}

.div-sep {
    opacity: 0.3;
    font-weight: 300;
}

/* --- RED / ORANGE HIGHLIGHT BOXES --- */
.div-highlight {
    background-color: #d90429;
    color: #ffffff;
    font-family: 'Nohemi', sans-serif;
    font-size: clamp(8px, 0.85vw, 11px);
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0 10px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

.div-highlight-lg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1.1;
    padding: 0 12px;
}

.div-highlight-lg .main-hl {
    font-size: clamp(9px, 1vw, 12px);
    font-weight: 900;
    letter-spacing: 0.2em;
}

.div-highlight-lg .sub-hl {
    font-size: clamp(6.5px, 0.65vw, 8.5px);
    font-weight: 500;
    letter-spacing: 0.3em;
    opacity: 0.85;
}

/* --- PROTRUDING ORANGE INDICATOR PIP --- */
.has-pip {
    position: relative;
}

.div-pip {
    position: absolute;
    top: -6px;
    right: 8px;
    width: 10px;
    height: 6px;
    background-color: #d90429;
    border-radius: 1px 1px 0 0;
    box-shadow: 0 -1px 4px #d90429;
    z-index: 2;
}

/* --- BOUNDARY POSITIONS ACROSS 400vh --- */
/* Divider 1 pushed up by 50% of its height with solid boundary background */
.divider-1 {
    top: 0;
    transform: translateY(-50%);
    background-color: #141414;
}

/* Middle dividers (2, 3, 4) replaced by vertical grid running from divider 1 to divider 5 */
.divider-2,
.divider-3,
.divider-4 {
    display: none !important;
}

/* Divider 5 pushed down by 50% of its height with solid boundary background */
.divider-5 {
    bottom: 0;
    transform: translateY(50%);
    background-color: #141414;
}

/* Middle divider blocks and labels inherit transparent background */
.divider-2 .div-block,
.divider-3 .div-block,
.divider-4 .div-block,
.divider-2 .div-label,
.divider-3 .div-label,
.divider-4 .div-label {
    background-color: transparent;
}

/* --- SCROLL PROGRESS BAR --- */
.scroll-progress-container {
    position: fixed;
    left: 4vw;
    bottom: 4vw;
    height: 20vh;
    /* Base height, JS will snap it to prevent cutoffs */
    width: 20px;
    /* Widened */
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s;
    pointer-events: none;
}

.scroll-progress-container.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-progress-track,
.scroll-progress-fill {
    /* Apply subtle neon glow to the visible masked contents */
    filter: drop-shadow(0 0 3px rgba(217, 4, 41, 0.5)) drop-shadow(0 0 6px rgba(217, 4, 41, 0.3));
}

.scroll-progress-track {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(217, 4, 41, 0.15);
    /* Mask out the gaps to create rounded segments */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='5'><rect x='0' y='1' width='20' height='3' rx='1.5' fill='white'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='5'><rect x='0' y='1' width='20' height='3' rx='1.5' fill='white'/></svg>");
    -webkit-mask-size: 100% 5px;
    mask-size: 100% 5px;
    -webkit-mask-position: bottom left;
    mask-position: bottom left;
}

.scroll-progress-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background-color: #d90429;
    /* Matching core color */
    /* Same mask so it aligns perfectly with the track segments */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='5'><rect x='0' y='1' width='20' height='3' rx='1.5' fill='white'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='5'><rect x='0' y='1' width='20' height='3' rx='1.5' fill='white'/></svg>");
    -webkit-mask-size: 100% 5px;
    mask-size: 100% 5px;
    -webkit-mask-position: bottom left;
    mask-position: bottom left;
    transition: height 0.1s ease-out;
}

/* --- HINDI METER TEXT (Teenage Engineering style) --- */
.scroll-meter-text {
    position: absolute;
    left: calc(100% + 10px);
    bottom: 0;
    height: 60%;
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: flex-end;
    pointer-events: none;
    user-select: none;
}

.scroll-meter-text .meter-line {
    font-family: 'Nohemi', sans-serif;
    font-size: clamp(7.5px, 0.85vh, 9.5px);
    font-weight: 400;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    line-height: 1.1;
    display: block;
}

/* ========================================================================= */
/* --- SECTION 4 SLIDES (100vh Modular Tracks) --- */
/* ========================================================================= */
/* --- SECTION 4 CALCULATOR 3D CANVAS (Sticky Pinned) --- */
/* ========================================================================= */
.s4-canvas-wrap {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    display: none;
}

#calc-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* ========================================================================= */
/* --- SECTION 4 SLIDES (100vh Modular Tracks) --- */
/* ========================================================================= */
.s4-slide {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
}

/* Sizing for mesh-gradient in Slide 1 & Slide 4 */
.s4-mesh-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 140vh;
}

#mesh3 {
    --_gradient: radial-gradient(at 66.8% 61.6%, #454545 0px, transparent 50%), radial-gradient(at 30.6% 61.4%, #616161 0px, transparent 50%);
    margin-top: -20vh;
}

/* Solid backdrop with NO gradient for Watermark Slides (Slide 2: ISRO, Slide 3: SPACE) */
.s4-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: clip;
    background: #212020 !important;
    background-color: #212020 !important;
    background-image: none !important;
    --_gradient: none !important;
    z-index: 1;
}

/* Giant 20rem typography matching Section 1 style */
.s4-watermark {
    width: 100vw;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    color: #ffffff;
    font-family: sans-serif;
    font-size: 20rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    display: flex;
    margin: 0;
    pointer-events: none;
    user-select: none;
    box-sizing: border-box;
}

/* ISRO: justify-content: flex-end (right), align-items: center */
.s4-slide-2 .s4-watermark,
.s4-watermark-isro {
    justify-content: flex-end;
    align-items: flex-end;
    padding-right: 4vw;
    opacity: 0.5;
}

/* SPACE: justify-content: flex-start (left), align-items: flex-end (bottom) */
.s4-slide-3 .s4-watermark,
.s4-watermark-space {
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: 4vw;
    padding-bottom: 2vh;
    opacity: 0.5;
    margin: 2vh;
    margin-top: 6vh;
}

/* Frosted glass backdrop layer creating the atmospheric blur */
.s4-frosted-glass {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 3;
    pointer-events: none;
}

/* Compatibility aliases */
.slide1,
.slide2,
.slide15 {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
}

#mesh15 {
    background: #212020 !important;
    background-image: none !important;
    --_gradient: none !important;
}

#fb15 {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 3;
    pointer-events: none;
}

/* ========================================================================= */
/* --- VERTICAL COLUMN GRID (Divider 1 to Divider 5, 4vw Margins) --- */
/* ========================================================================= */
.sec-four-bg-grid {
    position: absolute;
    top: 0;
    left: 4vw;
    width: 92vw;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.sec-four-bg-grid .grid-col {
    width: 23vw;
    flex: 0 0 23vw;
    height: 100%;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    box-sizing: border-box;
}

.sec-four-bg-grid .grid-col:last-child {
    border-right: none;
}

/* ========================================================================= */
/* --- 3 EDITORIAL SLIDES (Between ISRO and SPACE) --- */
/* ========================================================================= */
.s4-editorial-slide {
    position: relative;
    height: 120vh;
    width: 100vw;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background: transparent;
    z-index: 6;
}

.editorial-grid-layout {
    position: relative;
    width: 92vw;
    margin-left: 4vw;
    display: grid;
    grid-template-columns: 23vw 23vw 23vw 23vw;
    column-gap: 0;
    align-items: end; /* Aligns all columns to the bottom edge of adjacent photos */
    box-sizing: border-box;
}

.ed-image-box {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.02);
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    padding: 1.2vw;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.ed-box-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ed-badge-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    user-select: none;
    width: 100%;
    height: 100%;
}

.ed-badge-text {
    font-family: 'Nohemi', sans-serif;
    font-size: clamp(9px, 0.85vw, 12px);
    letter-spacing: 0.18em;
    color: #ffffff;
    line-height: 1.25;
    text-transform: uppercase;
}

.ed-box-label {
    font-family: 'Nohemi', monospace, sans-serif;
    font-size: clamp(8px, 0.75vw, 10.5px);
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
}

.ed-text-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 1.5vw;
    box-sizing: border-box;
    align-self: flex-end; /* Touches lower edge line */
    margin-bottom: 0;
    padding-bottom: 0;
}

.ed-tag {
    font-family: 'Nohemi', sans-serif;
    font-size: clamp(8px, 0.7vw, 10px);
    letter-spacing: 0.2em;
    color: #d90429;
    text-transform: uppercase;
    font-weight: 700;
}

.ed-title {
    font-family: 'Nohemi', sans-serif;
    font-size: clamp(14px, 1.4vw, 22px);
    font-weight: 600;
    color: #ffffff;
    line-height: 1.3;
    margin: 0;
    letter-spacing: -0.01em;
}

.ed-description {
    font-family: sans-serif;
    font-size: clamp(10px, 0.9vw, 13px);
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    margin: 4px 0 0 0;
}

.ed-meta {
    font-family: 'Nohemi', monospace, sans-serif;
    font-size: clamp(8px, 0.7vw, 10px);
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.35);
    margin: 4px 0 0 0;
    text-transform: uppercase;
}

.ed-col-group {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.ed-circle-arrow {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: #ffffff;
    color: #141414;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 1.5vw;
    cursor: pointer;
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.ed-circle-arrow:hover {
    transform: scale(1.08);
    background-color: #d90429;
    color: #ffffff;
}

/* ========================================================================= */
/* --- MOBILE RESPONSIVENESS (max-width: 768px) --- */
/* ========================================================================= */
@media screen and (max-width: 768px) {
    .sec-four {
        height: auto !important;
        min-height: auto;
        overflow: visible;
        padding-bottom: 8vh;
    }

    .sec-four-bg-grid {
        position: absolute;
        top: 0;
        left: 4vw;
        width: 92vw;
        height: 100%;
        display: flex;
        pointer-events: none;
        z-index: 5;
    }

    .sec-four-bg-grid .grid-col {
        width: 23vw;
        flex: 0 0 23vw;
        height: 100%;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
    }

    .s4-slide {
        height: auto !important;
        min-height: auto;
        padding: 7vh 0 !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .s4-slide-1 {
        min-height: 85vh;
        padding: 5vh 0 6vh 0 !important;
    }

    .s4-slide-2,
    .s4-slide-3,
    .s4-slide-4 {
        height: auto !important;
        min-height: 40vh;
        padding: 6vh 0 !important;
    }

    .s4-watermark {
        position: relative !important;
        width: 92vw !important;
        height: auto !important;
        font-size: clamp(4.5rem, 20vw, 7rem) !important;
        padding: 0 !important;
        margin: 0 auto !important;
        display: flex;
        justify-content: center !important;
        align-items: center !important;
    }

    .s4-editorial-slide {
        height: auto !important;
        min-height: auto !important;
        width: 100vw;
        padding: 7vh 0 !important;
        display: block;
    }

    .editorial-grid-layout {
        width: 92vw !important;
        margin-left: 4vw !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 3vh !important;
        align-items: stretch !important;
    }

    /* Stacked mobile layout: Image first, text second */
    #calc-box {
        width: 92vw !important;
        height: 44vh !important;
        grid-column: auto !important;
    }

    .ed-image-box {
        width: 92vw !important;
        height: 44vh !important;
        grid-column: auto !important;
    }

    .ed-text-block {
        width: 92vw !important;
        padding: 0 1.5vw !important;
        align-self: stretch !important;
    }

    .ed-title {
        font-size: clamp(18px, 5.5vw, 24px) !important;
        line-height: 1.25;
    }

    .ed-description {
        font-size: clamp(12px, 3.5vw, 14px) !important;
    }

    /* Editorial Slide 1 on mobile: photo on top, text underneath */
    .s4-editorial-slide:nth-of-type(1) .editorial-grid-layout .ed-image-box {
        order: 1;
    }

    .s4-editorial-slide:nth-of-type(1) .editorial-grid-layout .ed-text-block {
        order: 2;
    }

    /* Editorial Slide 2: separate the groups cleanly */
    .ed-col-group {
        width: 92vw !important;
        grid-column: auto !important;
        margin-bottom: 2vh;
    }

    .ed-col-group .ed-image-box {
        width: 92vw !important;
        height: 42vh !important;
    }

    .ed-col-group:nth-child(2) .ed-image-box {
        width: 58vw !important;
        height: 58vw !important;
        max-width: 240px;
        max-height: 240px;
        margin: 0 auto;
    }

    .ed-col-group:nth-child(2) .ed-text-block {
        text-align: center;
        align-items: center;
        margin-top: 2vh;
    }

    .ed-circle-arrow {
        margin: 2vh auto 0 auto !important;
        width: 48px;
        height: 48px;
    }

    .divider-1,
    .divider-5 {
        position: relative !important;
        transform: none !important;
        width: 92vw !important;
        margin-left: 4vw !important;
    }
}