/* DVO Kruisvouw Folder */

/* Scroll-container: geeft de scrollruimte voor de scrub-animatie */
.dvo-folder-scroll {
    position: relative;
    height: 250vh; /* scroll-zone: 1.5x vh voor de animatie + ruimte erboven/onder */
}

/* Sticky houder: de folder blijft in beeld terwijl je door de scroll-zone scrolt */
.dvo-folder-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dvo-folder-wrap {
    --s: min(90vw, 320px);
    position: relative;
    width: calc(var(--s) * 3);
    height: calc(var(--s) * 3);
    perspective: 1200px;
}

.dvo-panel {
    position: absolute;
    width: var(--s);
    height: var(--s);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    overflow: hidden;
}

.dvo-panel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    user-select: none;
}

.dvo-panel a.dvo-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    cursor: pointer;
}

.dvo-panel a.dvo-link:hover {
    background: rgba(255,255,255,0.08);
}

.dvo-mirror  { position: absolute; inset: 0; transform: scaleX(-1); }
.dvo-mirrorY { position: absolute; inset: 0; transform: scaleY(-1); }

/* Kruisposities */
.dvo-pc { left: var(--s);          top: var(--s); }
.dvo-pl { left: 0;                 top: var(--s); }
.dvo-pt { left: var(--s);          top: 0; }
.dvo-pr { left: calc(var(--s)*2);  top: var(--s); }
.dvo-pb { left: var(--s);          top: calc(var(--s)*2); }

/* Gevouwen panelen clippen */
[data-panel="oT"],
[data-panel="oR"],
[data-panel="oB"],
[data-panel="vk"] {
    clip-path: inset(0);
}

@media (max-width: 600px) {
    .dvo-folder-wrap { --s: 30vw; }
}