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

body {
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

/* Lake surface - top-down view */
.lake {
  position: relative;
  width: 100%;
  height: 100vh;
  background:
    radial-gradient(
      ellipse at center,
      #2a2a3a 0%,
      #241a24 40%,
      #181218 70%,
      #0d0a0d 100%
    );
  overflow: hidden;
}

/* Animated background layer for movement */
.lake::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -60%;
  width: 220%;
  height: 220%;
  background:
    radial-gradient(ellipse 600px 300px at 20% 30%, rgba(20, 40, 60, 0.5) 0%, transparent 50%),
    radial-gradient(ellipse 500px 250px at 80% 70%, rgba(15, 35, 55, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse 400px 200px at 60% 20%, rgba(25, 45, 65, 0.35) 0%, transparent 50%),
    radial-gradient(ellipse 450px 220px at 30% 80%, rgba(18, 38, 58, 0.4) 0%, transparent 50%);
  animation: backgroundDrift 20s ease-in-out infinite;
  pointer-events: none;
}

/* Subtle water texture with movement */
.lake::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -40%;
  width: 180%;
  height: 180%;
  background:
    radial-gradient(ellipse 800px 400px at 30% 40%, rgba(30, 50, 70, 0.35) 0%, transparent 50%),
    radial-gradient(ellipse 600px 300px at 70% 60%, rgba(25, 45, 65, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse 700px 350px at 50% 80%, rgba(22, 42, 62, 0.3) 0%, transparent 50%);
  animation: textureDrift 28s ease-in-out infinite;
  pointer-events: none;
}

/* Background drift animation - moves corner to corner */
@keyframes backgroundDrift {
  0% {
    transform: translate(0, 0);
  }
  12% {
    transform: translate(25%, 10%);
  }
  28% {
    transform: translate(10%, 30%);
  }
  41% {
    transform: translate(35%, 25%);
  }
  55% {
    transform: translate(20%, 40%);
  }
  67% {
    transform: translate(40%, 15%);
  }
  82% {
    transform: translate(15%, 5%);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* Texture drift animation - different path for depth effect */
@keyframes textureDrift {
  0% {
    transform: translate(0, 0);
  }
  15% {
    transform: translate(-10%, 20%);
  }
  30% {
    transform: translate(15%, 15%);
  }
  48% {
    transform: translate(-5%, -10%);
  }
  62% {
    transform: translate(20%, 5%);
  }
  78% {
    transform: translate(-15%, 18%);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* Ripple container - uses CSS custom property for delay */
.ripple {
  --delay: 0s;
  position: absolute;
  transform: translate(-50%, -50%);
}

/* Initial splash/impact point */
.ripple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: radial-gradient(
    circle,
    rgba(220, 235, 250, 0.9) 0%,
    rgba(180, 210, 240, 0.6) 40%,
    transparent 70%
  );
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.3);
  animation: splash 3.5s ease-out infinite;
  animation-delay: var(--delay);
  will-change: transform, opacity;
}

/* Shared ring styles */
.ripple::after,
.ring2,
.ring3 {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  border: 1.5px solid rgba(160, 190, 220, 0.5);
  will-change: transform, opacity;
}

/* First ripple ring */
.ripple::after {
  animation: ring1 3.5s ease-out infinite;
  animation-delay: var(--delay);
}

/* Second ripple ring */
.ring2 {
  width: 140px;
  height: 140px;
  border: 1px solid rgba(140, 170, 200, 0.4);
  animation: ring2 3.5s ease-out infinite;
  animation-delay: var(--delay);
}

/* Third ripple ring */
.ring3 {
  width: 180px;
  height: 180px;
  border: 0.5px solid rgba(120, 150, 180, 0.3);
  animation: ring3 3.5s ease-out infinite;
  animation-delay: var(--delay);
}

/* Splash animation - using scale instead of width/height */
@keyframes splash {
  0% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 1;
  }
  5% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.9;
  }
  15% {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0.4;
  }
  25% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
}

/* First ring - fastest, most visible */
@keyframes ring1 {
  0% {
    transform: translate(-50%, -50%) scale(0.04);
    opacity: 0;
  }
  5% {
    transform: translate(-50%, -50%) scale(0.1);
    opacity: 0.8;
  }
  40% {
    opacity: 0.4;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* Second ring - slightly delayed, medium size */
@keyframes ring2 {
  0%, 8% {
    transform: translate(-50%, -50%) scale(0.03);
    opacity: 0;
  }
  15% {
    transform: translate(-50%, -50%) scale(0.1);
    opacity: 0.6;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* Third ring - most delayed, largest, faintest */
@keyframes ring3 {
  0%, 15% {
    transform: translate(-50%, -50%) scale(0.02);
    opacity: 0;
  }
  25% {
    transform: translate(-50%, -50%) scale(0.1);
    opacity: 0.4;
  }
  60% {
    opacity: 0.2;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* Individual ripple positions and timing - only position and delay needed */
.ripple-1  { top: 15%; left: 25%; --delay: 0s; }
.ripple-2  { top: 45%; left: 70%; --delay: 0.3s; }
.ripple-3  { top: 70%; left: 20%; --delay: 0.6s; }
.ripple-4  { top: 30%; left: 50%; --delay: 0.9s; }
.ripple-5  { top: 80%; left: 60%; --delay: 1.2s; }
.ripple-6  { top: 20%; left: 80%; --delay: 1.5s; }
.ripple-7  { top: 55%; left: 35%; --delay: 1.8s; }
.ripple-8  { top: 40%; left: 15%; --delay: 2.1s; }
.ripple-9  { top: 65%; left: 85%; --delay: 2.4s; }
.ripple-10 { top: 85%; left: 40%; --delay: 2.7s; }
.ripple-11 { top: 10%; left: 55%; --delay: 3.0s; }
.ripple-12 { top: 50%; left: 90%; --delay: 3.3s; }
.ripple-13 { top: 75%; left: 45%; --delay: 0.15s; }
.ripple-14 { top: 25%; left: 10%; --delay: 0.4s; }
.ripple-15 { top: 60%; left: 55%; --delay: 0.8s; }
.ripple-16 { top: 35%; left: 75%; --delay: 1.3s; }
.ripple-17 { top: 90%; left: 25%; --delay: 1.7s; }
.ripple-18 { top: 5%;  left: 40%; --delay: 2.2s; }
.ripple-19 { top: 45%; left: 5%;  --delay: 2.6s; }
.ripple-20 { top: 55%; left: 65%; --delay: 3.1s; }