body {
  margin: 0;
    padding: 0;
    height: 100%;
    /* background: #111; */
    overflow: hidden;
    color: black !important;
}

/* .index-container {
    background-color: grey;
    width: 100vw;
    height: 100vh;
} */

.index-walls-container {
     position: relative;
    width: 100vw;
    height: 100vh;
    perspective: 900px;
    overflow: hidden;
}

.wall {
    position: absolute;
  }

  .left {
    left: 0;
    width: var(--side);
    height: 100%;
    transform: rotateY(35deg);
    transform-origin: right;

    background: rgb(25, 25, 25);
    /* background-color: #1f0c07;
    background-image: url(../images/textures/brick-wall.png); */
  }

  .right {
    right: 0;   
    width: var(--side);
    height: 100%;
    transform: rotateY(-35deg);
    transform-origin: left;

    background: rgb(25, 25, 25);
    /* background-color: #1f0c07;
    background-image: url(../images/textures/brick-wall.png); */
  }

.top {
  position: absolute;
  top: 0;
  width: 100%;
  height: var(--top);

  transform: rotateX(-35deg);
  transform-origin: bottom;

  background: rgb(25, 25, 25);

  clip-path: polygon(
    29px 0%,                        /* top left iets naar binnen */
    calc(100% - 29px) 0%,          /* top right iets naar binnen */
    calc(100% - var(--side)) 100%,
    var(--side) 100%
  );
}

.bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: var(--top);

  background: #BA8C63;

  /* 👇 THIS IS THE KEY */
  clip-path: polygon(
    0% 100%,   /* bottom left */
    100% 100%, /* bottom right */
    calc(100% - var(--side)) 0%, /* top right (aligned to line) */
    var(--side) 0% /* top left (aligned to line) */
  );
}

  .line {
  position: absolute;
  height: 8px;
  background: rgb(5, 5, 5);
  transform-origin: left center;
}

.index-backwall-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    width: var(--contentW);
    height: var(--contentH);

    border: 8px solid rgb(0, 0, 0); 

    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #321c1c;
}

.index-title {
    position: absolute;
    top: 15%;
    left: 12%;

    border: 8px solid black;
    border-radius: 20px;
    width: 10%;
    height: 60%;
    background-color: rgb(212, 212, 212);
    
    display: flex;
    justify-content: center; 
    align-items: center; 
    writing-mode: vertical-lr;
    text-orientation: upright;

    font-size: 1.5vh;
    overflow: hidden;
}

.index-title p {
    margin: 20%;
}


.index-title-feet {
    position: absolute;
    top: 24.5%;
    left: 22%;

    border: 18px solid black;
    border-left: none;
    border-right: none;
    width: 3%;
    height: 35%;
}

.index-rolls-container {
    position: absolute;
    top: 11%;
    right: 15%;

    background: rgb(17, 29, 17);
    border: 11px solid black;
    border-radius: 20px;
    width: 60%;
    height: 70%;
}

.index-rol1 {
    position: absolute;
    top: 15%;
    left: 26%;
    width: calc(50% / 3);
    height: 52%;
    
    
    overflow: hidden;
    background: black;
    border-radius: 4px; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.index-rol1::before {
    content: '';
    position: absolute;
    width: 200%; 
    height: 200%;
    background: conic-gradient(
        transparent 0deg, 
        transparent 280deg, 
        rgb(0, 60, 255) 340deg, 
        rgb(0, 60, 255)350deg, 
        rgb(0, 60, 255) 360deg
    );
    animation: fastRotate2 0.6s linear infinite;
}

.index-rol1::after {
    content: '';
    position: absolute;
    inset: 8px; 
    background: rgb(212, 212, 212);
    border-radius: 2px;
    z-index: 1;
}

@keyframes fastRotate2 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.index-rol1 > * {
    position: relative;
    display: flex;
    z-index: 2;
}


.index-rol2 {
    position: absolute;
    top: 15%;
    left: 45.5%;
    width: calc(50% / 3);
    height: 52%;
    
    
    overflow: hidden;
    background: black;
    border-radius: 4px; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.index-rol2::before {
    content: '';
    position: absolute;
    width: 200%; 
    height: 200%;
    background: conic-gradient(
        transparent 0deg, 
        transparent 280deg, 
        rgb(1, 255, 1) 340deg, 
        rgb(0, 183, 0) 350deg, 
        rgb(0, 255, 0) 360deg
    );
    animation: fastRotate2 0.6s linear infinite;
}

.index-rol2::after {
    content: '';
    position: absolute;
    inset: 8px; 
    background: rgb(212, 212, 212);
    border-radius: 2px;
    z-index: 1;
}

@keyframes fastRotate2 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.index-rol2 > * {
    position: relative;
    display: flex;
    z-index: 2;
}


.index-rol3 {
    position: absolute;
    top: 15%;
    left: 65%;
    width: calc(50% / 3);
    height: 52%;
    
    
    overflow: hidden;
    background: black;
    border-radius: 4px; 
    display: flex;
    justify-content: center;
    align-items: center;

}

.index-rol3::before {
    content: '';
    position: absolute;
    width: 200%; 
    height: 200%;
    background: conic-gradient(
        transparent 0deg, 
        transparent 280deg, 
        #ff0000 340deg, 
        #ff6666 350deg, 
        #ff0000 360deg
    );
    animation: fastRotate3 0.6s linear infinite;
}

.index-rol3::after {
    content: '';
    position: absolute;
    inset: 8px; 
    background: rgb(212, 212, 212);
    border-radius: 2px;
    z-index: 1;
}

@keyframes fastRotate3 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


.index-rol3 > * {
    position: relative;
    display: flex;
    z-index: 2;
}

.index-credits {
    position: absolute;
    top: 71%;
    left: 26%;

    background-color:rgb(212, 212, 212);
    border: 4px solid black;
    width: 25%;
    height: 6%;

    display: flex;
    justify-content: center; 
    align-items: center;  
}

.index-credits p {
    margin: 0;
    font-size: clamp(0.1vw, 1.4vw, 20vw);
    white-space: nowrap;
}

.index-player {
    position: absolute;
    top: 71%;
    right: 18.5%;

    background-color: rgb(212, 212, 212);
    border: 4px solid black;
    width: 25%;
    height: 6%;
    
    display: flex;
    justify-content: center; 
    align-items: center;  
}

.index-player .btn {
   display: block;
    margin: auto;
}

.index-player p {
    margin: 0;
    font-size: clamp(0.1vw, 1.4vw, 20vw);
    white-space: nowrap;
}

.lever-holder {
    position: absolute;
    top: 63.2%;
    right: 6.3%;
    rotate: 90deg;

    background-color:rgb(212, 212, 212);
    border: 4px solid black;
    border-bottom: none;
    width: 10%;
    height: 13%;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.lever-container {
    position: absolute;
    top: 33%;
    right: 6%;
    width: 10%;
    height: 38%;

    display: flex;
    justify-content: center;

    perspective: 900px;
    cursor: pointer;
    rotate: 180deg;
}

/* Pivot punt boven */
.lever {
    position: relative;
    width: 100%;
    height: 100%;

    transform-origin: top center;
    transform-style: preserve-3d;
}

/* Stang */
.lever-rod {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    width: 10%;
    height: 80%;

    background: linear-gradient(to right, #222, #777, #222);
    border-radius: 10px;
}

/* Knop */
.lever-knob {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translateX(-50%);

    width: 60%;
    height: 30%;
    border-radius: 50%;

    background: radial-gradient(circle at 30% 30%, #ab4545, #613636);
    border: 6px solid #222;

    box-shadow:
        inset -6px -8px 12px rgba(0,0,0,0.6),
        inset 4px 4px 10px rgba(255,255,255,0.3),
        0 10px 20px rgba(0,0,0,0.7);
}

/* 🔥 KEY: echte pull animatie */
@keyframes leverPullReal {
    0% {
        transform: rotateX(0deg);
    }
    40% {
        transform: rotateX(75deg); /* volledig naar beneden */
    }
    55% {
        transform: rotateX(65deg); /* bounce */
    }
    70% {
        transform: rotateX(72deg);
    }
    100% {
        transform: rotateX(0deg); /* terug */
    }
}

.lever-animate {
    animation: leverPullReal 0.7s cubic-bezier(.3,1.5,.5,1);
}

.index-bottom-container {
    position: absolute;
    top: 83.8%;
    right: 14%;

    border: 12px solid black;
    background: rgb(17, 29, 17);
    border-top: none;
    border-bottom: none;
    width: 62%;
    height: 16.2%;
}


.index-lights {
    position: absolute;
    top: 80.8%;
    right: 14%;

    border: 12px solid black;
    border-radius: 16px 16px 0 0;
    background: black;
    border-top: none;
    border-bottom: none;
    width: 62%;
    height: 3%;
}