:root {
  --bg: #070708;
  --ink: #f3f4f5;
  --muted: #8c8c93;
  --aqua: #7ef6f0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
}

body {
  min-height: 100dvh;
  overflow: hidden;
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.stage,
.vignette,
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.stage {
  z-index: 1;
  overflow: hidden;
  background:
    radial-gradient(46% 34% at 64% 34%, rgba(126, 246, 240, 0.28), transparent 68%),
    radial-gradient(32% 24% at 82% 16%, rgba(232, 255, 252, 0.18), transparent 70%),
    radial-gradient(38% 26% at 86% 52%, rgba(90, 210, 220, 0.16), transparent 72%);
}

.ink {
  position: absolute;
  width: 150%;
  height: 130%;
  top: -12%;
  left: -8%;
  display: block;
  mix-blend-mode: screen;
}

.wash {
  opacity: 0.55;
}

.mid {
  opacity: 0.88;
}

.core {
  opacity: 1;
}

.veil {
  opacity: 0.4;
}

.drift {
  transform-origin: 58% 42%;
  animation: drift 18s ease-in-out infinite;
}

.vignette {
  z-index: 2;
  background:
    radial-gradient(ellipse at 42% 48%, transparent 52%, rgba(0, 0, 0, 0.28) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), transparent 18%, transparent 80%, rgba(0, 0, 0, 0.34));
}

.grain {
  z-index: 3;
  opacity: 0.2;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.caption {
  position: fixed;
  z-index: 4;
  left: clamp(1.1rem, 3.6vw, 3.25rem);
  top: 50%;
  margin: 0;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  font-family: Outfit, Pretendard, sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.52em;
  color: rgba(214, 214, 218, 0.55);
}

main {
  position: fixed;
  z-index: 4;
  left: clamp(4.4rem, 11vw, 10.5rem);
  top: 46%;
  transform: translateY(-50%);
}

h1 {
  margin: 0;
  font-family: Outfit, Pretendard, sans-serif;
  font-size: clamp(2.7rem, 6.4vw, 5.15rem);
  font-weight: 400;
  letter-spacing: 0.035em;
  line-height: 1;
}

footer {
  position: fixed;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.15rem clamp(1.1rem, 4vw, 3.25rem) 1.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  color: var(--muted);
}

footer p {
  margin: 0;
}

footer a {
  color: #d7d7dc;
  text-decoration: none;
  border-bottom: 1px solid rgba(215, 215, 220, 0.28);
  transition: color 0.2s ease, border-color 0.2s ease;
}

footer a:hover,
footer a:focus-visible {
  color: var(--aqua);
  border-bottom-color: var(--aqua);
  outline: none;
}

.copy {
  color: #9a9aa2;
}

@keyframes drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(1.6%, -1.2%, 0) scale(1.03);
  }
}

@media (max-width: 720px) {
  body {
    overflow: auto;
  }

  .caption {
    left: 1rem;
    font-size: 0.6rem;
    letter-spacing: 0.42em;
  }

  .ink {
    width: 230%;
    height: 150%;
    left: -48%;
    top: -8%;
  }

  main {
    left: 3.4rem;
    top: 42%;
  }

  footer {
    padding-bottom: 1.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .drift,
  .drift animate {
    animation: none !important;
  }
}