*, ::before, ::after {
    box-sizing: border-box;
}

body {
  position: relative;
  background-image: linear-gradient(#add8e6 12%, #8DF9D7 24%, #86F2EA 36%, #9EF2F5 48%, #FECBDC 64%, #FECBB8 80%, #FFAE9D 92%, #FFB7D6 100%);
  background-color: rgba(255,255,255,0.3);
  background-blend-mode: lighten;
  background-size: 100% 800%;
  background-position: 0% 0%;
  animation: 8s cubic-bezier(0.2, 0, 0.58, 1.0) infinite alternate gradient-animation;
  overflow-x: hidden;
  padding: 0 0 200px;
  width: 100%;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 0%;
  }
  
  100% {
    background-position: 0% 100%;
  }
}


.judson-regular {
  font-family: "Judson", serif;
  font-weight: 400;
  font-style: normal;
}

.judson-bold {
  font-family: "Judson", serif;
  font-weight: 700;
  font-style: normal;
}

.judson-regular-italic {
  font-family: "Judson", serif;
  font-weight: 400;
  font-style: italic;
}


.title-wrapper {
  display: block;
  margin: 0 auto;
  text-align: center;
}

@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.title {
  position: relative;
  display: block;
  color: white;
  font-size: 96px;
  white-space: nowrap;
  opacity: 0;
  animation: .3s ease-in-out appear forwards;
}

.title-reflection {
  position: absolute;
  top: 50%;
  left: 50%;
  mix-blend-mode: soft-light;
  transform: translate(-50%, -50%) scale(calc(1.0 + var(--index) * .05));
  white-space: nowrap;
  text-shadow: 10px 10px rgba(0,0,0, .3);
  opacity: 0;
  animation: .3s ease-in-out appear forwards;
  animation-delay: calc(var(--index) * .03)
}

.word-0 {
  color: #163d4b;
}

.title-reflection-1, .word-1 {
  color: #8DF9D7;
}

.title-reflection-2, .word-2 {
  color: #86F2EA;
}

.title-reflection-3, .word-3 {
  color: #9EF2F5;
}

.title-reflection-4, .word-4 {
  color: #FECBDC;
}

.title-reflection-5, .word-5 {
  color: #FECBB8;
}

.title-reflection-6, .word-6 {
  color: #FFAE9D;
}

.title-reflection-7, .word-7 {
  color: #FFB7D6;
}

.infinity {
  display: flex;
  width: 100%;
  height: 100vh;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  /*gap: 5%;*/
}

.vortex {
  width: calc(50%);
  height: 80%;
  text-align: center;
  /*overflow: hidden;*/
  position: relative;
}

.vortex .slider {
  position: absolute;
  width: calc(50% / var(--quantity) * 0.5);
  aspect-ratio: 1/1;
  /*height: 250px;*/
  top: 35%;
  left: 50%;
  transform-style: preserve-3d;
  transform: perspective(1000px);
  animation: autoRun 20s linear infinite normal;
}

.vortex:nth-of-type(2) .slider {
  animation-direction: reverse;
}

.vortex .slider:hover {
  /*animation-play-state: paused;*/
  /*animation-direction: reverse;*/
  cursor: pointer;
}


@keyframes autoRun {
  from {
    transform: 
      perspective(1000px)
      rotateX(-35deg)
      rotateY(0deg);
      translate(-50%, -50%);
  } to {
    transform: 
      perspective(1000px) 
      rotateX(-35deg) 
      rotateY(360deg);
      translate(-50%, -50%);
  }
}



.vortex .slider .item {
  position: absolute;
  inset: 0 0 0 0;
  transform:
    rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
    translateZ(35vh);
}

.mirror {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 25vh;
  background-color: rgba(200, 248, 257, 0.5);
  border: 1px solid #afe2e2;
  filter: blur(5px);
  position: relative;
  transform: rotate(90deg);
  transition: filter 0.5s ease-in-out;
}

.mirror::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 50%;
  left: 50%;
  background-color: rgba(200, 248, 257, 0.9);
  filter: blur(3px) brightness(3);
  mix-blend-mode: soft-light;
  transform: translate(-50%, -50%);
  opacity: 0;
  transform-origin: center;
  transition: opacity 0.5s ease-in-out;
  z-index: -1;
}

.mirror-image {
  transform: rotate(-90deg);
  color: white;
  transition: color 0.3s ease-in-out;
}

.vortex .slider .item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


.mirror:hover {
  filter: brightness(2);
}

.mirror:hover::after {
  opacity: 1;
}

.mirror:hover .mirror-image {
  color: teal;
}

p {
  color: #fff; 
  line-height: 1.3;
  text-align: center;
}

p:not(span) {
  text-shadow: 2px 2px navy; 
}

p span {
  font-family: "Judson", serif;
  font-size: inherit;
  text-shadow: none;
  line-height: 1.3;
}



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

.framed {
  background-color: rgba(255,255, 250, .8);
  padding: 5px;
  border: 1px solid #dedede;
  filter: blur(10px);
  font-size: 24px;
  transition: all 0.3s ease-in-out;
}

.framed:hover {
  filter: blur(0px);
  color: hotpink;
  cursor: pointer;
}

.intro {
  font-size: 24px;
  opacity: 0;
  animation: .5s appear forwards .5s;
}

.dictionary {
  position: relative;
  z-index: 2;
}

.poem {
  font-size: 22px;
  line-height: 1.3;
  margin-top: 100px;
  position: relative;
  filter: blur(5px) brightness(5);
  animation: reveal 1.8s cubic-bezier(0.2, 0, 0.58, 1.0) forwards .5s;
}

@keyframes reveal {
  from {
    filter: blur(5px) brightness(5);
  } to {
    filter: blur(0px) brightness(1);
  }
}

.poem-wrapper {
  position: relative;
  margin-top: 40px;
}