/* HYUNU: riding a glass elevator down through a rainy Korean night. Each link is a lit floor sign. */

@font-face { font-family: "Signboard"; src: url("assets/display.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Signboard"; src: url("assets/hangul-a.woff2") format("woff2"); font-display: swap; unicode-range: U+D604; }
@font-face { font-family: "Signboard"; src: url("assets/hangul-b.woff2") format("woff2"); font-display: swap; unicode-range: U+C6B0; }
@font-face { font-family: "Elevator"; src: url("assets/led.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Plain"; src: url("assets/body-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plain"; src: url("assets/body-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --void: #07030f;
  --shaft: #0a0512;
  --led: #ff8a57;
  --paper: #fff3df;
  --ink: #170a33;
  --espresso: #331708;
  --tiktok: #ff2e93;
  --instagram: #ffc22e;
  --facebook: #2bd9f5;
  --youtube: #ff6b4a;
  --glow: #ff4fb0;
  --steel-hi: #cfd0dc;
  --steel: #6d6c7f;
  --steel-lo: #1f1c2b;
  --display: "Signboard", "Arial Black", Impact, sans-serif;
  --led-font: "Elevator", ui-monospace, Menlo, Consolas, monospace;
  --body: "Plain", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --gutter: 16px;
  --rail: 7px;
  --page: min(100vw, 640px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--void); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--paper);
  font: 400 1rem/1.45 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img, canvas { display: block; }
[hidden] { display: none !important; }
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
a:focus-visible, button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* The window */
.sky {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: 100vh; height: 100lvh;
  z-index: -1;
  background: var(--void) url("assets/night.webp") center / cover no-repeat;
}
.sky__rain { width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease; }
.sky__rain.is-on { opacity: 1; }

/* Elevator display */
.lift {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  height: 42px;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  background: linear-gradient(#17121f, var(--shaft) 40%, #05020a);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.09), 0 8px 22px rgba(0, 0, 0, 0.55);
}
.lift__floor, .lift__ticker {
  position: relative;
  height: 28px;
  color: var(--led);
  background: #120406;
  border-radius: 3px;
  box-shadow: inset 0 1px 4px #000, 0 1px 0 rgba(255, 255, 255, 0.08);
  font: 400 0.9375rem/28px var(--led-font);
  letter-spacing: 0.08em;
  text-shadow: 0 0 7px rgba(255, 106, 61, 0.85);
  overflow: hidden;
}
/* The dark grid that turns plain type into a dot-matrix panel */
.lift__floor::after, .lift__ticker::after, .led::after, .doors__led::after {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 1px 1px, transparent 0.65px, rgba(8, 2, 4, 0.34) 0.95px) 0 0 / 2px 2px;
  pointer-events: none;
}
.lift__floor { display: flex; gap: 6px; flex: none; padding: 0 9px; }
.lift__arrow { font-size: 0.6875rem; animation: nudge 1.6s ease-in-out infinite; }
.lift__ticker { display: flex; justify-content: space-between; gap: 18px; flex: 1 1 auto; min-width: 0; padding: 0 9px; white-space: nowrap; }
.lift__welcome { overflow: hidden; text-overflow: clip; }
.lift__clock { flex: none; }

.page { position: relative; width: 100%; max-width: 640px; margin: 0 auto; }

/* Hero */
.hero {
  position: relative;
  padding: 22px var(--gutter) 20px;
  background: linear-gradient(rgba(7, 3, 15, 0.78), rgba(7, 3, 15, 0.62) 72%, transparent);
}
.neon {
  display: flex; justify-content: space-between;
  font: 400 calc((var(--page) - 2 * var(--gutter)) / 3.74)/0.94 var(--display);
  color: #fff7fc;
  /* Face glow first, then the metal return of a channel letter, then the halo on the wall. */
  text-shadow:
    0 0 2px #fff,
    0 0 9px #ff9ad6,
    1px 1px 0 #b32a7d,
    2px 2px 0 #8c1f63,
    3px 3px 0 #66164a,
    4px 4px 0 #461034,
    5px 6px 2px rgba(0, 0, 0, 0.55),
    0 0 20px var(--glow),
    0 0 46px rgba(255, 79, 176, 0.62),
    0 0 96px rgba(255, 79, 176, 0.34);
}
.neon span { display: block; animation: strike 1.2s linear both; }
.neon span:nth-child(1) { animation-delay: 0.04s; }
.neon span:nth-child(2) { animation-delay: 0.16s; }
.neon span:nth-child(3) { animation-delay: 0.02s; }
.neon span:nth-child(4) { animation-delay: 0.22s; }
.neon span:nth-child(5) { animation: strike 1.2s linear 0.3s both, dying 11s linear 3s infinite; }

.hero__row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 48px;
  gap: 13px;
  align-items: start;
  margin-top: 18px;
}
.badge {
  position: relative;
  width: 96px; height: 96px;
  padding: 3px;
  border-radius: 50%;
  isolation: isolate;
}
.badge::before {
  content: "";
  position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; z-index: -1;
  border-radius: 50%;
  background: conic-gradient(var(--tiktok), var(--facebook), #8a5bff, var(--tiktok));
  filter: blur(1px);
  box-shadow: 0 0 24px rgba(43, 217, 245, 0.55);
  animation: spin 7s linear infinite;
}
.badge__img { width: 100%; height: 100%; border-radius: 50%; background: var(--void); }
.hero__bio {
  font-size: 1.0625rem; line-height: 1.3; font-weight: 700;
  text-shadow: 0 1px 10px rgba(7, 3, 15, 0.95);
}
.hero__say {
  margin-top: 7px;
  font: 400 0.8125rem/1.3 var(--led-font);
  color: var(--instagram);
  text-shadow: 0 0 8px rgba(255, 194, 46, 0.55), 0 1px 6px #000;
}
/* A vertical shop sign on a bracket, the way Korean street signs hang */
.hanger {
  position: relative;
  display: grid; justify-items: center; gap: 3px;
  margin-top: 8px;
  padding: 9px 0 10px;
  color: var(--ink);
  font: 400 1.875rem/1.04 var(--display);
  border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0.95) 38%, rgba(255, 255, 255, 0.95) 62%, rgba(255, 255, 255, 0) 92%),
    #ffd9a8;
  box-shadow:
    0 0 0 2px var(--steel-lo),
    0 0 0 3px var(--steel),
    0 0 22px rgba(255, 217, 168, 0.75),
    0 12px 30px -8px rgba(255, 190, 110, 0.75);
  animation: light-up 0.5s ease-out 0.42s both;
}
.hanger::before {
  content: "";
  position: absolute; top: -14px; left: 50%; width: 3px; height: 12px; margin-left: -1.5px;
  background: linear-gradient(90deg, var(--steel-hi), var(--steel-lo));
}

/* The building */
.building { position: relative; padding: 14px var(--gutter) 0; }
/* Two steel conduits run the height of the building and carry power to every sign */
.building::before, .building::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: var(--rail);
  background: linear-gradient(90deg, #0b0812, var(--steel) 34%, var(--steel-hi) 46%, #2b2838 74%, #08060e);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}
.building::before { left: 3px; }
.building::after { right: 3px; }
.building__title {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
  font: 400 0.9375rem/1.2 var(--led-font);
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--paper);
  text-shadow: 0 1px 8px #000;
}
.building__rule { flex: 1; height: 1px; background: rgba(255, 243, 223, 0.32); }
.floors { display: grid; gap: 11px; }
.floor { position: relative; }
/* Mounting brackets from the sign to the conduits */
.floor::before, .floor::after {
  content: "";
  position: absolute; top: 18px;
  width: 10px; height: 8px;
  background: linear-gradient(#a8a8b8, #33303f);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.7);
}
.floor::before { left: -8px; }
.floor::after { right: -8px; }

/* Acrylic lightbox: two fluorescent tubes behind the face and a dark steel frame around it */
.sign {
  --c: var(--paper);
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 11px;
  min-height: 84px;
  padding: 11px 15px 11px 13px;
  border-radius: 5px;
  color: var(--ink);
  text-decoration: none;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.2) 30%,
      rgba(255, 255, 255, 0.12) 50%,
      rgba(255, 255, 255, 0.2) 70%,
      rgba(255, 255, 255, 0.02) 100%),
    radial-gradient(100% 170% at 50% 50%, transparent 62%, rgba(25, 3, 40, 0.3) 100%),
    var(--c);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 0 0 2px #15121d,
    0 0 0 3px #62606f,
    0 0 0 4px #15121d,
    0 0 34px -2px var(--c),
    0 20px 34px -14px var(--c);
  -webkit-tap-highlight-color: transparent;
  animation: light-up 0.5s ease-out both;
  transition: transform 0.12s ease, filter 0.12s ease;
  overflow: hidden;
}
/* Glass sheen that crosses a sign when it lights or when you touch it */
.sign::after {
  content: "";
  position: absolute; top: -20%; bottom: -20%; left: -40%; width: 26%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg) translateX(-120%);
  pointer-events: none;
}
.sign:hover::after, .sign:focus-visible::after { animation: sheen 0.7s ease-out; }
.sign:hover { filter: brightness(1.08); }
.sign:active { transform: translateY(2px) scale(0.985); filter: brightness(0.86); }

.led {
  position: relative;
  display: grid; place-items: center;
  height: 44px;
  overflow: hidden;
  background: #120406;
  color: var(--led);
  border-radius: 3px;
  box-shadow: inset 0 1px 5px #000, 0 1px 0 rgba(255, 255, 255, 0.5);
  font: 400 1.1875rem/1 var(--led-font);
  text-shadow: 0 0 8px rgba(255, 106, 61, 0.95);
}
.sign__body { display: grid; gap: 3px; min-width: 0; }
.sign__body strong {
  font: 400 clamp(1.75rem, 8vw, 2.25rem)/1.02 var(--display);
  letter-spacing: 0.005em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.sign__body small {
  display: flex; flex-wrap: wrap; gap: 0 9px;
  font-size: 0.875rem; line-height: 1.25; font-weight: 700;
}
.sign__go { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: square; }

.sign--tiktok { --c: var(--tiktok); animation-delay: 0.5s; }
.sign--instagram { --c: var(--instagram); animation: light-up 0.5s ease-out 0.58s both, tired-tube 13s linear 5s infinite; }
.sign--facebook { --c: var(--facebook); animation-delay: 0.66s; }
.sign--youtube { --c: var(--youtube); animation-delay: 0.74s; }
.sign--cafe {
  --c: #ffe9c6;
  color: var(--espresso);
  border-radius: 0 0 5px 5px;
  animation-delay: 0.82s;
}
.sign--cafe .sign__body strong { font-size: min(calc((var(--page) - 154px) / 8.95), 2.125rem); white-space: nowrap; }

/* Ground-floor cafe */
.cafe { margin-top: 8px; }
.cafe::before, .cafe::after { top: 40px; }
.cafe__awning {
  position: relative; z-index: 1;
  height: 26px;
  margin: 0 -3px -1px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.28)),
    repeating-linear-gradient(90deg, #d4246f 0 24px, #fff0d8 24px 48px);
  border-radius: 5px 5px 0 0;
  box-shadow: 0 0 0 1px #15121d;
}
/* Scalloped edge of the canvas */
.cafe__awning::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -7px; height: 8px;
  background:
    radial-gradient(circle at 12px 0, #a81a57 11px, transparent 11.5px) 0 0 / 48px 8px repeat-x,
    radial-gradient(circle at 12px 0, #cdbfa8 11px, transparent 11.5px) 24px 0 / 48px 8px repeat-x;
}
.cup { width: 26px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cup__steam { opacity: 0.7; animation: steam 2.6s ease-in-out infinite; }
.cup__steam--2 { animation-delay: 0.7s; }
.cafe__help {
  position: relative; z-index: 1;
  display: grid; gap: 8px;
  margin-top: 14px;
  padding: 12px 13px;
  border-radius: 5px;
  background: rgba(7, 3, 15, 0.8);
  font-size: 0.875rem;
}
.cafe__copy {
  justify-self: start;
  min-height: 44px;
  padding: 0 14px;
  border: 2px solid var(--paper);
  border-radius: 4px;
  background: transparent;
  color: var(--paper);
  font: 700 0.9375rem/1 var(--body);
  cursor: pointer;
}

/* Wet asphalt with every sign reflected in it */
.street {
  position: relative;
  padding: 92px var(--gutter) calc(30px + env(safe-area-inset-bottom));
  overflow: hidden;
  background: linear-gradient(transparent, rgba(4, 2, 10, 0.86) 34%, #04020a 62%);
}
/* Sign colors pulled down the wet road in long soft streaks */
.street::before {
  content: "";
  position: absolute; top: 40px; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg,
    transparent 5%,
    rgba(255, 225, 180, 0.6) 14%, rgba(255, 225, 180, 0.7) 30%,
    rgba(212, 36, 111, 0.55) 44%,
    rgba(255, 225, 180, 0.55) 60%, rgba(43, 217, 245, 0.4) 74%,
    rgba(255, 225, 180, 0.5) 86%, transparent 95%);
  -webkit-mask-image: linear-gradient(transparent, #000 14%, rgba(0, 0, 0, 0.3) 52%, transparent 92%);
  mask-image: linear-gradient(transparent, #000 14%, rgba(0, 0, 0, 0.3) 52%, transparent 92%);
  filter: blur(9px);
  animation: shimmer 5s ease-in-out infinite alternate;
}
.street__line {
  position: relative;
  font: 400 1.625rem/1.12 var(--display);
  text-shadow: 0 2px 16px #000, 0 0 2px #000;
}
.street__fine { position: relative; margin-top: 12px; font-size: 0.8125rem; color: var(--paper); text-shadow: 0 1px 6px #000; }

/* Elevator doors, closed on the way to another floor */
.doors { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 20; visibility: hidden; pointer-events: none; }
.doors__panel {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent 8%, transparent 92%, rgba(0, 0, 0, 0.5)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, rgba(0, 0, 0, 0.05) 1px 3px),
    linear-gradient(115deg, #4b4a58, #9b9aab 32%, #55546a 56%, #8b8a9c 78%, #3f3e4d);
  transition: transform 0.34s cubic-bezier(0.55, 0, 0.3, 1);
}
.doors__panel--l { left: 0; transform: translateX(-101%); box-shadow: inset -2px 0 0 #1b1a24; }
.doors__panel--r { right: 0; transform: translateX(101%); box-shadow: inset 2px 0 0 #1b1a24; }
.doors__led {
  position: absolute; top: 50%; left: 50%;
  width: 96px; height: 56px; margin: -28px 0 0 -48px;
  overflow: hidden;
  background: #120406;
  border-radius: 4px;
  box-shadow: 0 0 0 3px #15121d, inset 0 1px 6px #000;
  color: var(--led);
  font: 400 2rem/56px var(--led-font);
  text-align: center;
  text-shadow: 0 0 10px rgba(255, 106, 61, 0.95);
  opacity: 0;
  transition: opacity 0.1s linear 0.26s;
}
.doors.is-closed { visibility: visible; pointer-events: auto; }
.doors.is-closed .doors__panel { transform: none; }
.doors.is-closed .doors__led { opacity: 1; }

/* Desktop: the name on the left, the building on the right */
@media (min-width: 1040px) {
  :root { --side: min(calc(100vw - 588px), 652px); }
  .page {
    display: grid;
    grid-template-columns: var(--side) 460px;
    grid-template-rows: 1fr auto;
    justify-content: center;
    max-width: none;
    min-height: calc(100vh - 42px);
    column-gap: 48px;
    padding: 0 40px;
  }
  .hero {
    grid-row: 1 / 3; position: sticky; top: 42px; align-self: start;
    display: grid; align-content: center;
    min-height: calc(100vh - 42px);
    padding: 40px 0;
    background: radial-gradient(72% 44% at 50% 50%, rgba(7, 3, 15, 0.72), transparent);
  }
  .neon { font-size: calc(var(--side) / 3.74); }
  .hero__row { grid-template-columns: 132px minmax(0, 1fr) 66px; gap: 22px; margin-top: 30px; }
  .badge { width: 132px; height: 132px; padding: 4px; }
  .hero__bio { font-size: 1.375rem; }
  .hero__say { font-size: 1rem; }
  .hanger { font-size: 2.625rem; margin-top: 10px; }
  .building { padding: 40px 24px 0; }
  .sign__body strong { font-size: 2.125rem; }
  .sign--cafe .sign__body strong { font-size: 1.9375rem; }
  .street {
    padding: 92px 24px 34px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  }
}

@keyframes strike {
  0%, 10% { opacity: 0.08; text-shadow: none; }
  12%, 18% { opacity: 1; }
  20%, 34% { opacity: 0.16; text-shadow: none; }
  36%, 41% { opacity: 1; }
  43%, 52% { opacity: 0.32; text-shadow: none; }
  54%, 100% { opacity: 1; }
}
@keyframes dying {
  0%, 91%, 93%, 95.5%, 100% { opacity: 1; }
  92%, 94%, 95% { opacity: 0.38; }
}
@keyframes tired-tube {
  0%, 95%, 96.4%, 97.6%, 100% { filter: none; }
  95.6%, 97% { filter: brightness(0.74); }
}
@keyframes light-up {
  0% { opacity: 0.2; filter: saturate(0.2) brightness(0.45); }
  45% { opacity: 1; filter: saturate(0.6) brightness(0.7); }
  55% { opacity: 0.7; filter: saturate(0.4) brightness(0.5); }
  100% { opacity: 1; filter: none; }
}
@keyframes sheen { to { transform: skewX(-18deg) translateX(620%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes nudge { 50% { transform: translateY(2px); } }
@keyframes steam { 0%, 100% { opacity: 0.25; transform: translateY(2px); } 50% { opacity: 0.85; transform: translateY(-1px); } }
@keyframes shimmer { from { opacity: 0.72; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .neon span, .neon span:nth-child(5), .hanger, .sign, .sign--instagram, .badge::before,
  .lift__arrow, .cup__steam, .street::before { animation: none; }
  .sign, .doors__panel, .doors__led { transition: none; }
  .sign:hover::after, .sign:focus-visible::after { animation: none; }
}