/* =========================================================
   SWORN TO SECRECY — HERO TUNING V3
   Scale-only cinematic hero motion + title artwork
   ========================================================= */
/* =========================================================
   V3 — SEAMLESS CINEMATIC SCALE
   Fade en schaal zijn volledig van elkaar gescheiden.
   Geen tussenliggende transform-keyframes = geen trapjes.
   ========================================================= */

.atmo-slide {
  animation-name:
    cinematic-fade-v3,
    cinematic-zoom-v3;

  animation-duration:
    40s,
    40s;

  /*
   * Fade = lineair tussen zijn opacity-punten.
   * Zoom = begint langzaam en versnelt continu.
   */
  animation-timing-function:
    linear,
    cubic-bezier(.42, 0, 1, 1);

  animation-iteration-count:
    infinite,
    infinite;

  animation-fill-mode:
    both,
    both;

  backface-visibility: hidden;
  will-change: opacity, transform;
}


/* SHROUD */
.slide-1 {
  --sts-zoom-end: 1.095;
  transform-origin: 38% 42%;
  animation-delay: 0s, 0s;
}

/* CHARNY */
.slide-2 {
  --sts-zoom-end: 1.085;
  transform-origin: 50% 14%;
  animation-delay: 8s, 8s;
}

/* SCIENCE */
.slide-3 {
  --sts-zoom-end: 1.090;
  transform-origin: 42% 38%;
  animation-delay: 16s, 16s;
}

/* QUANTUM */
.slide-4 {
  --sts-zoom-end: 1.080;
  transform-origin: 50% 50%;
  animation-delay: 24s, 24s;
}

/* COURTROOM */
.slide-5 {
  --sts-zoom-end: 1.085;
  transform-origin: 42% 34%;
  animation-delay: 32s, 32s;
}


/* =========================================================
   FADE
   Heeft géén invloed meer op de snelheid van de zoom.
   ========================================================= */

@keyframes cinematic-fade-v3 {

  0% {
    opacity: 0;
  }

  4% {
    opacity: .38;
  }

  8% {
    opacity: .82;
  }

  17% {
    opacity: .98;
  }

  21% {
    opacity: .92;
  }

  25% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}


/* =========================================================
   CONTINUE ZOOM
   Slechts TWEE relevante schaalpunten.
   Hierdoor één onafgebroken beweging.
   ========================================================= */

@keyframes cinematic-zoom-v3 {

  0% {
    transform: translateZ(0) scale(1);
  }

  25% {
    transform:
      translateZ(0)
      scale(var(--sts-zoom-end));
  }

  100% {
    transform:
      translateZ(0)
      scale(var(--sts-zoom-end));
  }
}
@media (min-width:1400px) {
  .slide-2 { transform-origin: 50% 10%; }
}

@media (max-width:960px) {
  .slide-1 { transform-origin: 50% 42%; }
  .slide-3 { transform-origin: 50% 38%; }
  .slide-4 { transform-origin: 50% 50%; }
  .slide-5 { transform-origin: 50% 34%; }
}

@media (max-width:600px) {
  .slide-2 { transform-origin: 50% 16%; }
}

.visually-hidden {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* =========================================================
   SWORN TO SECRECY — TWO-PART HERO TITLE
   ========================================================= */

.sts-title-stack {
  width: min(100%, 820px);

  display: flex;
  flex-direction: column;
  align-items: center;

  margin: 14px 0 18px;

  /* DIT IS ONZE HOOFDREGELAAR */
  gap: 14px;
}

.sts-title-line {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;

  filter:
    drop-shadow(0 6px 18px rgba(0,0,0,.48))
    drop-shadow(0 0 14px rgba(216,180,106,.10));
}

/* Beide bronafbeeldingen zijn even breed.
   Eventueel kunnen we ze later afzonderlijk schalen. */

.sts-title-line-sworn {
  width: 100%;
}

.sts-title-line-secrecy {
  width: 100%;
}
.eyebrow {
  font-size: .92rem;
  letter-spacing: .18em;
}
/* =========================================================
   ACCESS OFFER / PRICE
   ========================================================= */

.access-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 18px;
}

/* override oorspronkelijke ondermarge */
.access-card-top .access-icon {
  flex: 0 0 62px;
  margin: 0;
}

.access-offer {
  min-width: 0;
  max-width: 285px;
  text-align: right;
}

.access-price {
  color: var(--gold-pale);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.9rem, 2.5vw, 2.35rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  text-shadow:
    0 2px 14px rgba(0,0,0,.55),
    0 0 18px rgba(216,180,106,.12);
}

.access-price-note {
  margin-top: 7px;
  color: var(--gold);
  font-size: .67rem;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.access-price-copy {
  margin-top: 5px;
  color: #aeb6c4;
  font-size: .74rem;
  line-height: 1.4;
}


/* =========================================================
   HERO ACCESS VALUE
   ========================================================= */

.hero-access-value {
  max-width: 710px;
  margin: 18px 0 0;

  color: #d8dde6;
  font-size: .97rem;
  line-height: 1.65;
}

.hero-access-value strong {
  color: var(--gold-pale);
  font-weight: 800;
}

.hero-access-value span {
  color: var(--gold-pale);
  font-weight: 800;
  white-space: nowrap;
}
.access-offer .access-price {
  color: var(--gold-pale) !important;
  font-size: clamp(2.2rem, 3vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  text-shadow:
    0 2px 14px rgba(0,0,0,.55),
    0 0 18px rgba(216,180,106,.22);
}

.access-offer .access-price-note {
  color: var(--gold) !important;
}

/* TABLET / MOBILE */

@media (max-width: 960px) {

  .hero-access-value {
    margin-inline: auto;
  }
}

@media (max-width: 600px) {

  .access-card-top {
    gap: 14px;
    margin-bottom: 16px;
  }

  .access-card-top .access-icon {
    flex-basis: 58px;
    width: 58px;
    height: 58px;
  }

  .access-price {
    font-size: 1.65rem;
  }

  .access-price-note {
    font-size: .59rem;
    letter-spacing: .09em;
  }

  .access-price-copy {
    font-size: .68rem;
  }

  .hero-access-value {
    font-size: .9rem;
    line-height: 1.6;
  }
}
/* =========================================================
   DOCUMENTARY BACKGROUND MUSIC
   ========================================================= */

.sts-music-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 1200;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 9px 14px;

  border: 1px solid rgba(216,180,106,.36);
  border-radius: 6px;

  background: rgba(2,3,8,.60);

  color: var(--gold-soft);

  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;

  backdrop-filter: blur(8px);

  box-shadow:
    0 4px 20px rgba(0,0,0,.28),
    0 0 16px rgba(216,180,106,.06);

  transition:
    border-color .25s ease,
    color .25s ease,
    background .25s ease;

  cursor: pointer;
}

.sts-music-toggle:hover {
  color: var(--gold-pale);
  border-color: rgba(216,180,106,.65);
  background: rgba(216,180,106,.08);
}

.sts-music-toggle.is-playing {
  color: var(--gold-pale);
  border-color: rgba(216,180,106,.60);
}

.sts-music-icon {
  font-size: 1rem;
  line-height: 1;
}
/* MUSIC button alleen zichtbaar op publieke pagina */
.is-unlocked .sts-music-toggle {
  display: none !important;
}

/* Verberg commerciële hero-tekst na login */
.is-unlocked .hero-question,
.is-unlocked .hero-access-value {
  display: none !important;
}

/* Verberg publieke Investigation-intro na login */
.is-unlocked .public-intro {
  display: none !important;
}
/* =========================================================
   DOCUMENTARY ACCESS — MAIN CINEMATIC BACKGROUND
   Eén definitief blok: docu-main + naadloze overgang + 100→140 push-in
   ========================================================= */

.sts-docu-access-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #070b13;
  border-top: 0 !important;
  margin-top: -1px;
}

/* Verwijder de fysieke scheidingslijn onder de hero. */
.access-hero {
  border-bottom: 0 !important;
}

/* docu-main.png — uitsluitend de onderste Investigation/Platform-sectie. */
.sts-docu-access-section::before {
  content: "";
  position: absolute;
  top: -42px;
  left: -3%;
  width: 106%;
  height: 900px;
  z-index: 0;
  pointer-events: none;

  background-image: url("../images/docu-access/docu-main2.png");
  background-position: center 42%;
  background-size: cover;
  background-repeat: no-repeat;

  /* Hoofdregelaar voor zichtbaarheid van docu-main. */
  opacity: .20;

  transform: translateZ(0) scale(1.00);
  transform-origin: 50% 42%;
  animation: sts-docu-main-cinematic-zoom 38s linear infinite alternate;
  will-change: transform;
}

/*
   Twee zachte blends:
   1. bovenaan slechts een lichte donkere fade voor een naadloze aansluiting;
   2. onderaan een sterkere fade zodat het beeld rustig in het hoofdstukvlak verdwijnt.
*/
.sts-docu-access-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgba(5,8,15,.28) 0,
      rgba(5,8,15,.18) 120px,
      rgba(5,8,15,.08) 260px,
      rgba(5,8,15,0) 400px
    ),
    linear-gradient(
      to bottom,
      rgba(7,11,19,0) 0,
      rgba(7,11,19,0) 520px,
      rgba(7,11,19,.46) 700px,
      rgba(7,11,19,.88) 900px,
      #070b13 1120px
    );
}

.sts-docu-access-section > * {
  position: relative;
  z-index: 2;
}

/* Oude effen blauwe lagen transparant: docu-main blijft zichtbaar. */
.sts-docu-access-section .public-intro,
.sts-docu-access-section .platform-shell,
.sts-docu-access-section .locked-stage {
  background: transparent !important;
}

/* Premiere-achtige push-in: 100% → 140%. */
@keyframes sts-docu-main-cinematic-zoom {
  0% {
    transform: translateZ(0) scale(1.00);
  }
  100% {
    transform: translateZ(0) scale(1.40);
  }
}

/* =========================================================
   CHAPTER POSTERS + EXTERNAL SUBTITLE CONTROLS
   Chapter 2 test generalized to all available chapter videos.
   ========================================================= */

.chapter-media-stack {
  grid-area: media;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* Clean 16:9 poster/video surface. */
.chapter-media-stack .chapter-media {
  grid-area: auto;
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  align-items: stretch;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Final poster mapping. */
.media-ch1-poster   { background-image: url("../images/docu-access/chapter-1.png"); }
.media-ch2-poster   { background-image: url("../images/docu-access/chapter-2.png"); }
.media-ch3-poster   { background-image: url("../images/docu-access/chapter-3.png"); }
.media-ch4-poster   { background-image: url("../images/docu-access/chapter-4.png"); }
.media-ch5-poster   { background-image: url("../images/docu-access/chapter-5.png"); }
.media-ch6e1-poster { background-image: url("../images/docu-access/chapter-6-1.png"); }
.media-ch6e2-poster { background-image: url("../images/docu-access/chapter-6-2.png"); }
.media-ch6e3-poster { background-image: url("../images/docu-access/chapter-6-3.png"); }
.media-ch7-poster   { background-image: url("../images/docu-access/chapter-7.png"); }
.media-ch8-poster   { background-image: url("../images/docu-access/chapter-8.png"); }
.media-ch9-poster   { background-image: url("../images/docu-access/chapter-9.png"); }
.media-ch10-poster  { background-image: url("../images/docu-access/chapter-10-1.png"); }

/* Chapter 10 episode 2 and 3 posters. */
.media-ch10e2-poster { background-image: url("../images/docu-access/chapter-10-2.png"); }
.media-ch10e3-poster { background-image: url("../images/docu-access/chapter-10-3.png"); }

/* Subtitle controls live OUTSIDE the poster/video surface. */
.language-panel-external {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(216,180,106,.16);
  border-radius: 10px;
  background:
    linear-gradient(
      180deg,
      rgba(15,18,25,.96),
      rgba(7,9,14,.98)
    );
  box-shadow: 0 10px 28px rgba(0,0,0,.24);
}

.language-panel-external .language-choice {
  min-height: 62px;
  padding: 8px 10px;
  background: rgba(11,14,20,.94);
}

.chapter-media-stack + .chapter-progress {
  margin-top: 4px;
}

/* Upcoming posters use the same clean 16:9 frame but no subtitle panel. */
.chapter-row.is-upcoming .chapter-media-stack .chapter-media {
  position: relative;
}

.chapter-row.is-upcoming .coming-card {
  position: relative;
  z-index: 2;
}
/* =========================================================
   MEMBER LIBRARY — CINEMATIC GLASS
   Laat docu-main zichtbaar door de member library.
   ========================================================= */

.is-unlocked .member-benefits {
  background: rgba(5,8,14,.08) !important;
  border-color: rgba(216,180,106,.26) !important;
  box-shadow:
    0 14px 38px rgba(0,0,0,.14) !important;
}

/* De twee e-bookkeuzes blijven leesbaar,
   maar laten de achtergrond duidelijk doorschijnen. */
.is-unlocked .ebook-menu {
  background: rgba(5,8,14,.18) !important;
  border-color: rgba(255,255,255,.11) !important;
}

/* Ook geopend menu zo transparant mogelijk houden. */
.is-unlocked .ebook-menu-body {
  background: rgba(5,8,14,.08) !important;
}
/* =========================================================
   MEMBER LIBRARY — CINEMATIC BREATHING SPACE
   Bij gesloten e-bookmenu's blijft het volledige 3D-beeld
   zichtbaar voordat Chapter 1 begint.
   ========================================================= */

.is-unlocked .member-benefits {
  margin-bottom: clamp(220px, 17vw, 330px);
  transition: margin-bottom .45s ease;
}

/* Zodra één van de e-books wordt geopend, levert het menu
   zelf voldoende hoogte en vervalt de extra beeldruimte. */
.is-unlocked .member-benefits:has(.ebook-menu[open]) {
  margin-bottom: 26px;
}
/* =========================================================
   HERO BACKGROUNDS — RESPONSIVE FINAL FOCAL MAP
   2026-10
   ---------------------------------------------------------
   Doel:
   - geen herhaling / dubbele achtergrondbeelden
   - Shroud herkenbaar en goed rond de titel
   - Charny hoger en binnen beeld houden
   - Quantum / Courtroom bij smallere desktop niet breken
   - Science ongemoeid laten
   ========================================================= */


/* NOOIT achtergrondtegels tonen */
.atmo-slide {
    background-repeat: no-repeat;
    background-color: #05070b;
}


/* =========================================================
   LARGE DESKTOP — ca. 1550px en breder
   Alleen SHROUD en CHARNY corrigeren.
   Overige beelden blijven zoals ze zijn.
   ========================================================= */

@media (min-width: 1550px) {

    /* SHROUD
       Extra overscan geeft ruimte om het beeld werkelijk
       verder naar links te trekken. */
    .slide-1 {
        background-size: auto 125%;
        background-position: 100% 50%;
    }

    /* CHARNY
       Meer verticale overscan + hoog focuspunt.
       Hierdoor gezicht hoger en iets verder naar links. */
    .slide-2 {
        background-size: auto 118%;
        background-position: 100% 110%;
    }
}


/* =========================================================
   MEDIUM DESKTOP — 1281px t/m 1549px
   Shroud stond hier al goed.
   Alleen Charny omhoog brengen.
   ========================================================= */

@media (min-width: 1281px) and (max-width: 1549px) {

    .slide-2 {
        background-size: auto 125%;
        background-position: 68% 94%;
    }
}


/* =========================================================
   SMALL DESKTOP — 961px t/m 1280px
   Hier begonnen de grootste crop-/breekproblemen.
   ========================================================= */

@media (min-width: 961px) and (max-width: 1280px) {

    /* SHROUD terug het zichtbare vlak in */
    .slide-1 {
        background-size: auto 50%;
        background-position: 62% 50%;
    }

    /* CHARNY terug in beeld én flink hoger */
    .slide-2 {
        background-size: auto 118%;
        background-position: 54% 96%;
    }

    /* QUANTUM
       Extra hoogte zodat storende bovenste overgang
       buiten de belangrijkste kijkzone valt. */
    .slide-4 {
        background-size: auto 112%;
        background-position: 50% 82%;
    }

    /* COURTROOM
       Zelfde principe: verticale dekking garanderen. */
    .slide-5 {
        background-size: auto 112%;
        background-position: 54% 82%;
    }
}


/* =========================================================
   TABLET / NARROW — 701px t/m 960px
   Hero wordt één kolom en daardoor veel hoger.
   ========================================================= */

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

    .slide-1 {
        background-size: auto 70%;
        background-position: 64% 68%;
    }

    .slide-2 {
        background-size: auto 124%;
        background-position: 70% 98%;
    }

    .slide-4 {
        background-size: auto 116%;
        background-position: 50% 84%;
    }

    .slide-5 {
        background-size: auto 116%;
        background-position: 52% 84%;
    }
}


/* =========================================================
   SMARTPHONE — 700px en smaller
   Sterkere focal crops noodzakelijk.
   ========================================================= */

@media (max-width: 700px) {

    /* SHROUD
       Focal point wat verder naar rechts in de bron,
       waardoor relevante inhoud links in beeld komt. */
    .slide-1 {
        background-size: auto 80%;
        background-position: 72% 48%;
         margin-bottom: 800px;
    }

    /* CHARNY
       Bewust veel verticale overscan.
       100% Y trekt het beeld maximaal omhoog zodat
       het gezicht hoger achter/tussen de titelregels komt. */
    .slide-2 {
        background-size: auto 100%;
        background-position: 50% 80%;
        margin-bottom: 800px;
    }

    .slide-4 {
        background-size: auto 120%;
        background-position: 50% 86%;
    }

    .slide-5 {
        background-size: auto 120%;
        background-position: 50% 86%;
    }
}

@media (max-width: 960px) {
  .sts-docu-access-section::before {
    height: 780px;
    background-position: center 38%;
  }
}

@media (max-width: 600px) {
  .sts-docu-access-section::before {
    top: -20px;
    left: -8%;
    width: 116%;
    height: 700px;
    background-position: 54% 36%;
    opacity: .48;
  }

  .chapter-media-stack {
    gap: 10px;
  }

  .language-panel-external {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 9px;
  }

  .language-panel-external .language-choice {
    min-height: 54px;
  }
}

/* MOBILE */

@media (max-width: 600px) {

  .sts-music-toggle {
    top: 9px;
    right: 10px;

    padding: 7px 10px;

    font-size: .58rem;
  }

  .sts-music-icon {
    font-size: .9rem;
  }
}
/* TABLET */
@media (max-width: 960px) {

  .sts-title-stack {
    width: min(100%, 760px);
    margin: 10px auto 16px;

    gap: 6px;
  }
}


/* SMARTPHONE */
@media (max-width: 600px) {

  .sts-title-stack {
    width: 100%;
    margin: 8px auto 14px;

    gap: 4px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .atmo-slide,
  .sts-docu-access-section::before {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
}