/* ══════════ 버튼 누름 · 화면 전환 모션 ══════════ */

/* 누르는 순간: 살짝 눌리고 밝게 번쩍 */
button, .menu-card, .stage, .vcard, .scard, .tab { transition: transform 0.08s, filter 0.12s, border-color 0.12s; }
button:active, .menu-card:active, .stage:not(.locked):active, .vcard:active, .tab:active { transform: translateY(2px) scale(0.97); filter: brightness(1.35); }

/* 눌렀을 때 버튼 위를 지나가는 빛 */
button, .menu-card, .stage, .vcard { position: relative; overflow: hidden; }
.press-flash::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%; z-index: 3; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 236, 200, 0.75) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg);
  animation: sweep 0.38s ease-out forwards;
}
@keyframes sweep { to { left: 120%; } }

/* 불꽃과 충격파 (클릭 지점) */
#fx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.spark {
  position: absolute; width: 0.32em; height: 0.32em; margin: -0.16em 0 0 -0.16em; border-radius: 50%;
  background: #fff3c4; box-shadow: 0 0 0.5em 0.15em rgba(255, 160, 60, 0.9);
  animation: spark 0.45s cubic-bezier(0.2, 0.7, 0.4, 1) forwards;
}
@keyframes spark {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}
.shock {
  position: absolute; width: 1em; height: 1em; margin: -0.5em 0 0 -0.5em; border-radius: 50%;
  border: 0.18em solid rgba(255, 200, 120, 0.9); box-shadow: 0 0 0.6em rgba(255, 140, 40, 0.8);
  animation: shock 0.4s ease-out forwards;
}
@keyframes shock { from { transform: scale(0.3); opacity: 1; } to { transform: scale(5); opacity: 0; } }

/* 화면 전환: 위아래 강철 방폭문이 닫혔다 열린다 */
#shutter { position: absolute; inset: 0; pointer-events: none; z-index: 25; }
#shutter.closing, #shutter.shut { pointer-events: auto; }
#shutter .sh {
  position: absolute; left: 0; right: 0; height: 50.5%;
  background:
    radial-gradient(circle at 1.6em 1.6em, #59656a 0.22em, transparent 0.26em) 0 0 / 6em 4.5em,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 0.3em, rgba(0, 0, 0, 0.05) 0.3em 0.6em),
    linear-gradient(180deg, #2e383d, #161c20);
  box-shadow: inset 0 0 3em rgba(0, 0, 0, 0.7);
  transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.25, 1);
}
#shutter .top { top: 0; transform: translateY(-102%); }
#shutter .bot { bottom: 0; transform: translateY(102%); }
#shutter .stripe { position: absolute; left: 0; right: 0; height: 1.1em; background: repeating-linear-gradient(-45deg, #f2b632 0 1.2em, #141414 1.2em 2.4em); box-shadow: 0 0 1em rgba(0, 0, 0, 0.8); }
#shutter .top .stripe { bottom: 0; }
#shutter .bot .stripe { top: 0; }
#shutter .emblem {
  position: absolute; left: 50%; top: 50%; width: 11em; height: 11em; margin: -5.5em 0 0 -5.5em; border-radius: 50%;
  background: radial-gradient(circle, #3a464c 0 55%, #1b2226 56% 70%, #59656a 71% 74%, #1b2226 75%);
  box-shadow: 0 0 2em rgba(0, 0, 0, 0.9), inset 0 0 1em rgba(0, 0, 0, 0.8);
  display: flex; align-items: center; justify-content: center;
  font-family: 'BlackHan', sans-serif; font-size: 1.45em; color: var(--ember1, #f0782c); letter-spacing: 0.05em; text-shadow: 0 0 0.6em rgba(240, 120, 44, 0.8);
  opacity: 0; transform: scale(0.6) rotate(-90deg); transition: opacity 0.2s, transform 0.3s;
}
#shutter.closing .sh { transition: transform 0.22s cubic-bezier(0.7, 0, 0.9, 0.5); }
#shutter.closing .top, #shutter.shut .top, #shutter.closing .bot, #shutter.shut .bot { transform: translateY(0); }
#shutter.shut .emblem { opacity: 1; transform: scale(1) rotate(0deg); }
#shutter.shut { animation: jolt 0.22s ease-out; }
@keyframes jolt { 0% { transform: translateY(0.5em); } 40% { transform: translateY(-0.25em); } 70% { transform: translateY(0.1em); } 100% { transform: none; } }
#shutter.shut .top .stripe, #shutter.shut .bot .stripe { animation: stripeflash 0.25s ease-out; }
@keyframes stripeflash { 0% { filter: brightness(2.2); } 100% { filter: none; } }

/* 새 화면 등장: 아래에서 살짝 떠오르며 */
.screen.enter > * { animation: enter 0.45s cubic-bezier(0.2, 0.8, 0.25, 1) both; }
.screen.enter > *:nth-child(2) { animation-delay: 0.05s; }
.screen.enter > *:nth-child(3) { animation-delay: 0.1s; }
.screen.enter > *:nth-child(4) { animation-delay: 0.15s; }
@keyframes enter { from { opacity: 0; transform: translateY(1.2em); } to { opacity: 1; transform: none; } }
#title.enter > * { animation: none; }

/* ── 방폭문 상태(덮어쓰기): 닫힘 → 완전히 닫힘(LOADING) → 열림 ── */
#shutter .sh { transition: none; }
#shutter.closing .sh { transition: transform 0.34s cubic-bezier(0.55, 0, 0.85, 0.35); }
#shutter.closing .top, #shutter.closing .bot, #shutter.shut .top, #shutter.shut .bot { transform: translateY(0); }
#shutter.shut .sh { transition: none; }
#shutter.opening .sh { transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.3, 1); }
#shutter.opening .top { transform: translateY(-102%); }
#shutter.opening .bot { transform: translateY(102%); }
#shutter .top { height: 51%; }
#shutter .bot { height: 51%; }
#shutter.closing, #shutter.shut, #shutter.opening { pointer-events: auto; }

#shutter .emblem {
  width: auto; height: auto; margin: 0; left: 50%; top: 50%; border-radius: 0;
  transform: translate(-50%, -50%) scale(0.85); opacity: 0;
  padding: 0.55em 1.6em 0.6em; display: flex; align-items: center; gap: 0.5em;
  background: linear-gradient(180deg, #20282c, #0d1113);
  border: 2px solid #59656a; outline: 0.35em solid rgba(0, 0, 0, 0.55);
  clip-path: polygon(0.8em 0, 100% 0, 100% calc(100% - 0.8em), calc(100% - 0.8em) 100%, 0 100%, 0 0.8em);
  box-shadow: 0 0 2em rgba(0, 0, 0, 0.9), inset 0 0 1.2em rgba(0, 0, 0, 0.8);
  font-family: 'BlackHan', sans-serif; font-size: 2.4em; letter-spacing: 0.22em; color: #ffb066;
  text-shadow: 0 0 0.35em rgba(255, 120, 40, 0.9), 0 0 0.9em rgba(255, 90, 20, 0.6);
  transition: opacity 0.18s, transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1.3);
}
#shutter.shut .emblem { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#shutter.opening .emblem { opacity: 0; transform: translate(-50%, -50%) scale(0.9); transition: opacity 0.12s, transform 0.12s; }
#shutter .dots { display: inline-flex; gap: 0.18em; }
#shutter .dots i { width: 0.22em; height: 0.22em; background: #ffb066; box-shadow: 0 0 0.3em #ff7a28; animation: ld 0.9s infinite; }
#shutter .dots i:nth-child(2) { animation-delay: 0.15s; }
#shutter .dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ld { 0%, 100% { opacity: 0.2; } 40% { opacity: 1; } }
#shutter.shut { animation: jolt 0.26s ease-out; }