/* jdb-cinematic-hero.css: cinematic scrollhero (widget jdb-cinematic-hero).
 *
 * Alles is gescoped op .jdb-cine. Twee standen:
 *  - Statisch (standaard, zonder JS en bij prefers-reduced-motion): één
 *    videoframe met paneel 1, daarna paneel 2 en 3 in de normale flow.
 *  - Live (.is-live, gezet door een inline script): lokale scrollsectie van
 *    --cine-len vh met een sticky viewport van 100dvh. JS zet per paneel
 *    --o (opacity) en .is-active (stagger van de kinderen).
 * Geen kleurfilters, gradients of overlays boven het beeld.
 */

.jdb-cine {
    /* Huisstijl (jdb-japandi.css): inkt op lichte beelden, papier op donkere. */
    --cine-navy: var(--mdb-ink, #2B2621);
    --cine-white: var(--mdb-paper, #FBF9F5);
    --cine-gutter: clamp(1rem, 5.5vw, 6.5rem);
    --cine-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --cine-header: 7.5rem;
    position: relative;
    isolation: isolate;
    width: 100%;
    color: var(--cine-navy);
    font-family: var(--jdb-font-display, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    background: var(--mdb-sand-1, #F5F0E8);
    overflow-x: clip;
}

.jdb-cine *,
.jdb-cine *::before,
.jdb-cine *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------- Media */

.jdb-cine__media {
    position: absolute;
    inset: 0 0 auto;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    z-index: 0;
}

.jdb-cine__video,
.jdb-cine__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

.jdb-cine__video::-webkit-media-controls,
.jdb-cine__intro::-webkit-media-controls { display: none !important; }

/* Intro-lus van de eerste video boven de scrollvideo; vervaagt zodra er gescrold wordt. */
.jdb-cine__intro {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    transition: opacity 0.6s ease, visibility 0s linear 0s;
}

.jdb-cine.is-scrubbing .jdb-cine__intro {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

/* Canvas pas zichtbaar na de eerste geslaagde paint (JS zet .is-canvas). */
.jdb-cine__canvas { opacity: 0; }
.jdb-cine.is-canvas .jdb-cine__canvas { opacity: 1; }
.jdb-cine.is-canvas .jdb-cine__video { visibility: hidden; }

/* ---------------------------------------------------------------- Panels */

.jdb-cine__panel {
    position: relative;
    z-index: 1;
    display: flex;
    padding: clamp(3.5rem, 9vh, 7rem) var(--cine-gutter);
}

.jdb-cine__inner { width: 100%; max-width: 46rem; }

.jdb-cine--ink { color: var(--cine-navy); }
.jdb-cine--light { color: var(--cine-white); }

/* Zachte schaduw op witte tekst houdt kleine regels leesbaar op wisselende frames. */
.jdb-cine--light .jdb-cine__eyebrow,
.jdb-cine--light .jdb-cine__title,
.jdb-cine--light .jdb-cine__sub { text-shadow: 0 1px 18px rgba(43, 38, 33, 0.38); }

/* Zachte papiergloed achter inkttekst: extra rust op drukke, warme frames. */
.jdb-cine--ink .jdb-cine__eyebrow,
.jdb-cine--ink .jdb-cine__title,
.jdb-cine--ink .jdb-cine__sub { text-shadow: 0 0 22px rgba(251, 249, 245, 0.6), 0 0 2px rgba(251, 249, 245, 0.35); }

.jdb-cine__title {
    margin: 0;
    font-family: inherit;
    font-weight: 300;
    letter-spacing: -0.025em;
    line-height: 1.04;
    color: inherit;
    text-wrap: balance;
    overflow-wrap: break-word;
}

.jdb-cine__title:focus { outline: none; }
.jdb-cine__title:focus-visible { outline: 2px solid currentColor; outline-offset: 0.3em; border-radius: 2px; }

.jdb-cine__title--xl { font-size: clamp(2.15rem, 1.2rem + 4.6vw, 5.75rem); }
.jdb-cine__title--lg { font-size: clamp(1.95rem, 1.15rem + 3.6vw, 4.6rem); }

.jdb-cine__mid { opacity: 0.72; }
.jdb-cine__soft { opacity: 0.5; }

.jdb-cine__sub {
    margin: clamp(1rem, 2.4vh, 1.6rem) 0 0;
    font-family: var(--jdb-font-body, inherit);
    font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.3rem);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    opacity: 0.85;
}

.jdb-cine__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 clamp(1rem, 2.4vh, 1.5rem);
    font-family: var(--jdb-font-body, inherit);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Bestaand merkteken, klein en in de tekstkleur. */
.jdb-cine__eyebrow .jdb-eyebrow__merk { width: 2.2rem; color: inherit; }

.jdb-cine__controls {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: clamp(1.6rem, 4vh, 2.8rem);
}

/* Ronde pijlknoppen: 48px touch target. */
.jdb-cine__round {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease, transform 0.5s var(--cine-ease);
}

.jdb-cine__round:hover { opacity: 1; transform: translateY(2px); }
.jdb-cine__round[data-cine-go="0"]:hover { transform: translateY(-2px); }
.jdb-cine--ink .jdb-cine__round:hover { background: var(--cine-navy); color: var(--cine-white); }
.jdb-cine--light .jdb-cine__round:hover { background: var(--cine-white); color: var(--cine-navy); }

.jdb-cine__round:focus-visible,
.jdb-cine__cta:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; opacity: 1; }

.jdb-cine__icon { display: block; }

/* Paneel 2: compacte balk met terug, voortgang en volgende. */
.jdb-cine__controls--bar { justify-content: center; gap: 0.75rem; }

.jdb-cine__progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--jdb-font-body, inherit);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
}

.jdb-cine__count-total { opacity: 0.55; }

.jdb-cine__track {
    position: relative;
    display: block;
    width: clamp(3.5rem, 8vw, 6rem);
    height: 2px;
    overflow: hidden;
}

/* Lege track op lage opacity, gevulde deel in de volle tekstkleur. */
.jdb-cine__track::before,
.jdb-cine__fill {
    position: absolute;
    inset: 0;
    background: currentColor;
}

.jdb-cine__track::before { content: ""; opacity: 0.25; }

.jdb-cine__fill {
    transform-origin: left center;
    transform: scaleX(var(--cine-p, 0));
}

/* CTA: massieve pil, contrast onafhankelijk van het videoframe. */
.jdb-cine__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 3rem;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    font-family: var(--jdb-font-body, inherit);
    font-size: 0.98rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: transform 0.5s var(--cine-ease), box-shadow 0.4s ease;
}

.jdb-cine--light .jdb-cine__cta { background: var(--cine-white); color: var(--cine-navy); }
.jdb-cine--ink .jdb-cine__cta { background: var(--cine-navy); color: var(--cine-white); }
.jdb-cine__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -14px rgba(43, 38, 33, 0.55); }
.jdb-cine__cta .jdb-icon { flex: none; }

/* ------------------------------------------------- Statisch (standaard) */

.jdb-cine:not(.is-live) .jdb-cine__panel--1 {
    min-height: 100vh;
    min-height: 100svh;
    align-items: flex-end;
    padding-top: calc(var(--cine-header) + 2rem);
}

.jdb-cine:not(.is-live) .jdb-cine__panel--2,
.jdb-cine:not(.is-live) .jdb-cine__panel--3 {
    background: var(--mdb-paper, #FBF9F5);
    color: var(--cine-navy);
    text-shadow: none;
}

.jdb-cine:not(.is-live) .jdb-cine__panel--2 { justify-content: center; text-align: center; }
.jdb-cine:not(.is-live) .jdb-cine__panel--3 { justify-content: flex-end; padding-top: 0; }
.jdb-cine:not(.is-live) .jdb-cine__panel--3 .jdb-cine__inner { max-width: 34rem; }
.jdb-cine:not(.is-live) .jdb-cine__panel--3 * { text-shadow: none; }
.jdb-cine:not(.is-live) .jdb-cine__panel--3 .jdb-cine__cta { background: var(--cine-navy); color: var(--cine-white); }
.jdb-cine:not(.is-live) .jdb-cine__panel--2 .jdb-cine__inner { margin-inline: auto; }

/* Statisch zijn er geen tussenstanden: alleen echte links/knoppen tonen. */
.jdb-cine:not(.is-live) .jdb-cine__progress { display: none; }

/* Zonder JavaScript werken de pijlknoppen niet; dan alleen tekst en CTA. */
.jdb-cine:not(.is-js) .jdb-cine__round { display: none; }

/* --------------------------------------------------------------- Live */

.jdb-cine.is-live {
    height: calc(var(--cine-len, 300) * 1vh);
    background: transparent;
}

.jdb-cine.is-live .jdb-cine__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.jdb-cine.is-live .jdb-cine__media { height: 100%; }

.jdb-cine.is-live .jdb-cine__panel {
    position: absolute;
    inset: 0;
    padding-top: calc(var(--cine-header) + 1.5rem);
    opacity: var(--o, 0);
    visibility: hidden;
}

.jdb-cine.is-live .jdb-cine__panel.is-shown { visibility: visible; }

/* Eerste paneel staat vóór de eerste JS-meting al in beeld. */
.jdb-cine.is-live:not(.is-ready) .jdb-cine__panel--1 { --o: 1; visibility: visible; }

.jdb-cine.is-live .jdb-cine__panel--1 { align-items: flex-end; }
.jdb-cine.is-live .jdb-cine__panel--1 .jdb-cine__inner { max-width: 52rem; }

.jdb-cine.is-live .jdb-cine__panel--2 { align-items: center; justify-content: center; text-align: center; }
.jdb-cine.is-live .jdb-cine__panel--2 .jdb-cine__inner { max-width: 50rem; }

.jdb-cine.is-live .jdb-cine__panel--3 { align-items: center; justify-content: flex-end; }
.jdb-cine.is-live .jdb-cine__panel--3 .jdb-cine__inner { max-width: 33rem; }

/* Stagger: kinderen komen gedoseerd binnen zodra het paneel actief wordt. */
@media (prefers-reduced-motion: no-preference) {
    .jdb-cine.is-live [data-cine-item] {
        opacity: 0;
        transform: translateY(24px);
        transition:
            opacity 0.8s var(--cine-ease),
            transform 0.8s var(--cine-ease);
    }

    .jdb-cine.is-live .is-active [data-cine-item] { opacity: 1; transform: none; }
    .jdb-cine.is-live .is-active [data-cine-item]:nth-child(2) { transition-delay: 0.09s; }
    .jdb-cine.is-live .is-active [data-cine-item]:nth-child(3) { transition-delay: 0.18s; }
    .jdb-cine.is-live .is-active [data-cine-item]:nth-child(4) { transition-delay: 0.27s; }

    /* Merkteken tekent opnieuw bij elk actief worden van paneel 3. */
    .jdb-cine.is-live .jdb-cine__panel:not(.is-active) .jdb-merk-svg--anim path {
        stroke-dashoffset: 1;
        opacity: 0;
        transition: none;
    }
}

/* ------------------------------------------------------------ Mobiel */

@media (max-width: 767px) {
    .jdb-cine { --cine-header: 6rem; }

    .jdb-cine.is-live { height: calc(var(--cine-len-m, 220) * 1vh); }

    .jdb-cine.is-live .jdb-cine__panel--1 { padding-bottom: clamp(3rem, 12vh, 6rem); }

    /* Rechts geplaatst paneel staat op smalle schermen bovenin, weg van het
       onderwerp onderin het frame (de header is dan al weggescrold). */
    .jdb-cine.is-live .jdb-cine__panel--3 { align-items: flex-start; justify-content: flex-start; padding-top: clamp(4.5rem, 16vh, 8rem); }

    .jdb-cine__controls--bar { gap: 0.5rem; }
    .jdb-cine__track { width: 3rem; }
}

@media (max-width: 360px) {
    .jdb-cine__title--xl { font-size: 2rem; }
    .jdb-cine__title--lg { font-size: 1.8rem; }
    .jdb-cine__cta { padding-inline: 1.25rem; }
}