/* MEMORY TRANSFER STYLES */

#intro-cover {
  position: fixed;
  width: 100vw;
  height: 100vh;
  /* background: var(--bg-color); */
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  grid-template-columns: 100vw;
  grid-template-rows: 100vh;
  overflow: hidden;
  z-index: 200;
  background: rgba(58, 67, 45, 0.95);
}

.center-item {
  grid-area: 1 / 1;
}

#cloud-enter {
  z-index: 10;
  font-family: monospace, sans-serif;
  text-align: center;
  &::after {
    content:"↑";
    animation: fade-in 0.5s infinite;
  } &::before {
    content:"↑";
    animation: fade-in 0.5s infinite;
  }
}

.cloud {
  opacity: 0;
  height: 100vh;
  width: 100vh;
  will-change: transform;
}

#cloud-1 {
  animation: 10s linear cloud-spiral infinite;
}

#cloud-2 {
  animation: 10s linear -2s cloud-spiral-reverse infinite;
}

#cloud-3 {
  animation: 10s linear -4s cloud-spiral infinite;
}

#cloud-4 {
  animation: 10s linear -6s cloud-spiral-reverse infinite;
}

#cloud-5 {
  animation: 10s linear -8s cloud-spiral infinite;
}

#intro-cover .underline {
  display: inline-block;
  animation: 1s ease-in fade-in infinite alternate;
}

/* process slider styles */

.slider-container {
  position: relative;
  width: 100%;
  max-width: 1600px;
  aspect-ratio: 16 / 9; /* Ensures both images share the same aspect ratio */
  overflow: hidden;
  user-select: none;
  margin: 20px auto;
}

/* Ensure images stack and scale identically */
.slider-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* height: 100%; */
  object-fit: cover;
   transform: scaleX(-1);
}

/* The wrapper that will be resized by the slider */
.img-foreground-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%; /* Starting position */
  height: 100%;
  overflow: hidden;
  /* z-index: 1; */
}

/* Prevent the inner image from shrinking when the wrapper resizes */
.img-foreground {
  width: 1600px;
  max-width: none;
  background-color: var(--bg-color);
}

/* Invisible range slider layered perfectly on top */
.slider-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* Keeps it functional but invisible */
  cursor: ew-resize;
  /* z-index: 2; */
  margin: 0;
}

/* CSS */
.slider-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--text-color);
  /* z-index: 1; */
  pointer-events: none; /* Let clicks pass through to the input */
}


  /* delay fade in animation to avoid content showing up before the spiral shows up */
.delayAnim {
  animation: 3s ease-in fade-in;
}

/* animation for 2 frame hero 'gif' */

#frame-anim {

    display: grid;
}

#frame-anim img {
    grid-area: 1 / 1;
}

#animated-img {
    animation: 1s linear frame-animation infinite;
}

.artist-statement {
  display: flex;
  gap: 20px;
  margin: 20px 0;
  flex-direction: column;
}


.artist-para {
  font-size: 0.6em;
}

.video-info {
  z-index: 5;
}

@media screen and (width >= 600px) {
  .artist-statement {
    flex-direction: row;
  }

 .desc-tag {
    min-width: 100px;
  }
}

@media screen and (width >= 900px) {
  /* fix height/width of clouds for desktop */
  .cloud {
    width: 100%;
    height: revert;
  }
}

/* CSS ANIMATIONS */


@keyframes cloud-spiral {
  0% {
    transform: scale(30%) rotate(0deg);
    opacity: 0;
    z-index: 2;
  }
  40% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: scale(220%) rotate(100deg);
    opacity: 0;
    z-index: 8;
  }
}

@keyframes cloud-spiral-reverse {
  0% {
    transform: scale(30%) rotate(0deg);
    opacity: 0;
    z-index: 2;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: scale(270%) rotate(-100deg);
    opacity: 0;
    z-index: 8;
  }
}

@keyframes frame-animation {
    from {
        z-index: 0;
    } to {
        z-index: -1;
    }
}