:root {
  --black: #000;
  --white: #f5f5f2;
  --soft: rgba(245,245,242,.66);
  --quiet: rgba(245,245,242,.42);
  --page-pad: clamp(20px, 3vw, 52px);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; background: #000; }
html { overscroll-behavior: none; }
body {
  margin: 0;
  overflow: hidden;
  color: var(--white);
  font-family: "Nanum Gothic", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}
body::selection { background: rgba(255,255,255,.9); color: #000; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.water-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #000;
}
.water {
  position: absolute;
  inset: -35%;
  opacity: .17;
  filter: blur(44px) saturate(.85);
  will-change: transform;
  mix-blend-mode: screen;
}
.water-a {
  background:
    radial-gradient(ellipse at 22% 28%, rgba(38,88,95,.58), transparent 20%),
    radial-gradient(ellipse at 72% 42%, rgba(15,49,56,.72), transparent 18%),
    radial-gradient(ellipse at 48% 82%, rgba(33,92,98,.38), transparent 17%),
    radial-gradient(ellipse at 88% 76%, rgba(24,56,67,.56), transparent 15%);
  animation: drift-a 19s ease-in-out infinite alternate;
}
.water-b {
  opacity: .095;
  background: repeating-radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.20) 0 1px, transparent 2px 15px);
  transform: scale(1.15) rotate(11deg);
  animation: drift-b 27s linear infinite;
}
.grain {
  position: absolute;
  inset: -60%;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation: grain 9s steps(2) infinite;
}
@keyframes drift-a {
  0% { transform: translate3d(-2%, -3%, 0) scale(1.03) rotate(-2deg); }
  50% { transform: translate3d(4%, 1%, 0) scale(1.10) rotate(2deg); }
  100% { transform: translate3d(-1%, 5%, 0) scale(1.05) rotate(-1deg); }
}
@keyframes drift-b {
  from { transform: translate3d(-3%,0,0) scale(1.12) rotate(8deg); }
  to { transform: translate3d(5%,-4%,0) scale(1.25) rotate(18deg); }
}
@keyframes grain {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(3%,-2%); }
  40% { transform: translate(-2%,4%); }
  60% { transform: translate(4%,2%); }
  80% { transform: translate(-3%,-4%); }
}

.stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.track {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 400%;
  transform: translate3d(0, -25%, 0);
  will-change: transform;
}
.panel {
  position: relative;
  width: 100%;
  height: 25%;
  min-height: 100svh;
  overflow: hidden;
}

.ident {
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) var(--page-pad) max(22px, env(safe-area-inset-bottom));
}
.video-shell {
  width: min(86vw, 1480px);
  aspect-ratio: 16/9;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.ident-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: contrast(1.03);
}
.ident-meta,
.sound-toggle,
.contact-cue {
  position: absolute;
  z-index: 3;
  text-transform: uppercase;
  letter-spacing: .19em;
  font-size: 10px;
  line-height: 1;
  color: var(--soft);
}
.ident-meta { font-weight: 700; }
.ident-meta-top { top: max(26px, env(safe-area-inset-top)); left: var(--page-pad); }
.ident-meta-bottom { bottom: max(28px, env(safe-area-inset-bottom)); left: var(--page-pad); }
.sound-toggle {
  top: max(22px, env(safe-area-inset-top));
  right: var(--page-pad);
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 0 6px 8px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  color: var(--soft);
}
.sound-toggle:hover, .sound-toggle:focus-visible { color: var(--white); outline: none; }
.sound-dot {
  width: 6px;
  height: 6px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.sound-toggle[aria-pressed="true"] .sound-dot {
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(255,255,255,.05);
}
.contact-cue {
  right: var(--page-pad);
  bottom: max(28px, env(safe-area-inset-bottom));
  appearance: none;
  border: 0;
  background: transparent;
  padding: 5px 0;
  display: flex;
  align-items: center;
  gap: 13px;
  cursor: pointer;
  color: var(--soft);
  font-weight: 700;
}
.contact-cue:hover, .contact-cue:focus-visible { color: var(--white); outline: none; }
.cue-line {
  width: 36px;
  height: 1px;
  background: currentColor;
  transform-origin: right center;
  animation: cue 2.4s ease-in-out infinite;
}
@keyframes cue { 0%,100% { transform: scaleX(.45); opacity: .4; } 50% { transform: scaleX(1); opacity: 1; } }

.contact {
  display: grid;
  place-items: center;
  padding: max(34px, env(safe-area-inset-top)) var(--page-pad) max(30px, env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(0,0,0,.22), #000 42%, #000 100%);
}
.contact-inner {
  position: relative;
  width: min(980px, 100%);
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.contact-kicker {
  margin: 0 0 clamp(28px, 5vh, 54px);
  text-transform: uppercase;
  font-size: clamp(12px, 1.15vw, 16px);
  line-height: 1.2;
  letter-spacing: .16em;
  color: var(--soft);
  font-weight: 700;
}
.contact-wordmark {
  display: block;
  width: min(760px, 78vw);
  height: auto;
  object-fit: contain;
  margin: 0 0 clamp(38px, 7vh, 76px);
}
.contact-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 42px);
  flex-wrap: wrap;
  color: var(--soft);
  font-size: clamp(12px, 1.15vw, 16px);
  letter-spacing: .02em;
  margin-bottom: clamp(44px, 8vh, 92px);
}
.contact-line a {
  position: relative;
  white-space: nowrap;
  transition: color .25s ease;
}
.contact-line a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transition: right .3s ease;
}
.contact-line a:hover { color: var(--white); }
.contact-line a:hover::after { right: 0; }
.contact-prefix { color: var(--white); font-weight: 700; }
.contact-icon {
  position: absolute;
  left: 50%;
  bottom: max(8px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: block;
  width: clamp(34px, 3.2vw, 52px);
  height: auto;
  object-fit: contain;
  opacity: .78;
}

.reveal-item {
  opacity: 0;
  filter: blur(8px);
  transform: translate3d(0,24px,0);
  transition:
    opacity .95s cubic-bezier(.22,.61,.36,1),
    filter 1.05s cubic-bezier(.22,.61,.36,1),
    transform 1.05s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, filter, transform;
}
.contact.is-visible .reveal-item {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0,0,0);
}
.contact.is-visible .reveal-item:nth-child(1) { transition-delay: .12s; }
.contact.is-visible .reveal-item:nth-child(2) { transition-delay: .22s; }
.contact.is-visible .reveal-item:nth-child(3) { transition-delay: .34s; }
.contact.is-visible .reveal-item:nth-child(4) { transition-delay: .48s; }
.clone-control { pointer-events: none; }

@media (max-width: 720px) {
  .video-shell { width: 108vw; }
  .ident-meta, .sound-toggle, .contact-cue { font-size: 9px; letter-spacing: .16em; }
  .ident-meta-bottom { bottom: 30px; max-width: 48vw; line-height: 1.45; }
  .contact-cue { bottom: 30px; }
  .cue-line { width: 24px; }
  .contact { padding-inline: 22px; }
  .contact-kicker { margin-bottom: 34px; font-size: 13px; }
  .contact-wordmark { width: min(92vw, 620px); margin-bottom: 46px; }
  .contact-line {
    flex-direction: column;
    gap: 14px;
    margin-bottom: 56px;
    font-size: 13px;
  }
  .contact-icon { width: 36px; bottom: max(6px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .water, .grain, .cue-line { animation: none !important; }
  .reveal-item { filter: none !important; }
}