/*
  Local font integration point.
  Run INSTALL_OFFICIAL_PRETENDARD_FONT.ps1 once to place the official WOFF2 file here:
  APP/fonts/PretendardVariable.woff2
  Until then, the app safely falls back to installed Korean system fonts.
*/
@font-face {
  font-family: "Pretendard Variable";
  src: local("Pretendard Variable"),
       url("../../fonts/PretendardVariable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 45 920;
  font-display: swap;
}

.consonant-intro__background {
      position: absolute;
      inset: 0;
      z-index: 0;
      background-image: url("../../assets/runtime/1232514d13f25928.png");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

.consonant-intro[hidden] { display: none !important; }
.consonant-intro.is-active {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #071037;
}

.consonant-intro__content {
  position: relative;
  z-index: 20;
  display: flex;
  width: min(92%, 1320px);
  height: 100%;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 4.2% 3% 3%;
  text-align: center;
  pointer-events: none;
}

.consonant-intro__title {
  display: block;
  width: min(92%, 1180px);
  max-height: 47%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 12px 7px rgba(0, 0, 0, .38));
}

.consonant-intro__subtitle {
  margin: clamp(-8px, -0.6vw, -2px) 0 0;
  color: #fff4a8;
  font-family: "Pretendard Variable", Pretendard, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  font-size: clamp(1.45rem, 3.4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.2;
  text-shadow:
    0 4px 0 rgba(8, 19, 59, .82),
    0 0 12px rgba(255, 237, 121, .72),
    0 0 24px rgba(93, 206, 255, .34);
  white-space: nowrap;
}

.consonant-intro__start {
  min-width: min(80%, 390px);
  min-height: clamp(58px, 7.2vw, 84px);
  margin-top: clamp(22px, 3.2vw, 46px);
  padding: .72em 1.65em;
  border: 4px solid rgba(255,255,255,.94);
  border-radius: 999px;
  color: #132d70;
  background: linear-gradient(145deg, #fff5a6, #7eeaff 62%, #d9a6ff);
  box-shadow:
    0 8px 0 #455bb4,
    0 15px 32px rgba(0,0,0,.34),
    inset 0 2px 0 rgba(255,255,255,.82);
  font-family: "Pretendard Variable", Pretendard, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  font-size: clamp(1.08rem, 2.15vw, 1.75rem);
  font-weight: 850;
  letter-spacing: .02em;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 150ms ease, filter 150ms ease, box-shadow 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
.consonant-intro__start:hover,
.consonant-intro__start:focus-visible {
  transform: translateY(-4px) scale(1.035);
  filter: brightness(1.07);
  outline: 5px solid rgba(255,247,150,.78);
  outline-offset: 5px;
  box-shadow: 0 11px 0 #455bb4, 0 19px 38px rgba(0,0,0,.36);
}
.consonant-intro__start:active {
  transform: translateY(4px) scale(.995);
  box-shadow: 0 3px 0 #455bb4, 0 8px 18px rgba(0,0,0,.30);
}

/* Original integrated-intro star and meteor effects. */
.consonant-intro__effects {
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
}
.twinkle {
  position: absolute;
  width: clamp(11px, 1.45vw, 24px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 253, 190, 0.96);
  box-shadow: 0 0 7px rgba(255,255,230,.92), 0 0 16px rgba(255,246,143,.74), 0 0 26px rgba(124,220,255,.34), 0 0 36px rgba(255,154,235,.16);
  filter: brightness(1.06);
  animation: consonant-intro-twinkle 1.85s ease-in-out infinite alternate;
}
.twinkle::before,
.twinkle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(255,253,190,.76);
  box-shadow: 0 0 8px rgba(255,246,143,.56);
}
.twinkle::before { width: 320%; height: 18%; }
.twinkle::after { width: 18%; height: 320%; }
.twinkle.t1 { left: 11%; top: 11%; animation-delay: 0s; }
.twinkle.t2 { left: 29%; top: 24%; animation-delay: .18s; }
.twinkle.t3 { left: 66%; top: 12%; animation-delay: .44s; }
.twinkle.t4 { left: 86%; top: 29%; animation-delay: .70s; }
.twinkle.t5 { left: 58%; top: 63%; animation-delay: .32s; }
@keyframes consonant-intro-twinkle {
  from { transform: scale(.62) rotate(0deg); opacity: .34; }
  48% { transform: scale(1.04) rotate(4deg); opacity: .82; }
  to { transform: scale(1.18) rotate(8deg); opacity: .9; }
}
.meteor {
  position: absolute;
  left: -42%;
  top: 14%;
  width: 40%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, rgba(130,222,255,.06) 12%, rgba(130,222,255,.32) 34%, rgba(255,255,255,.96) 68%, rgba(255,244,143,.92) 84%, rgba(255,130,220,.88) 100%);
  filter: drop-shadow(0 0 8px rgba(255,255,255,.92)) drop-shadow(0 0 16px rgba(113,219,255,.62)) drop-shadow(0 0 26px rgba(255,183,76,.48)) drop-shadow(0 0 34px rgba(255,130,220,.28));
  transform: rotate(-18deg);
  opacity: 0;
  animation: consonant-intro-meteor 4.8s cubic-bezier(.18,.04,.25,1) infinite;
}
.meteor::before {
  content: "";
  position: absolute;
  left: 22%; right: 3%; top: 50%;
  height: 2px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: rgba(255,255,255,.62);
  box-shadow: 0 0 8px rgba(255,255,255,.62);
}
.meteor::after {
  content: "";
  position: absolute;
  right: -7px; top: 50%;
  width: 18px; height: 18px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.96);
  box-shadow: 0 0 10px rgba(255,255,255,.96), 0 0 22px rgba(255,238,128,.72), 0 0 34px rgba(118,220,255,.54), 0 0 42px rgba(255,128,224,.26);
}
.meteor.m2 { top: 42%; left: -46%; width: 44%; animation-delay: 2.6s; animation-duration: 5.6s; }
@keyframes consonant-intro-meteor {
  0% { transform: translate(-18%, -12%) rotate(-18deg); opacity: 0; }
  5%, 18% { opacity: .82; }
  34% { transform: translate(435%, 164%) rotate(-18deg); opacity: .78; }
  46%, 100% { transform: translate(610%, 232%) rotate(-18deg); opacity: 0; }
}

@media (max-width: 700px) {
  .consonant-intro__title { width: 96%; max-height: 43%; }
  .consonant-intro__subtitle { letter-spacing: .09em; }
  .consonant-intro__start { min-width: min(88%, 360px); }
}
@media (prefers-reduced-motion: reduce) {
  .twinkle, .meteor { animation: none !important; }
  .meteor { display: none; }
  .consonant-intro__start { transition: none; }
}