@font-face {
  font-family: 'DalekPinpoint';
  src: url('../assets/DalekPinpointBold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  --item-width: 12rem;
  --item-height: calc(var(--item-width) * 0.8);
  --bgColor: calc(360 / sibling-count() * sibling-index());
  --z-index1: 3;
  --z-index2: 4;
  --z-index3: 2;
  --z-index4: 1;

  --pillar-color: #52421E;
  --text-color: #C4AB73;
  --background-color: #E5CD98;
  --greek-font: 'DalekPinpoint', serif;
}

body {
  height: 200dvh;
  background-color: var(--background-color);
  overflow-x: clip;
  timeline-scope: --horizontal-scroll;

  &::-webkit-scrollbar {
    display: none;
  }
}

section {
  position: fixed;
  display: flex;
  width: 100%;
  justify-content: center;
  padding-top: 10rem;
}

h1,
h2 {
  font-family: var(--greek-font);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;

}

h1 {
  padding-top: 2rem;
  font-size: clamp(3rem, 0.297rem + 11.0891vw, 10rem);
  text-shadow: 8px 8px 1px rgba(60, 0, 30, 0.25);
  -webkit-text-stroke-width: 2px;
  background-color: #ffffff;
  -webkit-text-stroke-color: #5c4617;
  text-align: center;
  filter: drop-shadow(5px 5px 40px #423e03);
}

h2 {
  font-size: 2rem;
  background-color: var(--text-color);
  text-shadow: 1px 2px 1px rgba(255, 238, 142, 0.25);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #C4AB73;
}

h1::after {
  color: red;
}

main {
  position: fixed;
  top: 0;
  left: 0;

  perspective: 800px;

  width: 100dvw;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

main * {
  transform-style: preserve-3d;
}

.vertical-scroll {
  display: grid;
  transform-style: preserve-3d;
  animation: --grow-progress linear forwards, --moveup linear forwards;
  animation-timeline: scroll();
  animation-range-start: 0dvh, 20dvh;
  animation-range-end: 20dvh, 60dvh;
}

main ul {
  justify-content: center;
  align-items: center;
  display: grid;
  list-style: none;
  grid-row: 1;
  grid-column: 1;

  transform-style: preserve-3d;
  /* box-shadow: 1px 1px 5px #C4AB73; */


}

.box {
  background: green;
}

.fake-scroller {
  grid-row: 1;
  grid-column: 1;
  z-index: 10;
  position: relative;
  overflow: scroll;
  max-width: 100vw;
  height: 100%;
  scroll-timeline-axis: inline;

  .inner {
    width: 200vw;
    height: 100%;
  }

  &::-webkit-scrollbar {
    display: none;
  }

}

.horizontal-scroll {
  animation-range: cover 0 cover 100%;
  animation-name: rotate;

}

main li {
  grid-area: 1/1;
  width: var(--item-width);
  height: var(--item-height);
  background-color: var(--pillar-color);
  transform-style: preserve-3d;
  /* background: url('../assets/test_cassie.png'); */
  --item-angle: calc(360deg / sibling-count() * sibling-index());

  transform:
    rotateY(var(--item-angle)) translateZ(calc(2 * var(--item-width)))
}

main li button {
  mix-blend-mode: luminosity;
}


@keyframes --grow-progress {
  0% {

    transform: translateZ(-50em) translateY(0);
    --z-index1: 3;
    --z-index2: 4;
    --z-index3: 2;
    --z-index4: 1;
  }

  100% {
    --z-index1: 4;
    --z-index2: 3;
    --z-index3: 2;
    --z-index4: 1;
    transform: translateZ(0em) translateY(35vh);
  }
}

@keyframes --shrink-progress {
  from {
    transform: translateZ(0em) translateY(-70vh);
  }

  to {
    transform: translateZ(-50em) translateY(0);
  }
}

@keyframes --moveup {

  0% {
    --z-index1: 4;
    --z-index2: 3;
    --z-index3: 2;
    --z-index4: 1;
    transform: translateY(35vh)
  }

  5%,
  25% {
    --z-index1: 3;
    --z-index2: 4;
    --z-index3: 2;
    --z-index4: 1;
    transform: translateY(15vh)
  }

  30%,
  50% {
    --z-index1: 1;
    --z-index2: 2;
    --z-index3: 4;
    --z-index4: 3;
    transform: translateY(-5vh);

  }

  55%,
  75% {
    --z-index1: 1;
    --z-index2: 2;
    --z-index3: 3;
    --z-index4: 4;
    transform: translateY(-25vh);

  }

  80%,
  95% {
    --z-index1: 1;
    --z-index2: 2;
    --z-index3: 3;
    --z-index4: 4;
    transform: translateY(-25vh);

  }

  100% {
    --z-index1: 1;
    --z-index2: 2;
    --z-index3: 3;
    --z-index4: 4;
    transform: translateY(-25vh);

  }

}

@keyframes --background {
  from {
    transform: translateZ(-50em);
  }

  to {
    transform: translateZ(-50em);
  }
}

@keyframes rotate {
  from {
    transform: rotateY(0deg);
  }

  to {
    transform: rotateY(360deg);
  }
}

.vertical-scroll:nth-child(2) .fake-scroller {
  scroll-timeline: --horizontal-scroll-1 inline;
}

.vertical-scroll:nth-child(3) .fake-scroller {
  scroll-timeline: --horizontal-scroll-2 inline;
}

.vertical-scroll:nth-child(4) .fake-scroller {
  scroll-timeline: --horizontal-scroll-3 inline;
}

.vertical-scroll:nth-child(5) .fake-scroller {
  scroll-timeline: --horizontal-scroll-3 inline;
}

.vertical-scroll:nth-of-type(1) {
  z-index: var(--z-index1);
}

.vertical-scroll:nth-of-type(2) {
  z-index: var(--z-index2);
}

.vertical-scroll:nth-of-type(3) {
  z-index: var(--z-index3);
}

.vertical-scroll:nth-of-type(4) {
  z-index: var(--z-index4);
}

button {
  width: 100%;
  height: 100%;
}

button:hover {
  color: green;
  background-color: green;
}

.PillarImage {
  width: 100%;
  height: 100%;
}

/* button {
anchor-name: --my-anchor;
}
*/


.scene {
  position: fixed;
  width: 100dvw;
  height: 100dvh;
  transform-style: preserve-3d;
  perspective: 800px;

  ul {
    position: absolute;
    display: grid;
    inset: 0;
    background-color: #ff03;
    transform-style: preserve-3d;

    li {
      grid-area: 1/1;
      border: 5px solid  var(--pillar-color );
    }

    .vloer,
    .linkermuur,
    .rechtermuur,
    .achtermuur,
    .plafond {
      background-image: url(../assets/achtergrondmuur.jpg);
    }

    .vloer {
      width: 100dvw;
      height: 50vmin;
      align-self: end;
      transform-origin: bottom;
      rotate: x 90deg;
    }

    .linkermuur {
      width: 50vmin;
      height: 100dvh;
      justify-self: start;
      transform-origin: left;
      rotate: y 90deg;
    }

    .rechtermuur {
      width: 50vmin;
      height: 100dvh;
      justify-self: end;
      transform-origin: right;
      rotate: y -90deg;
    }

    .achtermuur {
      width: 100dvw;
      height: 100dvh;
      translate: 0 0 -50vmin;

    }

    .plafond {
      background-color: aqua;
      width: 100dvw;
      height: 50vmin;
      align-self: start;
      transform-origin: top;
      rotate: x -90deg;
    }
  }
}

.InformationPopOver {
  position-area: center;
  position-anchor: --my-anchor;
  background-color: #E5CD98;
  margin: 0;
  width: 60vw;
  max-width: 500px;
  border: none;
  border-radius: 1rem;

  &:popover-open {
    @starting-style {
      &:popover-open {
        transform: scale(1);
        opacity: 0;

      }
    }

    transform: scale(1.1);
    opacity: 1;
  }

  transform: scale(1);
  opacity: 0;
  transition: transform 0.5s,
  opacity 0.5s,
  display 0.5s;
  transition-behavior: allow-discrete;
}

#popover-container {
  position: fixed;
  left: 50%;
  top: 50%;
  background-color: red;
  anchor-name: --my-anchor;

}

.InformationPopOver img {
  width: 100%;
  aspect-ratio: 1;
}

.popover-tags {
  display: block;
  gap: 1rem;
  font-family: var(--greek-font);

}

.popover-tag-styling {
  display: inline;
  color: var(--background-color);
  background-color: var(--text-color);
  padding: .3rem 1rem;
  border-radius: 500rem;
}

.InformationPopOver::backdrop {
  background: rgba(43, 29, 0, 0.737);
}

.popover-text {
  padding: 1rem 1rem;
  display: flex;
  gap: 1rem;
  flex-direction: column;
  color: var(--text-color);

}



/* <img src="${imageURL}" alt="${women.name}">
<div class="popover-text">
<h2>${women.name}</h2>
<div class="popover-tags">
    <p class="popover-tag-styling">${women.period}</p>
    <p class="popover-tag-styling">${women.country_code}</p>
</div> */


.filler img {
  width: 100%;
  height: 100%;
  mix-blend-mode: luminosity;
}

@media (> 800px)