/* ============================================
   THE UNDERGROUND LAKE
   A body of water in the dark below the archive.
   ============================================ */

/* --- Page --- */
.lake-page {
  background: #050505;
  min-height: 100vh;
  color: #2a2a2a;
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-size: 0.7rem;
  line-height: 2.8;
  letter-spacing: 0.04em;
  cursor: default;
  overflow-x: hidden;
}

.lake-page ::selection {
  background: #0a0a10;
  color: #2a2a30;
}

/* --- Scene Container --- */
.lake-scene {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --- Cavern (top half) --- */
.lake-cavern {
  flex: 1;
  min-height: 50vh;
  background: #050505;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 24px 40px;
  position: relative;
}

/* --- Text above the water --- */
.lake-text {
  text-align: center;
  max-width: 400px;
}

.lake-text-line {
  display: block;
  margin-bottom: 20px;
  opacity: 0;
  transition: opacity 4s ease;
}

.lake-text-line.is-visible {
  opacity: 1;
}

/* --- The Waterline --- */
.lake-waterline {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, #151518 30%, #1a1a1f 50%, #151518 70%, transparent 95%);
  position: relative;
  flex-shrink: 0;
}

/* --- The Water (bottom half) --- */
.lake-water {
  flex: 1;
  min-height: 50vh;
  background: #050507;
  position: relative;
  overflow: hidden;
  transition: transform 0.8s ease;
}

/* Subtle shimmer on the water surface */
.lake-water::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(180deg,
      rgba(10, 10, 16, 0.3) 0%,
      transparent 8%,
      transparent 100%
    );
  pointer-events: none;
}

/* Undulating ripple animation */
.lake-water::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -10%;
  width: 120%;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0%,
    rgba(18, 18, 24, 0.4) 10%,
    transparent 20%
  );
  animation: lake-ripple 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes lake-ripple {
  0%, 100% {
    transform: translateX(0) scaleY(1);
    opacity: 0.4;
  }
  25% {
    transform: translateX(-3%) scaleY(1.5);
    opacity: 0.6;
  }
  50% {
    transform: translateX(2%) scaleY(0.8);
    opacity: 0.3;
  }
  75% {
    transform: translateX(-1%) scaleY(1.2);
    opacity: 0.5;
  }
}

/* --- Reflection text (in the water) --- */
.lake-reflection {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%) scaleY(-1);
  text-align: center;
  max-width: 400px;
  color: #1a1a20;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  opacity: 0;
  transition: opacity 5s ease;
  filter: blur(0.5px);
}

.lake-reflection.is-visible {
  opacity: 1;
}

/* --- Surfacing word --- */
.lake-surface-word {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  font-style: italic;
  color: #1e1e24;
  letter-spacing: 0.15em;
  opacity: 0;
  transition: opacity 6s ease, top 6s ease;
}

.lake-surface-word.is-surfacing {
  opacity: 1;
  top: -2%;
}

/* --- Links at the waterline --- */
.lake-links {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding-bottom: 80px;
}

.lake-link-reach {
  color: #1a1a20;
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  opacity: 0;
  transition: opacity 4s ease, color 2s ease;
}

.lake-link-reach.is-visible {
  opacity: 1;
}

.lake-link-reach:hover {
  color: #333;
}

.lake-link-back {
  color: #131313;
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: color 2s ease;
}

.lake-link-back:hover {
  color: #2a2a2a;
}

/* --- Mouse-responsive perspective --- */
.lake-water.rippling {
  /* Applied via JS mousemove */
  transition: transform 0.3s ease;
}

/* --- Mobile --- */
@media (max-width: 768px) {
  .lake-cavern {
    min-height: 45vh;
    padding: 0 16px 30px;
  }

  .lake-water {
    min-height: 55vh;
  }
}