.scroll-element {
  opacity: 0;
  transform: translateY(100px);
  transition: all 0.6s ease;
}
.scroll-element.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Initial styles for elements that should animate */
[data-scroll-element] {
  opacity: 0;
  transform: translateY(100px); /* Start position (slightly below) */
  transition: all 3s ease; /* Smooth transition */
}

/* When elements are visible (in the viewport) */
[data-scroll-element].visible {
  opacity: 1; /* Fade in */
  transform: translateY(0); /* Move to original position */
}

body {
  position: relative;
  width: 100%;
  height: auto;
  background-color: #d3d3d3;
  overflow-x: hidden;
  margin: 0; /* Remove default margin */
  padding: 0;
}



/* Overlay styling */
.sound-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0); /* Semi-transparent black background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100000; /* Ensure it's on top of all other content */
  opacity: 1;
  transition: opacity 0.5s ease-out;
  cursor: pointer;
}

.hyAllow {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  filter: blur(0.547vw);
}

.hyHeading {
  position: absolute;
  width: 78.828vw;
  height: 24.167vh;
  top: 25.764vh;
  left: 15.352vw;
  font-family: "loretta", serif;
  font-weight: 300;
  color: #ffffff;
  font-size: 11.719vw;
  text-align: center;
  letter-spacing: 9.492vw;
  line-height: normal;
}

.hyMessage {
  position: absolute;
  width: 39.18vw;
  height: 4.306vh;
  top: 70.278vh;
  left: 30.391vw;
  font-family: "loretta", serif;
  font-weight: 400;
  color: #d3d3d3;
  font-size: 0.938vw;
  text-align: center;
  letter-spacing: 0;
  line-height: 4.278vh;
}

.frame {
  background-color: transparent;
  width: 100%;
}

.riA {
  position: fixed;
  mix-blend-mode: exclusion;
  width: 2.07vw;
  top: 8.472vh;
  left: 89.492vw;
  z-index: 10000;
}

.leA {
  position: fixed;
  mix-blend-mode: exclusion;
  width: 2.07vw;
  top: 8.472vh;
  left: 8.359vw;
  cursor: pointer;
  z-index: 9999; /* Make sure it's on top */
  pointer-events: all; /* Ensure it's clickable */
}

.frame .text-wrapper {
  position: absolute;
  top: 17.917vh;
  left: 47.109vw;
  font-family: "loretta", serif;
  font-weight: 600;
  color: #000000;
  font-size: 1.406vw;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.text-wrapper-2 {
  position: fixed;
  mix-blend-mode: exclusion;
  top: 9.375vh;
  left: 39.648vw;
  font-family: "loretta", serif;
  font-weight: 300;
  color: #ffffff;
  font-size: 2.5vw;
  text-align: center;
  letter-spacing: 1.75vw;
  line-height: normal;
  white-space: nowrap;
  z-index: 9999;
}

.frame .text-wrapper-3 {
  left: 35.273vw;
  position: absolute;
  width: 16.016vw;
  height: 27.222vh;
  top: 43.472vh;
  font-family: "Mochiy Pop One", serif;
  font-weight: 400;
  color: #000000;
  font-size: 11.719vw;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.frame .text-wrapper-4 {
  left: 49.219vw;
  position: absolute;
  width: 16.016vw;
  height: 27.222vh;
  top: 43.472vh;
  font-family: "Mochiy Pop One", serif;
  font-weight: 400;
  color: #000000;
  font-size: 11.719vw;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.frame .trenVong {
  width: 36.68vw;
  height: 32.569vh;
  top: 25.208vh;
  left: 32.109vw;
  position: absolute;
}

.frame .duoiVong {
  width: 33.203vw;
  height: 30.208vh;
  top: 61.458vh;
  left: 33.398vw;
  position: absolute;
}

.frame .h-o-p-e {
  position: absolute;
  top: 31.736vh;
  left: 49.023vw;
  font-family: "loretta", serif;
  font-weight: 300;
  color: #000000;
  font-size: 2.5vw;
  text-align: center;
  letter-spacing: 1.75vw;
  line-height: 4.444vh;
}

.frame .h-o-p-e-2 {
  position: absolute;
  top: 70.903vh;
  left: 49.023vw;
  font-family: "loretta", serif;
  font-weight: 300;
  color: #000000;
  font-size: 2.5vw;
  text-align: center;
  letter-spacing: 1.75vw;
  line-height: 4.444vh;
}

.frame .text-wrapper-5 {
  position: absolute;
  width: 31.523vw;
  height: 1.944vh;
  top: 30.625vh;
  left: 8.398vw;
  font-family: "loretta", serif;
  font-weight: 400;
  color: #000000;
  font-size: 0.938vw;
  letter-spacing: 0;
  line-height: normal;
  text-align: left;
}

.frame .text-wrapper-6 {
  position: absolute;
  width: 31.523vw;
  height: 1.944vh;
  top: 39.306vh;
  left: 16.328vw;
  font-family: "loretta", serif;
  font-weight: 400;
  color: #000000;
  font-size: 0.938vw;
  letter-spacing: 0;
  line-height: normal;
  text-align: left;
}

.frame .text-wrapper-7 {
  position: absolute;
  width: 31.523vw;
  height: 2.917vh;
  top: 52.847vh;
  left: 25.156vw;
  font-family: "loretta", serif;
  font-weight: 700;
  font-style: italic;
  color: #000000;
  font-size: 1.406vw;
  letter-spacing: 0;
  line-height: normal;
  text-align: left;
}

.frame .text-wrapper-8 {
  top: 30.625vh;
  left: 60.078vw;
  position: absolute;
  width: 31.523vw;
  height: 1.944vh;
  font-family: "loretta", serif;
  font-weight: 400;
  color: #000000;
  font-size: 0.938vw;
  text-align: right;
  letter-spacing: 0;
  line-height: normal;
  text-align: right;
}

.frame .text-wrapper-9 {
  width: 8.203vw;
  top: 53.125vh;
  left: 67.07vw;
  position: absolute;
  height: 1.944vh;
  font-family: "loretta", serif;
  font-weight: 400;
  color: #000000;
  font-size: 0.938vw;
  text-align: right;
  letter-spacing: 0;
  line-height: normal;
  text-align: right;
}

.frame .text-wrapper-10 {
  top: 64.375vh;
  left: -7.07vw;
  position: absolute;
  width: 31.523vw;
  height: 1.944vh;
  font-family: "loretta", serif;
  font-weight: 400;
  color: #000000;
  font-size: 0.938vw;
  text-align: right;
  letter-spacing: 0;
  line-height: normal;
  text-align: right;
}

.frame .text-wrapper-11 {
  width: 31.523vw;
  top: 73.125vh;
  left: -15.508vw;
  position: absolute;
  height: 1.944vh;
  font-family: "loretta", serif;
  font-weight: 400;
  color: #000000;
  font-size: 0.938vw;
  text-align: right;
  letter-spacing: 0;
  line-height: normal;
  text-align: right;
}

.frame .text-wrapper-12 {
  position: absolute;
  width: 15.664vw;
  height: 1.944vh;
  top: 81.597vh;
  left: 16.797vw;
  font-family: "loretta", serif;
  font-weight: 400;
  color: #000000;
  font-size: 0.938vw;
  letter-spacing: 0;
  line-height: normal;
  text-align: left;
}

.frame .text-wrapper-13 {
  position: absolute;
  width: 15.664vw;
  height: 1.944vh;
  top: 89.792vh;
  left: 17.148vw;
  font-family: "loretta", serif;
  font-weight: 400;
  color: #000000;
  font-size: 0.938vw;
  text-align: right;
  letter-spacing: 0;
  line-height: normal;
  text-align: right;
}

.frame .text-wrapper-14 {
  position: absolute;
  width: 9.023vw;
  height: 2.917vh;
  top: 38.403vh;
  left: 74.18vw;
  font-family: "loretta", serif;
  font-weight: 700;
  font-style: italic;
  color: #000000;
  font-size: 1.406vw;
  text-align: right;
  letter-spacing: 0;
  line-height: normal;
  text-align: right;
}

.frame .were-REWARDED {
  position: absolute;
  width: 11.914vw;
  height: 2.917vh;
  top: 62.083vh;
  left: 75.469vw;
  font-family: "loretta", serif;
  font-weight: 400;
  color: #000000;
  font-size: 0.938vw;
  letter-spacing: 0;
  line-height: normal;
  text-align: left;
}

.frame .span {
  font-family: "loretta", serif;
  font-weight: 400;
  color: #000000;
  font-size: 0.938vw;
  letter-spacing: 0;
}

.frame .text-wrapper-15 {
  font-family: "loretta", serif;
  font-weight: 700;
  font-style: italic;
  font-size: 1.406vw;
}

.frame .text-wrapper-16 {
  position: absolute;
  width: 7.539vw;
  height: 1.944vh;
  top: 73.125vh;
  left: 83.984vw;
  font-family: "loretta", serif;
  font-weight: 400;
  color: #000000;
  font-size: 0.938vw;
  letter-spacing: 0;
  line-height: normal;
  text-align: left;
}

.frame .text-wrapper-17 {
  position: absolute;
  width: 7.539vw;
  height: 1.944vh;
  top: 81.597vh;
  left: 75.664vw;
  font-family: "loretta", serif;
  font-weight: 400;
  color: #000000;
  font-size: 0.938vw;
  text-align: right;
  letter-spacing: 0;
  line-height: normal;
  text-align: right;
}

.frame .text-wrapper-18 {
  position: absolute;
  width: 7.539vw;
  height: 1.944vh;
  top: 89.792vh;
  left: 67.188vw;
  font-family: "loretta", serif;
  font-weight: 400;
  color: #000000;
  font-size: 0.938vw;
  letter-spacing: 0;
  line-height: normal;
  text-align: left;
}

.frame,
.frame2,
.frame3 {
  position: relative;
  z-index: 1; /* Ensure frames are above the canvas */
  width: 100%;
  min-height: 100vh; /* Ensure frames are tall enough to scroll */
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.frame2 {
  background-color: transparent;
  width: 100%;
  margin-top: 24.722vh;
  margin-bottom: 13.542vh;
}
.frame2 .div2 {
  background-color: transparent; /* Ensure no background color */
  width: 100vw;
  height: 100vh;
  position: relative;
  pointer-events: none;
}

.sup-wing-left {
  width: 39.18vw;
  left: -12.773vw;
  position: absolute;
  top: -24.583vh;
  opacity: 0;
}

.sup-wing-right {
  width: 39.063vw;
  left: 73.472vw;
  position: absolute;
  top: -24.583vh;
  opacity: 0;
}

.main-wing-left {
  width: 32.227vw;
  left: 10vw;
  position: absolute;
  top: 11.944vh;
}

.main-wing-right {
  width: 32.148vw;
  left: 58.652vw;
  position: absolute;
  top: 11.944vh;
}

.aboveChinese {
  top: 24.597vh;
  position: absolute;
  width: 16.016vw;
  height: 392px;
  left: 41.992vw;
  font-family: "Mochiy Pop One", serif;
  font-weight: 400;
  color: #000000;
  font-size: 11.719vw;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.belowChinese {
  top: 51.528vh;
  position: absolute;
  width: 16.016vw;
  height: 27.222vh;
  left: 41.992vw;
  font-family: "Mochiy Pop One", serif;
  font-weight: 400;
  color: #000000;
  font-size: 11.719vw;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.hopeIs {
  position: absolute;
  width: 11.289vw;
  height: 2.5vh;
  top: 25.625vh;
  left: 44.375vw;
  font-family: "loretta", serif;
  font-weight: 300;
  color: #000000;
  font-size: 1.406vw;
  letter-spacing: 0.97vw;
  line-height: 2.5vh;
  white-space: nowrap;
  text-align: center;
}

.aBut {
  position: absolute;
  width: 11.367vw;
  height: 2.5vh;
  top: 80.139vh;
  left: 44.336vw;
  font-family: "loretta", serif;
  font-weight: 300;
  color: #000000;
  font-size: 1.406vw;
  letter-spacing: 0.211vw;
  line-height: 2.5vh;
  white-space: nowrap;
  text-align: center;
}

.frame3 {
  background-color: transparent;
  width: 100%;
}
.frame3 .div3 {
  background-color: transparent; /* Ensure no background color */
  width: 100vw;
  height: 100vh;
  position: relative;
  pointer-events: none;
}

.coverUnder {
  position: absolute;
  width: 48.164vw;
  top: 24.861vh;
  left: 25.898vw;
}

.frame3 .less-danger-fewer {
  position: absolute;
  width: 31.523vw;
  height: 7.639vh;
  top: 47.5vh;
  left: 34.219vw;
  font-family: "loretta", serif;
  font-weight: 400;
  color: #000000;
  font-size: 0.938vw;
  text-align: center;
  letter-spacing: 0;
  line-height: 3.792vh;
}

.frame3 .fstLine {
  font-family: "loretta", serif;
  font-weight: 400;
  color: #d3d3d3;
  font-size: 0.938vw;
  letter-spacing: 0;
  line-height: 3.792vh;
}

.frame3 .bold {
  font-family: "loretta", serif;
  font-weight: 700;
  font-style: italic;
  color: #d3d3d3;
}
.startAgain {
  display: inline-block;
  position: absolute;
  mix-blend-mode: exclusion;
  width: 31.523vw;
  top: 86.181vh;
  left: 34.219vw;
  font-family: "loretta", serif;
  font-weight: 700;
  color: #d3d3d3;
  font-size: 0.938vw;
  text-align: center;
  letter-spacing: 0;
  line-height: 3.792vh;
  z-index: 10000;
  cursor: pointer;
  pointer-events: all;
  transition: opacity 0.6s ease-in-out, font-size 3s ease-in-out; /* Add a faster transition */
}
.startAgain:hover {
  opacity: 0.5;
  font-size: 1.563vw;
}
.frame3 .vidHyVong {
  position: absolute;
  filter: blur(7px);
  width: 100vw;
  height: 100vh;
  top: 0;
}

.frameVong {
  background-color: transparent;
  position: fixed;
  width: 100%;
}

.frameVong .r1st {
  position: absolute;
  width: 21.445vw;
  top: 38.681vh;
  left: 39.688vw;
  filter: blur(0.273vw);
  opacity: 0.4;
}

.frameVong .r2nd {
  position: absolute;
  width: 40.273vw;
  top: 21.944vh;
  left: 30.273vw;
  opacity: 0.4;
}

.frameVong .r3rd {
  position: absolute;
  width: 60.273vw;
  top: 4.167vh;
  left: 20.859vw;
  filter: blur(0.273vw);
  opacity: 0.4;
}

.frameVong .r4th {
  position: absolute;
  width: 80vw;
  top: -13.403vh;
  left: 11.445vw;
  opacity: 0.4;
}

.frameVong .r5th {
  position: absolute;
  width: 102.695vw;
  top: -33.681vh;
  left: -1.667vh;
  filter: blur(0.273vw);
  opacity: 0.4;
}

.frameVong img {
  position: absolute;
  width: 100px; /* Adjust the size as needed */
  transition: transform 4s linear;
}

/* Add rotation effect */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.rotating {
  animation: rotate 30s infinite linear;
}