@font-face {
  font-family: 'Pretendard';
  src: url('fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 45 930;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --stage: #000000;
  --ink: rgba(255, 255, 255, 0.85);
  --ink-2: rgba(255, 255, 255, 0.55);
  --ink-3: rgba(255, 255, 255, 0.3);
  --soon: #ffffff;
  --focus: #ffffff;
  --primary: #007AFF;
  --primary-hover: #0070E6;
  --primary-active: #0062CC;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --foot-h: 170px;
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --stage: #ffffff;
    --ink: rgba(0, 0, 0, 0.85);
    --ink-2: rgba(0, 0, 0, 0.55);
    --ink-3: rgba(0, 0, 0, 0.3);
    --soon: #1C1C1E;
    --focus: #007AFF;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--stage); }
body {
  color: var(--ink);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}

#sky { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

.page { position: relative; z-index: 1; min-height: 100dvh; display: flex; flex-direction: column; }
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px 32px;
}
@media (min-width: 768px) and (min-height: 700px) {
  .hero { padding-top: calc(var(--foot-h) + 8px); padding-bottom: 8px; }
}
.lockup { display: flex; flex-direction: column; align-items: center; }
.stage { height: clamp(240px, 46vh, 480px); aspect-ratio: 224 / 243; }

.soon {
  margin: clamp(14px, 2.4vh, 24px) 0 0;
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--soon);
  transition: color 0.35s var(--ease);
}
.soon-dots .soon:not(.soon-done) { color: transparent; }

.cta {
  margin-top: clamp(28px, 4.5vh, 44px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px 0 28px;
  border-radius: 9999px;
  background: var(--primary);
  color: #ffffff;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background-color 0.3s var(--ease), transform 0.5s var(--ease);
}
.cta svg { transition: transform 0.5s var(--ease); }
.cta:hover { background: var(--primary-hover); transform: scale(1.02); }
.cta:hover svg { transform: translateX(3px); }
.cta:active { background: var(--primary-active); transform: scale(0.98); }
.cta:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

@keyframes rise {
  from { opacity: 0; transform: translateY(1.2rem); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}
.intro .rise { animation: rise 0.5s var(--ease) both; animation-delay: calc(500ms + var(--i, 0) * 100ms); }
.rise-2 { --i: 2; }

footer.site {
  position: relative;
  z-index: 1;
  padding: 20px 24px 32px;
  text-align: center;
  font-size: 12px;
  line-height: 1.8;
  font-weight: 400;
  color: var(--ink-2);
  letter-spacing: -0.01em;
}
.foot-name { margin: 0 0 4px; font-size: 13px; font-weight: 500; color: var(--ink); }
.foot-row { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; padding: 0; }
.foot-row li + li::before { content: "·"; margin: 0 8px; color: var(--ink-3); }
.foot-row b { font-weight: 500; color: var(--ink); }
.foot-links { margin: 6px 0 0; }
.foot-links a { color: var(--ink); font-weight: 500; text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.foot-links a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.foot-copy { margin: 8px 0 0; color: var(--ink-3); }

@media (max-width: 480px) {
  .hero { padding-top: 32px; }
  .stage { height: clamp(200px, 36vh, 320px); }
  .soon { font-size: 30px; }
  .foot-row { flex-direction: column; }
  .foot-row li + li::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .intro .rise { animation: none; }
  .cta, .cta svg { transition: none; }
}