/* =========================================================
   SWORN TO SECRECY — HERO TUNING OVERRIDE
   WEBMASTER HK — tuning round 1
   ---------------------------------------------------------
   IMPORTANT:
   Load this file AFTER sts-documentary-platform.css
   This file only overrides hero atmosphere / positioning.
   ========================================================= */

/* ---------- GLOBAL LIGHT / ATMOSPHERE ---------- */

.atmo-slide {
    /* default for all five hero images */
    filter: saturate(104%) contrast(103%) brightness(145%);
}

/* Less black suppression than the base stylesheet.
   The image stays cinematic, but details remain visible. */
.hero-vignette {
    background:
        radial-gradient(
            circle at 55% 38%,
            transparent 0 24%,
            rgba(3,5,9,.18) 56%,
            rgba(2,3,7,.70) 100%
        ),
        linear-gradient(
            90deg,
            rgba(2,3,7,.62) 0%,
            rgba(2,3,7,.28) 47%,
            rgba(2,3,7,.50) 100%
        ),
        linear-gradient(
            180deg,
            rgba(2,3,7,.18),
            rgba(2,3,7,.72)
        );
}

/* Mist remains subtle for now; easy to strengthen later. */
.mist {
    opacity: .24;
}

/* A little more visible during the centre of each fade. */
@keyframes cinematic-fade {
    0% {
        opacity: 0;
        transform: scale(1.02);
    }

    4% {
        opacity: .38;
    }

    8% {
        opacity: .82;
    }

    17% {
        opacity: .98;
        transform: scale(1.005);
    }

    21% {
        opacity: .92;
    }

    25% {
        opacity: 0;
        transform: scale(1.00);
    }

    100% {
        opacity: 0;
        transform: scale(1.00);
    }
}


/* =========================================================
   PER-IMAGE TUNING
   Higher X percentage = image is pulled further LEFT
   Lower Y percentage  = image sits visually LOWER
   when background-size is larger than the hero frame.
   ========================================================= */

/* SHROUD — position already approved; only more light */
.slide-1 {
    background-size: cover;
    background-position: center 44%;
    filter: saturate(104%) contrast(103%) brightness(150%);
}

/* CHARNY — substantially LEFT + LOWER */
.slide-2 {
    background-size: 118% auto;
    background-position: 88% 8%;
    filter: saturate(103%) contrast(103%) brightness(145%);
}

/* SCIENCE — CERN machinery LEFT + LOWER */
.slide-3 {
    background-size: 114% auto;
    background-position: 86% 12%;
    filter: saturate(104%) contrast(103%) brightness(148%);
}

/* QUANTUM — position retained, extra light because source is dark */
.slide-4 {
    background-size: cover;
    background-position: center 50%;
    filter: saturate(108%) contrast(102%) brightness(162%);
}

/* COURTROOM — LEFT + LOWER */
.slide-5 {
    background-size: 112% auto;
    background-position: 82% 18%;
    filter: saturate(104%) contrast(103%) brightness(150%);
}


/* =========================================================
   LARGE / WIDE DESKTOP
   Extra correction for a wide full-screen monitor.
   This is mainly for Charny, whose face otherwise rises
   too high as background-size: cover crops vertically.
   ========================================================= */

@media screen and (min-width: 1900px) {

    .slide-2 {
        background-size: 120% auto;
        background-position: 92% 5%;
    }

    .slide-3 {
        background-size: 116% auto;
        background-position: 90% 8%;
    }

    .slide-5 {
        background-size: 114% auto;
        background-position: 86% 14%;
    }
}


/* =========================================================
   TABLET / MOBILE
   Return to cover so the hero remains completely filled.
   We will tune mobile separately after desktop is locked.
   ========================================================= */

@media screen and (max-width: 960px) {

    .slide-1,
    .slide-2,
    .slide-3,
    .slide-4,
    .slide-5 {
        background-size: cover;
    }

    .slide-1 { background-position: center 44%; }
    .slide-2 { background-position: 50% 18%; }
    .slide-3 { background-position: 50% 22%; }
    .slide-4 { background-position: center 50%; }
    .slide-5 { background-position: 50% 28%; }
}