/* ==============================================
   WHITE STALLION STUDIOS — MAIN STYLESHEET
   Cinematic Tech — Noir Zwart / Stallion Wit /
   Twents Rood / Filmkorrel Grijs.
   Headings & MenuBar: Bebas Neue. Body: Inter.
   ============================================== */

/* ----------------------------------------------
   1. CSS VARIABLES & RESET
---------------------------------------------- */
:root {
    /* ====== Brand Colors — Cinematic Tech ====== */
    --color-noir-black:      #0A0A0A;   /* Hoofd achtergrond     */
    --color-stallion-white:  #F8F9FA;   /* Hoofd tekst & logo    */
    --color-twente-red:      #D31122;   /* Accent & call-to-action */
    --color-filmgrain-gray:  #2C2C2C;   /* Onderscheid & borders */

    /* Tonale varianten voor hover en gestapelde surfaces */
    --color-twente-red-dark: #A20D1B;
    --color-filmgrain-soft:  #1A1A1A;   /* iets lichter dan noir */

    /* ====== Semantische aliases (voor leesbaarheid) ====== */
    --color-bg:           var(--color-noir-black);
    --color-surface:      var(--color-filmgrain-gray);
    --color-text:         var(--color-stallion-white);
    --color-text-muted:   rgba(248, 249, 250, 0.65);
    --color-accent:       var(--color-twente-red);
    --color-accent-dark:  var(--color-twente-red-dark);
    --color-border:       rgba(248, 249, 250, 0.08);

    /* Typografie */
    --font-display: 'Bebas Neue', 'Impact', 'Arial Narrow', sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Layout */
    --header-height: 80px;
    --max-width:     1400px;
    --section-pad:   clamp(4rem, 10vh, 8rem);

    /* Effecten */
    --shadow-header: 0 4px 20px rgba(0, 0, 0, 0.45);
    --shadow-soft:   0 12px 30px rgba(0, 0, 0, 0.55);
    --transition:    300ms cubic-bezier(0.4, 0, 0.2, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-stallion-white);
    background-color: var(--color-noir-black);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition);
}

ul {
    list-style: none;
}

button {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
}

/* Bebas Neue is een display-font met enkel 400-gewicht en uitsluitend
   hoofdletters — text-transform: uppercase garandeert dat ook fallback-
   fonts (Impact, Arial Narrow) hetzelfde renderen. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-stallion-white);
}

p, span, li {
    font-family: var(--font-body);
}


/* ----------------------------------------------
   2. STICKY HEADER & NAVIGATIE
---------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-filmgrain-gray);
    box-shadow: var(--shadow-header);
    z-index: 1000;
    transition: background-color var(--transition), height var(--transition);
}

.site-header.is-scrolled {
    background-color: rgba(10, 10, 10, 0.95);
    height: 64px;
}

.main-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
    gap: 2rem;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.nav-list--left  { justify-content: flex-end; }
.nav-list--right { justify-content: flex-start; }

.nav-item {
    position: relative;
}

/* Hoofditems in de MenuBar — Bebas Neue per huisstijl */
.nav-link {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-stallion-white);
    padding: 0.5rem 0;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-twente-red);
    transition: width var(--transition);
}

.nav-link:hover,
.nav-link:focus-visible {
    color: var(--color-twente-red);
}

.nav-link:hover::after,
.nav-item:focus-within .nav-link::after {
    width: 100%;
}

/* --- Centraal Brand Logo --- */
.brand-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    transition: transform var(--transition);
}

.brand-logo:hover {
    transform: scale(1.03);
}

.brand-logo__main {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.85rem;
    color: var(--color-stallion-white);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.brand-logo__sub {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: var(--color-twente-red);
    margin-top: 0.35rem;
}

/* --- Dropdown Menu --- */
.has-dropdown > .nav-link::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    margin-right: 0.5rem;
    margin-bottom: 2px;
    transition: transform var(--transition);
    opacity: 0.6;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 240px;
    background-color: var(--color-filmgrain-gray);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft);
    border-radius: 4px;
    padding: 0.75rem 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index: 1001;
}

.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background-color: var(--color-filmgrain-gray);
    border-left: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
}

.nav-item.has-dropdown:hover .dropdown-menu,
.nav-item.has-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* Submenu-items — Inter per huisstijl */
.dropdown-menu li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-stallion-white);
    transition: background-color var(--transition), padding-left var(--transition), color var(--transition);
}

.dropdown-menu li a:hover {
    background-color: var(--color-filmgrain-soft);
    color: var(--color-twente-red);
    padding-left: 1.5rem;
}

.badge {
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: var(--color-twente-red);
    color: var(--color-stallion-white);
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 0.5rem;
}

/* --- Mobiele hamburger --- */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    z-index: 1010;
}

.nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-stallion-white);
    transition: transform var(--transition), opacity var(--transition);
}


/* ----------------------------------------------
   3. HERO SECTIE
---------------------------------------------- */
.hero {
    position: relative;
    width: 100%;
    height: calc(100vh - var(--header-height));
    min-height: 600px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-stallion-white);
    text-align: center;
}

.hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(10, 10, 10, 0.55) 0%,
        rgba(10, 10, 10, 0.35) 50%,
        rgba(10, 10, 10, 0.80) 100%
    );
}

.hero__content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 2rem;
    opacity: 0;
    transform: translateY(30px);
    animation: heroFadeIn 1.2s 0.3s ease-out forwards;
}

@keyframes heroFadeIn {
    to { opacity: 1; transform: translateY(0); }
}

.hero__title {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 400;
    letter-spacing: 0.04em;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6);
    line-height: 1.02;
}

.hero__subtitle {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    font-weight: 300;
    max-width: 640px;
    margin: 0 auto 2.5rem;
    line-height: 1.6;
    opacity: 0.95;
    text-shadow: 0 1px 20px rgba(0, 0, 0, 0.4);
}

/* Twents Rood call-to-action knop — gebruik op alle CTA-elementen */
.cta-button {
    display: inline-block;
    padding: 1rem 2.25rem;
    max-width: 100%;
    background-color: var(--color-twente-red);
    color: var(--color-stallion-white);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
    box-shadow: 0 8px 30px rgba(211, 17, 34, 0.35);
}

.cta-button:hover,
.cta-button:focus-visible {
    background-color: var(--color-twente-red-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(211, 17, 34, 0.55);
}

/* Compactere variant voor lange CTA-teksten binnen contentblokken */
.cta-button--small {
    padding: 0.75rem 1.5rem;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
}

.hero__scroll-indicator {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 40px;
    border: 2px solid rgba(248, 249, 250, 0.7);
    border-radius: 14px;
    z-index: 2;
}

.hero__scroll-indicator span {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 3px;
    height: 8px;
    background-color: var(--color-stallion-white);
    border-radius: 2px;
    transform: translateX(-50%);
    animation: scrollDot 1.8s infinite ease-in-out;
}

@keyframes scrollDot {
    0%   { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, 16px); }
}


/* ----------------------------------------------
   4. ONDERSCHEIDINGSBALKEN (Divider Bars)
---------------------------------------------- */
.divider-bar {
    position: relative;
    width: 100%;
    padding: 2.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

.divider-bar__title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    text-align: center;
    margin: 0;
}

.divider-bar--dark {
    background-color: var(--color-noir-black);
    color: var(--color-stallion-white);
    border-top:    1px solid var(--color-filmgrain-gray);
    border-bottom: 1px solid var(--color-filmgrain-gray);
}

.divider-bar--dark .divider-bar__title {
    color: var(--color-twente-red);
}

.divider-bar--light {
    background-color: var(--color-filmgrain-gray);
    color: var(--color-stallion-white);
}

.divider-bar--accent {
    background: linear-gradient(135deg, var(--color-twente-red) 0%, var(--color-twente-red-dark) 100%);
    color: var(--color-stallion-white);
}


/* ----------------------------------------------
   5. CONTENT- EN PARALLAX-SECTIES
---------------------------------------------- */
.content-section {
    position: relative;
    width: 100%;
    min-height: 90vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.parallax-section {
    background-color: var(--color-noir-black);   /* Fallback achter de image. */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* background-image wordt inline per <section> gezet — zo wordt
       de URL relatief aan het HTML-bestand opgelost (i.p.v. relatief
       aan css/style.css, wat tot een gebroken pad zou leiden). */
}

.parallax-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(10, 10, 10, 0.65) 0%,
        rgba(10, 10, 10, 0.45) 50%,
        rgba(10, 10, 10, 0.70) 100%
    );
    z-index: 1;
}

.content-section__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--section-pad) 2rem;
}

.content-block {
    max-width: 560px;
    color: var(--color-stallion-white);
}

.content-block--right    { margin-left: auto;  text-align: right; }
.content-block--centered { margin: 0 auto;     text-align: center; }

.content-block__eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--color-twente-red);
    margin-bottom: 1rem;
}

.content-block__title {
    font-size: clamp(2.4rem, 5vw, 4rem);
    margin-bottom: 1.5rem;
    line-height: 1.02;
}

.content-block__body {
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 1.25rem;
    color: rgba(248, 249, 250, 0.85);
}

.content-block__list {
    margin: 1.5rem 0;
    padding: 0;
}

.content-block--right .content-block__list {
    text-align: right;
}

.content-block__list li {
    position: relative;
    padding: 0.5rem 0 0.5rem 1.5rem;
    font-size: 1rem;
    border-bottom: 1px solid var(--color-filmgrain-gray);
}

.content-block--right .content-block__list li {
    padding: 0.5rem 1.5rem 0.5rem 0;
}

.content-block__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: var(--color-twente-red);
    border-radius: 50%;
}

.content-block--right .content-block__list li::before {
    left: auto;
    right: 0;
}

.content-block__link {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 0.85rem 0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-twente-red);
    border-bottom: 2px solid var(--color-twente-red);
    transition: color var(--transition), letter-spacing var(--transition);
}

.content-block__link:hover {
    color: var(--color-stallion-white);
    letter-spacing: 0.2em;
}


/* ----------------------------------------------
   6. UTILITIES — Intro, prijzen, notities
---------------------------------------------- */

/* Kleine intro-band onder de hero — voor pagina's met een proloog */
.intro-section {
    width: 100%;
    background-color: var(--color-noir-black);
    padding: clamp(3rem, 7vh, 5rem) 2rem;
    text-align: center;
}

.intro-section__inner {
    max-width: 760px;
    margin: 0 auto;
}

.intro-section p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(248, 249, 250, 0.85);
}

/* Prijsindicatie binnen een content-block */
.price-tag {
    display: block;
    margin: 1.5rem 0 0.5rem;
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--color-twente-red);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.content-block--right .price-tag {
    text-align: right;
}

.content-block--centered .price-tag {
    text-align: center;
}

/* Subtiele italic note onder een content-block (bv. abonnement-voorwaarden) */
.content-block__note {
    display: block;
    margin: 1rem 0 1.5rem;
    font-size: 0.85rem;
    font-style: italic;
    color: rgba(248, 249, 250, 0.6);
}


/* ----------------------------------------------
   7. FOOTER
---------------------------------------------- */
.site-footer {
    background-color: var(--color-noir-black);
    border-top: 1px solid var(--color-filmgrain-gray);
    padding: 4rem 2rem 0;
    color: var(--color-stallion-white);
}

.site-footer__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 3rem;
    padding-bottom: 3rem;
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.site-footer__brand .brand-logo {
    align-items: flex-start;
    text-align: left;
}

.site-footer__tagline {
    color: rgba(248, 249, 250, 0.6);
    font-size: 0.9rem;
    max-width: 320px;
    line-height: 1.6;
}

.site-footer__heading {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-twente-red);
    margin-bottom: 1.25rem;
}

.site-footer__col ul {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.site-footer__col li,
.site-footer__col a {
    color: rgba(248, 249, 250, 0.7);
    font-size: 0.9rem;
    transition: color var(--transition);
}

.site-footer__col a:hover {
    color: var(--color-twente-red);
}

.site-footer__bottom {
    border-top: 1px solid var(--color-filmgrain-gray);
    padding: 1.5rem 0;
    text-align: center;
}

.site-footer__bottom p {
    font-size: 0.8rem;
    color: rgba(248, 249, 250, 0.5);
}


/* ----------------------------------------------
   8. RESPONSIVE — Tablet & Mobiel
---------------------------------------------- */
@media (max-width: 1024px) {
    .nav-list { gap: 1.5rem; }
    .nav-link { font-size: 0.95rem; }
}

@media (max-width: 860px) {
    :root {
        --header-height: 64px;
    }

    .main-nav {
        grid-template-columns: 1fr auto 1fr;
        padding: 0 1rem;
    }

    .nav-list--left,
    .nav-list--right {
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background-color: var(--color-noir-black);
        border-top: 1px solid var(--color-filmgrain-gray);
        padding: 1rem 0;
        box-shadow: var(--shadow-header);
        max-height: 0;
        overflow: hidden;
        transition: max-height 400ms ease-in-out, padding var(--transition);
    }

    .site-header.is-open .nav-list--left,
    .site-header.is-open .nav-list--right {
        max-height: 80vh;
        overflow-y: auto;
    }

    .nav-link {
        display: block;
        padding: 1rem 1.5rem;
        text-align: center;
        font-size: 1.05rem;
    }

    .nav-link::after { display: none; }

    .dropdown-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        box-shadow: none;
        background-color: var(--color-filmgrain-soft);
        border: none;
        min-width: auto;
        padding: 0;
        border-radius: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--transition);
    }

    .dropdown-menu::before { display: none; }

    .nav-item.has-dropdown.is-active .dropdown-menu {
        max-height: 500px;
    }

    .dropdown-menu li a {
        justify-content: center;
        padding: 0.75rem;
    }

    .nav-toggle {
        display: flex;
        justify-self: end;
        grid-column: 3;
    }

    .site-header.is-open .nav-toggle span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    .site-header.is-open .nav-toggle span:nth-child(2) {
        opacity: 0;
    }
    .site-header.is-open .nav-toggle span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    .brand-logo__main { font-size: 1.4rem; }
    .brand-logo__sub  { font-size: 0.6rem; letter-spacing: 0.3em; }

    /* iOS staat 'background-attachment: fixed' niet altijd toe — fallback. */
    .parallax-section {
        background-attachment: scroll;
    }

    /* Footer stapelt twee kolommen breed op tablet */
    .site-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

@media (max-width: 480px) {
    .hero {
        min-height: 500px;
    }

    .content-block,
    .content-block--right,
    .content-block--centered {
        text-align: left;
        margin: 0;
    }

    .content-block--right .content-block__list,
    .content-block--right .content-block__list li {
        text-align: left;
        padding: 0.5rem 0 0.5rem 1.5rem;
    }

    .content-block--right .content-block__list li::before {
        left: 0;
        right: auto;
    }

    /* Footer wordt één kolom op mobiel */
    .site-footer__inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}


/* ----------------------------------------------
   9. PAGE TRANSITION — Mechanical Aperture
   Acht fysieke iris-bladen die als cameralens
   sluiten en openen. Eén stuurvariabele:
   --open-state (1 = open/vrij, 0 = dicht/zwart).

   WAAROM GEEN OPACITY OP DE OVERLAY:
   opacity op een parent maakt ALLE kinderen
   onzichtbaar, inclusief de bladen. De vorige
   versie had opacity:0 op de overlay → bladen
   waren altijd onzichtbaar tijdens de animatie
   → je zag alleen een zwarte flits. Opgelost
   door de overlay ALTIJD transparant te houden.
   Bladen bewegen over de pagina-inhoud = goed
   contrast, duidelijk zichtbaar.

   FOUC-fix: alleen de background-color van de
   overlay div wordt zwart gezet (niet opacity).
   Bladen staan in CLOSED positie op de inkomende
   pagina, dus ze dekken het scherm sowieso af.
   De zwarte bg is een extra vangnet.
   Zodra JS de klasse weghaalt: bg transparent,
   bladen beginnen hun openings-animatie.

   CYCLUS:
   IDLE → CLOSING(0.2s) → navigatie
   → INCOMING(pauze) → OPENING(0.2s) → IDLE
---------------------------------------------- */

/* Geen @property meer nodig: de iris animeert puur via transform,
   en transform is altijd vloeiend animeerbaar. --open-state
   schakelt hard 1↔0; de transition op het blad-transform doet de
   interpolatie. */

/* Container: vult het scherm, vangt geen klikken, blijft
   transparant. De zwarte dekking komt puur van de bladen. */
.aperture-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    overflow: hidden;          /* bladen niet buiten het scherm tonen */
    background: transparent;

    /* OPEN (rust): bladen volledig buiten beeld → pagina vrij. */
    --open-state: 1;
}

/* De slot-wrapper draagt alleen --i (0..7) en erft die door
   naar het blad. display:contents laat de wrapper zelf geen
   box vormen, zodat het blad t.o.v. de overlay positioneert. */
.aperture-overlay__slot {
    display: contents;
}

/* Elk blad = groot vierkant. De bovenrand (border-top) is de
   zichtbare, iets lichtere leading-edge. transform-origin in
   de top-linkerhoek valt exact op het schermmidden, zodat alle
   rotaties netjes om het midden draaien.

   transform (links → rechts):
     1. rotate(i*45deg)            → sector van dit blad
     2. translateY(open*78vmax)    → radiaal naar buiten (open)
                                      of leading-edge op midden (dicht)
     3. rotate(112deg)             → kantel rand tangentieel
   Bij --open-state:0 staat de rand exact op het midden →
   8 halfvlakken dekken samen volledig + symmetrisch af. */
.aperture-overlay__blade {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 220vmax;
    height: 220vmax;
    background-color: #0a0a0a;
    /* carbon-fiber textuur over het bladlichaam */
    background-image: repeating-linear-gradient(
        135deg,
        transparent 0, transparent 2px,
        rgba(150, 150, 150, 0.05) 2px,
        rgba(150, 150, 150, 0.05) 4px);
    border-top: 3px solid #2c2c2c;
    transform-origin: 0 0;
    transform:
        rotate(calc(var(--i) * 45deg))
        translateY(calc(var(--open-state) * 78vmax))
        rotate(112deg);
    transition: transform 0.2s cubic-bezier(0.76, 0, 0.24, 1);
    will-change: transform;
}

/* CLOSED: alle bladen draaien naar het midden → scherm volledig
   zwart. Gezet door JS (.is-closing) bij vertrek en door het
   inline head-script (html.aperture-incoming) bij aankomst. */
html.aperture-incoming .aperture-overlay,
.aperture-overlay.is-closing {
    --open-state: 0;
}


/* ----------------------------------------------
   10. ACCESSIBILITY — Reduced motion
---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .parallax-section {
        background-attachment: scroll;
    }

    /* Geen filmische aperture voor wie bewegingen vermijdt:
       overlay volledig verbergen; JS navigeert dan direct. */
    .aperture-overlay {
        display: none !important;
    }
}