/* ----------------------------------------------------
   GRID & LAYOUT
---------------------------------------------------- */

.index-container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    z-index: 1;
	min-height: 37vh;
}

.index-container > div,
.index-container > a {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.index-container img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ----------------------------------------------------
   HEADER
---------------------------------------------------- */

.header-container {
    text-align: center;
}

.naamgroot {
    width: 40vw;
    height: auto;
}

/* ----------------------------------------------------
   ACHTERGROND
---------------------------------------------------- */

.handen-bg {
    position: absolute;
    top: 60%;
    left: 50%;

    /* vaste schaal, niet afhankelijk van schermbreedte */
    width: 1024px; /* kies jouw ideale vaste grootte */
    height: auto;

    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}

@media (max-width: 1000px) {
    .handen-bg {
        width: 400px;
    }
}


/* ----------------------------------------------------
   MIXED MEDIA & ENVELOPPE
---------------------------------------------------- */

.mixed-media {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* ----------------------------------------------------
   ILLUSTRATION + ANIMATIE
---------------------------------------------------- */

/* Enveloppe moet boven de illustratie liggen */
.enveloppe {
    position: relative;
	top: 100px;
    z-index: 5;
}

.enveloppe img {
	
    width: 300px;
    transform: rotate(100deg);
}

.enveloppe-container {
    position: relative; /* BELANGRIJK */
    min-height: 500px;
}

.illustration {
    position: absolute; /* nu is hij RELATIEF aan de container */
    top: 25%;
    left: 0;
    overflow: visible;
    z-index: 1;
}

.illustration img {
    max-width: 200px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1; /* achter de enveloppe */
    transform: translateX(30px) rotate(-80deg);
    transition: transform 1.2s ease-out;
}

/* ----------------------------------------------------
   BOOKS / FLIPBOOK
---------------------------------------------------- */

.books {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.flipbook {
    position: relative;
	left: 100px;
    width: 50%;
    max-width: 350px;
    aspect-ratio: 3 / 4;
    perspective: 2000px;
}

.flipbook img {
    width: 100%;
    height: auto;
}

.sheet {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s ease;
    transform-origin: left;
}

.sheet .front,
.sheet .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.sheet .back {
    transform: rotateY(180deg);
}

#sheet1 { z-index: 2; }
#sheet2 { z-index: 1; }

.sheet.flipped {
    transform: rotateY(-180deg);
}

/* ----------------------------------------------------
   INSTALLATIONS & LEEG
---------------------------------------------------- */

.installations img {
    max-width: 70%;
}

.leeg {
    /* lege cel */
}