/**
 * Yakup Stucadoors — verhaal. Donkere sectie in drie delen: kop met een
 * kernzin die oplicht, een beeldvenster en het verhaal met kerngetallen.
 *
 * Standaard (mobiel, reduced motion, geen JS) staat alles gestapeld en
 * direct leesbaar. Vanaf 1024px zet het script `.is-scrolly` op de sectie
 * en een voortgang --p (0–1) op het podium: dan opent het venster zich
 * tijdens het scrollen en schuiven de zijbeelden weg.
 */

.yk-verhaal {
    --yk-stagger: 70ms;
    --yk-v-text: var(--dc-canvas-text-muted);
    background: var(--dc-canvas-dark);
    color: var(--yk-v-text);
    isolation: isolate;
}

/* Fijne korrel, als een vers gestucte wand. */
.yk-verhaal::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.07;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.yk-verhaal .yk-eyebrow {
    color: var(--dc-primary-light);
}

/* ------------------------------------------------------------- intro */

.yk-verhaal__intro {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(28px, 6vw, 96px);
    align-items: start;
}

.yk-verhaal__head {
    display: grid;
    gap: 18px;
}

.yk-verhaal .yk-verhaal__title {
    font-size: var(--dc-text-4xl);
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: #fff;
    max-width: 12ch;
}

.yk-verhaal__statement {
    font-family: var(--dc-font-heading);
    font-size: var(--dc-text-2xl);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #fff;
    padding-top: clamp(0px, 2vw, 32px);
}

/* Elk woord licht op naarmate --p (gezet door het script) oploopt. Zonder
   script blijft --p 1 en staat de zin volledig in beeld. */
.yk-verhaal__word {
    opacity: clamp(0.2, calc(var(--p, 1) * (var(--n) + 3) - var(--w)), 1);
    transition: opacity 0.2s linear;
}

/* ------------------------------------------------------------- podium */

.yk-verhaal__stage {
    margin-top: clamp(48px, 8vw, 112px);
}

.yk-verhaal__sticky {
    width: 100%;
    max-width: calc(var(--dc-max) + 2 * var(--dc-gutter));
    margin-inline: auto;
    padding-inline: var(--dc-gutter);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "window window"
        "left right";
    gap: clamp(12px, 2vw, 24px);
}

.yk-verhaal__window {
    grid-area: window;
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3;
    border-radius: var(--dc-radius-2xl);
    overflow: hidden;
    background: var(--dc-canvas-medium);
}

.yk-verhaal__frame {
    position: absolute;
    inset: 0;
}

.yk-verhaal .yk-verhaal__media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: 70% 60%;
}

/* Langzame zoom op een stilstaand hoofdbeeld. */
.yk-verhaal img.yk-verhaal__media {
    animation: yk-verhaal-drift 22s ease-in-out infinite alternate;
}

@keyframes yk-verhaal-drift {
    from { transform: scale(1); }
    to   { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
}

/* Verloop onder in het beeld, zodat de kernzin altijd leesbaar is. */
.yk-verhaal__window::after {
    content: "";
    position: absolute;
    inset: 40% 0 0;
    background: linear-gradient(to top, rgba(var(--dc-title-rgb), 0.82), rgba(var(--dc-title-rgb), 0));
    pointer-events: none;
}

.yk-verhaal__quote {
    position: absolute;
    z-index: 1;
    inset: auto clamp(20px, 4vw, 56px) clamp(20px, 4vw, 48px);
    max-width: 22ch;
    font-family: var(--dc-font-heading);
    font-size: var(--dc-text-3xl);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
    text-wrap: balance;
}

.yk-verhaal__toggle {
    position: absolute;
    z-index: 2;
    top: clamp(14px, 2vw, 24px);
    right: clamp(14px, 2vw, 24px);
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--dc-radius-full);
    background: rgba(var(--dc-title-rgb), 0.45);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background var(--dc-duration-normal) ease-out;
}

.yk-verhaal__toggle svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.yk-verhaal__icon-play {
    display: none;
    fill: currentColor;
}

.yk-verhaal__toggle.is-paused .yk-verhaal__icon-play {
    display: block;
}

.yk-verhaal__toggle.is-paused .yk-verhaal__icon-pause {
    display: none;
}

@media (hover: hover) {
    .yk-verhaal__toggle:hover {
        background: rgba(var(--dc-title-rgb), 0.75);
    }
}

.yk-verhaal__side {
    margin: 0;
    aspect-ratio: 3 / 4;
    border-radius: var(--dc-radius-xl);
    overflow: hidden;
    background: var(--dc-canvas-medium);
}

.yk-verhaal__side--left {
    grid-area: left;
}

.yk-verhaal__side--right {
    grid-area: right;
}

.yk-verhaal .yk-verhaal__side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ----------------------------------------------------- verhaal + getallen */

.yk-verhaal__body {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(40px, 7vw, 112px);
    align-items: start;
    margin-top: clamp(48px, 8vw, 112px);
}

.yk-verhaal__story {
    display: grid;
    gap: 20px;
    font-size: var(--dc-text-lg);
    max-width: 60ch;
}

.yk-verhaal__story p:first-child {
    color: var(--dc-canvas-text);
}

.yk-verhaal__facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
}

.yk-verhaal__fact {
    display: grid;
    grid-template-columns: minmax(3ch, auto) minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    padding-block: clamp(16px, 2vw, 24px);
    border-top: 1px solid var(--dc-canvas-border);
}

.yk-verhaal__fact:last-child {
    border-bottom: 1px solid var(--dc-canvas-border);
}

.yk-verhaal__value {
    font-family: var(--dc-font-heading);
    font-size: var(--dc-text-5xl);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--dc-primary);
    font-variant-numeric: tabular-nums;
}

.yk-verhaal__label {
    font-size: var(--dc-text-base);
    line-height: 1.45;
    color: var(--dc-canvas-text);
}

/* ---------------------------------------------------------------- link */

.yk-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-weight: 600;
    color: var(--dc-title);
    text-decoration: none;
    border-bottom: 2px solid var(--dc-primary);
    justify-self: start;
}

.yk-verhaal .yk-link {
    color: #fff;
}

.yk-link__arrow {
    width: 18px;
    height: 18px;
    transition: transform var(--dc-duration-normal) ease-out;
}

@media (hover: hover) {
    .yk-link:hover .yk-link__arrow {
        transform: translateX(6px);
    }
}

/* ------------------------------------------- scrollmodus (vanaf 1024px)

   Het podium is drie schermhoogtes lang; de binnenkant blijft vastgeplakt
   staan terwijl --p van 0 naar 1 loopt. Het venster begint als kaart in
   het midden en opent zich tot schermvullend, de zijbeelden wijken uit
   naar buiten en de kernzin schuift omhoog in beeld. */

.yk-verhaal.is-scrolly .yk-verhaal__stage {
    --p: 0;
    --e: calc(1 - (1 - var(--p)) * (1 - var(--p)));
    height: 260vh;
    margin-top: clamp(24px, 4vw, 64px);
}

.yk-verhaal.is-scrolly .yk-verhaal__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    max-width: none;
    padding: 0;
    display: block;
    overflow: hidden;
}

.yk-verhaal.is-scrolly .yk-verhaal__window {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    border-radius: 0;
    clip-path: inset(
        calc((1 - var(--e)) * 16vh)
        calc((1 - var(--e)) * 31vw)
        round calc((1 - var(--e)) * 28px + 0px)
    );
    will-change: clip-path;
}

.yk-verhaal.is-scrolly .yk-verhaal__media {
    animation: none;
    transform: scale(calc(1.12 - var(--e) * 0.12));
    will-change: transform;
}

.yk-verhaal.is-scrolly .yk-verhaal__window::after {
    opacity: clamp(0, calc((var(--p) - 0.45) * 3), 1);
}

.yk-verhaal.is-scrolly .yk-verhaal__quote {
    inset: auto var(--dc-gutter) clamp(48px, 9vh, 96px);
    max-width: 18ch;
    font-size: var(--dc-text-5xl);
    line-height: 1;
    opacity: clamp(0, calc((var(--p) - 0.55) * 4), 1);
    transform: translate3d(0, calc((1 - clamp(0, calc((var(--p) - 0.55) * 4), 1)) * 40px), 0);
}

.yk-verhaal.is-scrolly .yk-verhaal__toggle {
    top: auto;
    right: var(--dc-gutter);
    bottom: clamp(48px, 9vh, 96px);
}

.yk-verhaal.is-scrolly .yk-verhaal__side {
    position: absolute;
    z-index: 1;
    top: 50%;
    width: clamp(200px, 21vw, 320px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    will-change: transform, opacity;
}

.yk-verhaal.is-scrolly .yk-verhaal__side--left {
    left: max(var(--dc-gutter), 5vw);
    transform:
        translate3d(calc(var(--e) * -70vw), calc(-62% - var(--p) * 22vh), 0)
        rotate(calc(-3deg - var(--p) * 6deg));
}

.yk-verhaal.is-scrolly .yk-verhaal__side--right {
    right: max(var(--dc-gutter), 5vw);
    transform:
        translate3d(calc(var(--e) * 70vw), calc(-38% + var(--p) * 22vh), 0)
        rotate(calc(3deg + var(--p) * 6deg));
}

/* ------------------------------------------------------------ smal */

@media (max-width: 900px) {
    .yk-verhaal__intro,
    .yk-verhaal__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .yk-verhaal__statement {
        padding-top: 0;
    }
}

@media (max-width: 480px) {
    .yk-verhaal__window {
        aspect-ratio: 4 / 5;
    }

    .yk-verhaal__fact {
        gap: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yk-verhaal img.yk-verhaal__media {
        animation: none;
    }
}