/* intro.css — 인트로 전용 스타일 */

/* 오버레이 전체 덮기 */
#intro-overlay {position: fixed;top: 0; left: 0;width: 100vw; height: 100vh;overflow: hidden;z-index: 9999;pointer-events: none;}
  
/* 리셋 */
* { margin:0; padding:0; box-sizing:border-box; }
  
/* 배경 & 레이아웃 */
body {background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);height: 100vh; overflow: hidden;font-family: 'Arial', sans-serif;}
.container {position: relative; width: 100%; height: 100%;}

  /* 파티클 */
.particle {
    position: absolute; width:6px; height:6px;
    background: radial-gradient(circle,
      rgba(255,255,255,1)   0%,
      rgba(255,255,255,0.7) 60%,
      rgba(255,255,255,0.1)100%);
    border-radius:50%; opacity:0.85;
    animation: moveToCenter 3s ease-in-out forwards;
    box-shadow:0 0 2px rgba(255,255,255,0.4);
  }
  
  @keyframes moveToCenter {
    0%   { transform:scale(0); opacity:0; }
    20%  { opacity:1; transform:scale(1); }
    80%  { opacity:1; }
    100% { opacity:1; transform:scale(1); }
  }
  
  /* 로고 */
.logo {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    font-size: 48px;
    font-weight: bold;
    color: transparent;              /* 처음에는 투명 */
    transition: color 1s ease-in-out; /* 컬러 페이드 인 */
  }
  
  
  @keyframes fadeInLogo {
    0%   { opacity:0; transform:translate(-50%,-50%) scale(0.8); }
    100% { opacity:1; transform:translate(-50%,-50%) scale(1); }
  }