/* ============================================
   Bureau — het podium van de homepage-sectie (#bureau)

   De statische staat (zonder JS, en de liggende terugval: het stille beeld
   naast de vijf regels, daaronder het raster) staat in main.css en geldt
   zolang .bureau--podium ontbreekt. Dit bestand regelt wat assets/js/bureau.js
   aanzet:

     .bureau--podium    het bureau vult het scherm: canvas of stil beeld, met
                        de regel onderin. Scrub, stil en de mobiele terugval.
     .bureau--scrub     geen reduced motion: lange sticky-scrub. Direct gezet,
                        zodat de hoogte er al staat (geen layout-sprong).
     .bureau--stil      reduced motion: het pand staat stil en is tikbaar; de
                        rondleiding speelt alleen op verzoek (.bureau__bediening).
     .bureau--terugval  geen WebGL, of de context is twee keer kwijt: het stille
                        beeld, met tikbare naamborden (.bureau__plek).
     .bureau--laadt     de bundle laadt (of de context komt terug): de still
                        met een kleine indicator.
     .bureau--3d        de scène heeft haar eerste frame getekend.

   Het scrub-deel loopt over .bureau__scrub, een wrapper die bureau.js om het
   sticky venster zet.
   @since 1.36.0 (podium, stil en terugval sinds 1.39.0)
   ============================================ */

.bureau {
    --bureau-scrub: 800vh; /* twaalf afdelingen, elk ~0.042 van de scrub */
    --bureau-achtergrond: #f3f1ec; /* = KLEUR.achtergrond van de maquette */
    --bureau-kop: 88px; /* vrije ruimte onder de sticky header */
    --bureau-staand: 390 / 844; /* het staande stille beeld */
}

/* hidden wint altijd binnen de sectie: bureau.js schakelt er knoppen, de
   tikbare plekken en het stille beeld mee, en die krijgen hieronder een display. */
.bureau [hidden] {
    display: none !important;
}

/* ── Podium ──────────────────────────────────────────────────────────── */

.bureau.bureau--podium {
    padding-top: 0; /* anders duwt de sectie-padding het venster omlaag */
}

.bureau__scrub {
    position: relative;
    height: var(--bureau-scrub);
}

.bureau.bureau--podium .bureau__sticky {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100svh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--bureau-achtergrond);
}

.bureau.bureau--scrub .bureau__sticky {
    position: sticky;
    top: 0;
}

.bureau.bureau--podium .bureau__sticky canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    touch-action: pan-y; /* verticaal vegen blijft scrollen */
}

.bureau.bureau--podium.bureau--3d:not(.bureau--laadt) .bureau__sticky canvas {
    opacity: 1; /* het dimmen aan het eind zet de scène zelf, inline */
}

.bureau.bureau--terugval .bureau__sticky canvas {
    display: none;
}

.bureau.bureau--stil.bureau--3d .bureau__sticky canvas {
    cursor: grab;
}

/* ── Het stille beeld: laadstaat en terugval ──────────────────────────── */

.bureau.bureau--podium .bureau__poster {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Liggend: het beeld in zijn geheel, boven de band van de captions. */
.bureau.bureau--podium .bureau__still {
    position: absolute;
    inset: 0;
}

.bureau.bureau--podium .bureau__still img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 9vh 4vw 22vh;
    box-sizing: border-box;
}

/* Staand: de still is gerenderd op 390x844 en heeft dezelfde opbouw als de
   scène (pand boven, ruimte voor de regel onder). Hij vult de breedte; is het
   scherm lager dan het beeld, dan valt er onderin een strook lege vloer af. */
@media (max-width: 768px) and (orientation: portrait) {
    .bureau.bureau--podium .bureau__still {
        inset: auto;
        top: var(--still-top, 0px);
        left: 50%;
        /* --still-top en --still-w zet bureau.js in de terugval: het pand in de
           band tussen header en slotregel. */
        width: var(--still-w, max(100%, calc(100svh * 390 / 844)));
        aspect-ratio: var(--bureau-staand);
        transform: translateX(-50%);
        transform-origin: 50% 40%;
    }

    .bureau.bureau--podium .bureau__still img {
        object-fit: cover;
        padding: 0;
    }
}

/* Zonder podium (geen JS) staat de staande still in de gewone kolom: daar
   alleen het pand, zonder de lege vloer erboven en de captionruimte eronder. */
@media (max-width: 768px) and (orientation: portrait) {
    .bureau:not(.bureau--podium) .bureau__still img {
        aspect-ratio: 390 / 530;
        object-fit: cover;
        object-position: 50% 32%;
    }
}

/* Terugval zonder reduced motion: een rustige pan en zoom over het pand. */
@media (prefers-reduced-motion: no-preference) {
    .bureau.bureau--terugval.bureau--podium .bureau__still {
        animation: bureau-pan 26s ease-in-out infinite alternate;
    }
}

@keyframes bureau-pan {
    from {
        transform: translateX(-50%) scale(1);
    }
    to {
        transform: translateX(-51.5%) translateY(-1.5%) scale(1.06);
    }
}

/* Laadindicator: klein, rustig, boven het beeld. */
.bureau__laden {
    display: none;
}

.bureau.bureau--podium.bureau--laadt .bureau__laden {
    position: absolute;
    top: var(--bureau-kop);
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.8rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--border);
    border-radius: 999px;
    white-space: nowrap;
}

.bureau__laden span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    animation: bureau-puls 1.4s ease-in-out infinite;
}

@keyframes bureau-puls {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 1; }
}

/* ── Tikbare naamborden op het stille beeld ───────────────────────────── */

.bureau:not(.bureau--terugval) .bureau__plekken {
    display: none;
}

.bureau.bureau--podium .bureau__plekken {
    position: absolute;
    inset: 0;
}

.bureau__plek {
    position: absolute;
    left: var(--x);
    top: var(--y);
    /* Iets ruimer dan het bord; niet hoger, want borden staan soms dicht onder elkaar. */
    width: max(calc(var(--w) + 4%), 44px);
    height: max(var(--h), 28px);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    transform: translate(-50%, -50%);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.bureau__plek::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(100% - 12px);
    height: 100%;
    border-radius: 6px;
    transform: translate(-50%, -50%);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.bureau__plek[aria-pressed="true"]::after {
    background: rgba(26, 107, 106, 0.22);
    box-shadow: 0 0 0 3px var(--accent);
}

.bureau__plek:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── Captions (zelfde patroon als .maquette__caption op /werk/) ───────── */

.bureau.bureau--podium .bureau__captions {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Zachte band onder de captions: leesbaar, ook als er een kamer achter staat. */
.bureau.bureau--podium .bureau__captions::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30vh;
    background: linear-gradient(to bottom, rgba(243, 241, 236, 0), rgba(243, 241, 236, 0.9) 55%);
}

/* Stil staan de knoppen onder de regel: staand (regel over het pand) loopt de
   band hoger op. Liggend staat de regel links naast het pand. */
@media (max-width: 768px) and (orientation: portrait) {
    .bureau.bureau--stil.bureau--3d .bureau__captions::before {
        height: 46vh;
        background: linear-gradient(to bottom, rgba(243, 241, 236, 0), rgba(243, 241, 236, 0.92) 42%);
    }
}

.bureau.bureau--podium .bureau__caption {
    position: absolute;
    bottom: var(--bureau-caption-onder, 8vh);
    left: 50%;
    width: min(90vw, 1120px);
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    transform: translate(-50%, 12px);
    transition: opacity 0.45s ease, transform 0.45s ease;
    pointer-events: none;
}

.bureau.bureau--podium .bureau__caption.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

/* Wie met Tab bij de CTA-knop komt, ziet zijn caption ook buiten zijn scrubvak. */
.bureau.bureau--podium .bureau__caption:focus-within {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.bureau.bureau--podium .bureau__caption .bureau__caption-number {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    max-width: 22ch;
}

.bureau.bureau--podium .bureau__caption .bureau__caption-label {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-top: 0.35rem;
    max-width: 60ch;
}

/* ── Rondleiding (stil): knoppen onder de regel ───────────────────────── */

.bureau.bureau--podium .bureau__bediening {
    position: absolute;
    left: 50%;
    bottom: max(16px, 3vh);
    width: min(90vw, 1120px);
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

/* Ruimte voor de knoppen: de regel schuift er een rij boven. */
.bureau.bureau--stil.bureau--3d {
    --bureau-caption-onder: calc(max(16px, 3vh) + 68px);
}

.bureau.bureau--podium .bureau__bediening {
    flex-wrap: nowrap;
}

.bureau__knop {
    min-height: 44px;
    padding-inline: 1.1rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.bureau__knop[data-rond="start"]::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent currentColor;
}

.bureau__knop:focus-visible,
.bureau__caption-cta:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.bureau__tip {
    line-height: 1.35;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.bureau--rondleiding .bureau__tip {
    display: none;
}

/* ── Gekozen afdeling: het kantoor in het raster licht mee ────────────── */

.bureau__kantoor.is-uitgelicht,
.bureau__kantoor:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.bureau__kantoor:focus:not(:focus-visible):not(.is-uitgelicht) {
    outline: none;
}

/* ── Diagnose (?bureau-debug=1) ───────────────────────────────────────── */

.bureau__debug {
    position: absolute;
    top: calc(var(--bureau-kop) + 40px); /* onder de laadindicator */
    left: 8px;
    z-index: 5;
    max-width: calc(100% - 16px);
    padding: 6px 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.45;
    white-space: pre;
    color: #fff;
    background: rgba(26, 29, 33, 0.82);
    border-radius: 6px;
    pointer-events: none;
}

.bureau:not(.bureau--podium) .bureau__debug {
    position: relative;
    top: auto;
    left: auto;
    display: block;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .bureau {
        --bureau-scrub: 640vh; /* kortere scrub op mobiel */
        --bureau-kop: 76px;
    }

    .bureau__tip {
        max-width: 12ch; /* naast de knop, in twee regels: de knoppenrij blijft één rij */
    }

    .bureau.bureau--podium .bureau__caption {
        bottom: var(--bureau-caption-onder, 6vh);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bureau .bureau__caption,
    .bureau__plek::after {
        transition: none;
    }

    .bureau__laden span {
        animation: none;
        opacity: 1;
    }
}