/* 헤더 · 힌트 · 진입 애니메이션 · 플래시 */
/* 헤더 */
.header {
  position: fixed; top: 0; left: 0; right: 0;
  padding: 28px 48px;
  display: flex; align-items: center; justify-content: space-between;
  z-index: 20; pointer-events: none;
}
.header-logo { display: flex; align-items: center; gap: 12px; }
.header-logo img { height: 36px; filter: brightness(0) invert(1) opacity(.9); }
.header-logo-t { font-size: 18px; font-weight: 700; color: rgba(255,255,255,.9); letter-spacing: -.01em; }
.header-sub { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.28); }

/* 힌트 */
.hint {
  position: fixed; bottom: 36px; left: 50%;
  transform: translateX(-50%);
  z-index: 20; text-align: center; pointer-events: none;
  animation: hintfade 2.5s ease-in-out infinite;
}
@keyframes hintfade { 0%,100%{opacity:.25} 50%{opacity:.6} }
.hint span { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.5); }

/* 진입 애니메이션 */
.panel { opacity: 0; animation: panelin 1.1s cubic-bezier(.25,.46,.45,.94) forwards; }
.panel-raw   { animation-delay: .1s; }
.panel-glove { animation-delay: .25s; }
@keyframes panelin { from{opacity:0;transform:scale(1.04)} to{opacity:1;transform:scale(1)} }

/* 플래시 */
.flash {
  position: fixed; inset: 0; background: #fff;
  z-index: 9999; opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
}
.flash.on { opacity: 1; pointer-events: all; }