/* God Rays Effect 
   Simulates light rays coming through water surface
   The rays fade out as you scroll down to simulate deeper water
   Matched to the React implementation */

/* Container for the god rays */
.god-rays-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 10;
}

/* Background gradient overlay */
.god-rays-bg {
  position: absolute;
  inset: 0; /* Same as top: 0, right: 0, bottom: 0, left: 0 */
  background: linear-gradient(to bottom, rgba(125, 211, 252, 0.2), transparent);
}

/* Individual god ray */
.god-ray {
  position: absolute;
  top: 0;
  background: linear-gradient(
    to bottom,
    rgba(125, 211, 252, 0.4) 0%,
    /* maritime-blue-light color with opacity */ rgba(125, 211, 252, 0.2) 40%,
    rgba(125, 211, 252, 0.05) 70%,
    transparent 100%
  );
  border-radius: 40% 60% 60% 40% / 20% 20% 80% 80%; /* Organic shape */
  filter: blur(16px); /* blur-xl equivalent */
  transition: all 0.3s ease-in-out;
  transform-origin: top center;
}

.god-ray.ray-1 {
  left: 15%;
  height: 50vh;
  width: 60px;
  transform: rotate(10deg);
  animation: ray-animation-1 3.9s infinite ease-in-out;
  opacity: 0.4; /* from-maritime-blue-light/40 */
  border-radius: 30% 70% 50% 50% / 20% 20% 70% 70%;
}

.god-ray.ray-2 {
  left: 25%;
  height: 60vh;
  width: 80px;
  transform: rotate(11deg);
  animation: ray-animation-2 4.1s infinite ease-in-out;
  opacity: 0.3; /* from-maritime-blue-light/30 */
  border-radius: 60% 40% 50% 50% / 10% 10% 80% 80%;
}

.god-ray.ray-3 {
  left: 76%;
  height: 40vh;
  width: 96px;
  transform: rotate(14deg);
  animation: ray-animation-3 3.9s infinite ease-in-out;
  opacity: 0.35; /* from-maritime-blue-light/35 */
  border-radius: 45% 55% 60% 40% / 15% 15% 75% 85%;
}

.god-ray.ray-4 {
  left: 53%;
  height: 45vh;
  width: 64px;
  transform: rotate(12deg);
  animation: ray-animation-4 5.2s infinite ease-in-out;
  opacity: 0.25; /* from-maritime-blue-light/25 */
  border-radius: 50% 50% 40% 60% / 20% 20% 70% 80%;
}

.god-ray.ray-5 {
  left: 60%;
  height: 55vh;
  width: 55px;
  transform: rotate(11deg);
  animation: ray-animation-5 4.5s infinite ease-in-out;
  opacity: 0.35; /* from-maritime-blue-light/35 */
  border-radius: 55% 45% 50% 50% / 15% 15% 85% 75%;
}

.god-ray.ray-6 {
  left: 67%;
  height: 55vh;
  width: 45px;
  transform: rotate(15deg);
  animation: ray-animation-5 5.1s infinite ease-in-out;
  opacity: 0.35; /* from-maritime-blue-light/35 */
  border-radius: 55% 45% 50% 50% / 15% 15% 85% 75%;
}

.god-ray.ray-7 {
  left: 35%;
  height: 45vh;
  width: 64px;
  transform: rotate(13deg);
  animation: ray-animation-4 4s infinite ease-in-out;
  opacity: 0.25; /* from-maritime-blue-light/25 */
  border-radius: 50% 50% 40% 60% / 20% 20% 70% 80%;
}

.god-ray.ray-8 {
  left: 85%;
  height: 40vh;
  width: 76px;
  transform: rotate(12deg);
  animation: ray-animation-3 3.2s infinite ease-in-out;
  opacity: 0.35; /* from-maritime-blue-light/35 */
  border-radius: 45% 55% 60% 40% / 15% 15% 75% 85%;
}

.god-ray.ray-9 {
  left: 50%;
  height: 60vh;
  width: 56px;
  transform: rotate(13deg);
  animation: ray-animation-2 4.5s infinite ease-in-out;
  opacity: 0.3; /* from-maritime-blue-light/30 */
  border-radius: 60% 40% 50% 50% / 10% 10% 80% 80%;
}

.god-ray.ray-10 {
  left: 45%;
  height: 50vh;
  width: 80px;
  transform: rotate(14deg);
  animation: ray-animation-1 5.5s infinite ease-in-out;
  opacity: 0.4; /* from-maritime-blue-light/40 */
  border-radius: 30% 70% 50% 50% / 20% 20% 70% 70%;
}

/* Ray animations to match the React animations - subtle pulsing */
@keyframes ray-animation-1 {
  0%,
  100% {
    opacity: 0.2;
    transform: rotate(10deg) translateY(0);
  }
  50% {
    opacity: 0.7;
    transform: rotate(15deg) translateY(-15px);
  }
}

@keyframes ray-animation-2 {
  0%,
  100% {
    opacity: 0.2;
    transform: rotate(8deg) translateY(0);
  }
  50% {
    opacity: 0.7;
    transform: rotate(13deg) translateY(-18px);
  }
}

@keyframes ray-animation-3 {
  0%,
  100% {
    opacity: 0.15;
    transform: rotate(9deg) translateY(0);
  }
  50% {
    opacity: 0.7;
    transform: rotate(14deg) translateY(10px);
  }
}

@keyframes ray-animation-4 {
  0%,
  100% {
    opacity: 0.2;
    transform: rotate(15deg) translateY(0);
  }
  50% {
    opacity: 0.7;
    transform: rotate(10deg) translateY(-15px);
  }
}

@keyframes ray-animation-5 {
  0%,
  100% {
    opacity: 0.15;
    transform: rotate(9deg) translateY(0);
  }
  50% {
    opacity: 0.7;
    transform: rotate(14deg) translateY(-25px);
  }
}

@keyframes ray-animation-6 {
  0%,
  100% {
    opacity: 0.15;
    transform: rotate(9deg) translateY(0);
  }
  50% {
    opacity: 0.7;
    transform: rotate(14deg) translateY(-25px);
  }
}

@keyframes ray-animation-7 {
  0%,
  100% {
    opacity: 0.15;
    transform: rotate(7deg) translateY(0);
  }
  50% {
    opacity: 0.7;
    transform: rotate(11deg) translateY(20px);
  }
}

@keyframes ray-animation-8 {
  0%,
  100% {
    opacity: 0.15;
    transform: rotate(9deg) translateY(0);
  }
  50% {
    opacity: 0.7;
    transform: rotate(16deg) translateY(23px);
  }
}

@keyframes ray-animation-9 {
  0%,
  100% {
    opacity: 0.15;
    transform: rotate(10deg) translateY(0);
  }
  50% {
    opacity: 0.7;
    transform: rotate(13deg) translateY(25px);
  }
}

@keyframes ray-animation-10 {
  0%,
  100% {
    opacity: 0.15;
    transform: rotate(9deg) translateY(0);
  }
  50% {
    opacity: 0.7;
    transform: rotate(11deg) translateY(15px);
  }
}

/* No separate fade element needed, we're using the same opacity calculation as React */
.god-rays-fade {
  display: none; /* We're not using this element, matching React implementation */
}