:root {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: #020607;
}

body {
  font-family: "SFMono-Regular", Consolas, "Noto Sans KR", monospace;
}

.swim-screen {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #d9f6ff;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(22, 91, 113, 0.3), transparent 35%),
    radial-gradient(ellipse at 50% 51%, rgba(5, 32, 41, 0.45), transparent 60%),
    #020607;
  isolation: isolate;
}

.water {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  animation: water-in 1.7s 150ms ease-out forwards;
}

.water::before {
  content: "";
  position: absolute;
  inset: 39% -15% auto;
  height: 24%;
  background: radial-gradient(
    ellipse at center,
    rgba(116, 218, 244, 0.17),
    rgba(69, 174, 207, 0.06) 48%,
    transparent 72%
  );
  filter: blur(24px);
  animation: water-glow 5s ease-in-out infinite alternate;
}

.water::after {
  content: "";
  position: absolute;
  left: -12%;
  top: 46%;
  width: 124%;
  height: 10%;
  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(111, 216, 244, 0.07) 40%,
      rgba(174, 238, 255, 0.14) 51%,
      rgba(52, 157, 189, 0.04) 65%,
      transparent
    );
  filter: blur(8px);
  transform: rotate(-0.8deg) scaleX(1.04);
  animation: water-ribbon 6.2s ease-in-out infinite alternate;
}

.wave {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1120px, 126vw);
  height: clamp(72px, 11vw, 142px);
  border-top: 1.4px solid rgba(158, 231, 250, 0.76);
  border-radius: 50%;
  filter:
    drop-shadow(0 0 7px rgba(120, 219, 244, 0.38))
    drop-shadow(0 0 18px rgba(73, 180, 211, 0.16));
  transform-origin: center;
}

.wave-one {
  transform: translate(-50%, -44%) rotate(-1.4deg);
  animation: wave-one 4.2s ease-in-out infinite alternate;
}

.wave-two {
  top: 53%;
  width: min(960px, 110vw);
  border-color: rgba(122, 213, 238, 0.5);
  transform: translate(-50%, -50%) rotate(1.4deg);
  animation: wave-two 5s 200ms ease-in-out infinite alternate;
}

.wave-three {
  top: 47%;
  width: min(1320px, 142vw);
  border-color: rgba(87, 183, 213, 0.24);
  transform: translate(-50%, -50%) rotate(-2deg);
  animation: wave-three 5.8s 500ms ease-in-out infinite alternate;
}

.wave-four {
  top: 49%;
  width: min(760px, 92vw);
  height: clamp(52px, 8vw, 105px);
  border-color: rgba(190, 240, 253, 0.44);
  transform: translate(-50%, -22%) rotate(2.1deg);
  animation: wave-four 3.8s 350ms ease-in-out infinite alternate;
}

.wave-five {
  top: 54%;
  width: min(1480px, 158vw);
  height: clamp(92px, 15vw, 190px);
  border-color: rgba(71, 171, 203, 0.2);
  transform: translate(-50%, -62%) rotate(-1.2deg);
  animation: wave-five 6.6s 100ms ease-in-out infinite alternate;
}

.opening {
  position: relative;
  z-index: 1;
  width: min(88vw, 620px);
  transform: translateY(7px);
  text-align: center;
}

.opening h1 {
  margin: 0;
  color: #e7faff;
  font-size: clamp(44px, 7vw, 76px);
  font-weight: 420;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-shadow:
    0 0 12px rgba(144, 224, 244, 0.28),
    0 0 38px rgba(64, 170, 202, 0.18);
  opacity: 0;
  animation: title-in 1.2s 1.35s ease-out forwards;
}

.opening-meta {
  display: grid;
  gap: 8px;
  margin-top: clamp(58px, 9vh, 92px);
  color: rgba(185, 230, 240, 0.72);
  font-size: clamp(10px, 1.25vw, 13px);
  letter-spacing: 0.09em;
}

.opening-meta p {
  margin: 0;
  opacity: 0;
  animation: line-in 680ms ease-out forwards;
}

.opening-meta p:nth-child(1) {
  animation-delay: 2.65s;
}

.opening-meta p:nth-child(2) {
  animation-delay: 2.92s;
}

.opening-meta p:nth-child(3) {
  animation-delay: 3.19s;
}

.opening-meta p:nth-child(4) {
  animation-delay: 3.46s;
}

@keyframes water-in {
  to {
    opacity: 1;
  }
}

@keyframes water-glow {
  to {
    transform: translateY(7px) scaleX(1.09) scaleY(0.82);
    opacity: 0.8;
  }
}

@keyframes water-ribbon {
  to {
    transform: translateY(8px) rotate(1deg) scaleX(0.96) scaleY(1.22);
    opacity: 0.72;
  }
}

@keyframes wave-one {
  to {
    transform: translate(-49%, -58%) rotate(1.5deg) scaleX(0.96) scaleY(0.64);
  }
}

@keyframes wave-two {
  to {
    transform: translate(-51%, -32%) rotate(-1.3deg) scaleX(1.06) scaleY(1.28);
  }
}

@keyframes wave-three {
  to {
    transform: translate(-50%, -66%) rotate(1deg) scaleX(0.93) scaleY(0.78);
  }
}

@keyframes wave-four {
  to {
    transform: translate(-48%, -64%) rotate(-2deg) scaleX(1.08) scaleY(1.3);
  }
}

@keyframes wave-five {
  to {
    transform: translate(-52%, -40%) rotate(1.6deg) scaleX(0.94) scaleY(0.7);
  }
}

@keyframes title-in {
  from {
    transform: translateY(12px);
    filter: blur(6px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    filter: blur(0);
    opacity: 1;
  }
}

@keyframes line-in {
  from {
    transform: translateY(5px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 560px) {
  .opening {
    width: 94vw;
  }

  .opening h1 {
    font-size: 45px;
  }

  .opening-meta {
    gap: 9px;
    letter-spacing: 0.045em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .water,
  .opening h1,
  .opening-meta p {
    animation: none;
    opacity: 1;
  }

  .water::before,
  .water::after,
  .wave {
    animation: none;
  }
}