@font-face {
  font-family: "LeeSeoyun";
  src: url("assets/fonts/LeeSeoyun-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ownglyph GeungJeong";
  src: url("assets/fonts/Ownglyph-GeungJeong-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "KCC Imkwontaek";
  src: url("assets/fonts/KCC-Imkwontaek-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body.intro-body {
  background: #fefefe;
}

/* Held opaque-white until fonts + assets are ready, so nothing flashes
   in an unstyled state before the reveal sequence takes over. */
.intro-stage-wrap {
  background: #fefefe;
  opacity: 0;
  transition: opacity 200ms ease;
}

.intro-stage-wrap.is-ready {
  opacity: 1;
}

/* .figma-stage already gives us the fixed 2560x1440 canvas scaled to fit
   any viewport via --fx-scale (see styles.css / app.js's fitFigmaStage
   pattern) — reused as-is since the Intro is a single full-bleed
   composition with no separate mobile design source. */
.intro-dolly {
  position: absolute;
  inset: 0;
  transform: scale(1.38);
  transform-origin: 50% 58%;
}

.intro-stage-wrap.is-dolly-out .intro-dolly {
  transform: scale(1);
  transition: transform 1700ms cubic-bezier(0.33, 1, 0.68, 1);
}

.intro-im,
.intro-reos,
.intro-spark {
  position: absolute;
  display: block;
  overflow: visible;
}

/* Every wordmark/spark/button-art path is now a genuine pen stroke (drawn
   in Figma with the pen tool), not a filled brush-blob outline -- fill:none
   is the actual final look, not a transient state before a crossfade. */
.ink-stroke {
  fill: none;
}

.intro-subtitle {
  position: absolute;
  margin: 0;
  font-family: "Ownglyph GeungJeong", "LeeSeoyun", cursive;
  font-size: 47.14px;
  letter-spacing: -1.41px;
  color: #818181;
  white-space: nowrap;
}

.intro-subtitle .accent {
  color: #4e02ff;
}

.intro-ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  white-space: pre;
}

.intro-subtitle.is-typing .intro-ch {
  animation: intro-ch-in 220ms ease forwards;
  animation-delay: calc(var(--i) * 28ms);
}

@keyframes intro-ch-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.intro-btn {
  position: absolute;
  display: block;
  text-decoration: none;
  opacity: 0;
  transform: translateY(18px) scale(0.94);
}

.intro-stage-wrap.is-button-in .intro-btn {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 420ms ease, transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.intro-btn-oval,
.intro-btn-arrow {
  position: absolute;
  inset: 0;
  display: block;
  overflow: visible;
  pointer-events: none;
}

.intro-btn-label {
  position: absolute;
  left: 58px;
  top: 76px;
  font-family: "KCC Imkwontaek", cursive;
  font-size: 47.14px;
  letter-spacing: -1.41px;
  color: #818181;
  white-space: nowrap;
}

.intro-stage-wrap.is-button-in .intro-btn-arrow {
  animation: intro-arrow-nudge 2.2s ease-in-out infinite;
  animation-delay: 700ms;
}

@keyframes intro-arrow-nudge {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-6px, 6px);
  }
}

@media (max-width: 768px) {
  .intro-btn-label {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-dolly {
    transform: scale(1);
    transition: none;
  }

  .intro-stage-wrap.is-button-in .intro-btn-arrow {
    animation: none;
  }

  .intro-ch {
    transition: none;
  }
}