global.css

/**
 * Global base styles.
 *  - html/body 기본
 *  - 접근성 기본 (focus-visible, prefers-reduced-motion)
 *
 * 폰트는 `index.html` 의 `<link>` 로 로드.
 *  - Pretendard Variable (한·영 본문/서브헤딩)
 *  - Bricolage Grotesque (디스플레이 헤딩)
 *  - Caveat (스크립트 강조)
 *  - Geist Mono (코드/모노)
 */

@layer base {
  html {
    font-family: var(--font-sans);
    color: var(--color-fg);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-synthesis: none;
  }

  body {
    margin: 0;
    min-height: 100svh;
  }

  h1, h2, h3 {
    font-family: var(--font-heading);
    color: var(--color-fg-strong);
    margin: 0;
    letter-spacing: -0.01em;
  }

  h4, h5, h6 {
    font-family: var(--font-subheading);
    color: var(--color-fg-strong);
    margin: 0;
  }

  p {
    margin: 0;
  }

  code, kbd, pre, samp {
    font-family: var(--font-mono);
  }

  :focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer utilities {
  /* Hero stagger animation */
  @keyframes hero-rise {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes hero-pop {
    from {
      opacity: 0;
      transform: translateY(10px) rotate(-3deg) scale(0.92);
    }
    to {
      opacity: 1;
      transform: translateY(0) rotate(-2deg) scale(1);
    }
  }
  @keyframes laptop-rise {
    from {
      opacity: 0;
      transform: translateY(24px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes screen-glow {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
  }
  @keyframes caret-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
  }

  @keyframes modal-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes modal-pop {
    from {
      opacity: 0;
      transform: translateY(12px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* 면접 스테이지 진입 — 모니터 전원이 켜지는 듯한 모션.
     중앙의 밝은 가로 라인 → 세로로 펼쳐지며 → 밝기가 정상으로 안정. */
  @keyframes screen-power-on {
    0% {
      opacity: 0;
      transform: scale(1.02);
      filter: brightness(2) saturate(0.5) contrast(0.85);
      clip-path: inset(49.5% 0 49.5% 0);
    }
    18% {
      opacity: 1;
      filter: brightness(2.2) saturate(0.5) contrast(0.85);
      clip-path: inset(49.5% 0 49.5% 0);
    }
    55% {
      transform: scale(1.004);
      filter: brightness(1.5) saturate(0.85) contrast(0.95);
      clip-path: inset(0 0 0 0);
    }
    100% {
      opacity: 1;
      transform: scale(1);
      filter: brightness(1) saturate(1) contrast(1);
      clip-path: inset(0 0 0 0);
    }
  }
  .anim-screen-power-on {
    animation: screen-power-on 0.7s var(--ease-decelerate) both;
    transform-origin: center;
  }

  /* 음성 모드 — 재생 중 표시하는 이퀄라이저 바. */
  @keyframes eq-bar {
    0%, 100% { transform: scaleY(0.35); }
    50% { transform: scaleY(1); }
  }
  .anim-eq-bar {
    animation: eq-bar 0.9s var(--ease-standard) infinite;
    transform-origin: bottom;
  }

  .anim-modal-backdrop {
    animation: modal-fade var(--duration-normal) var(--ease-decelerate) both;
  }
  .anim-modal-panel {
    animation: modal-pop var(--duration-normal) var(--ease-decelerate) both;
  }

  .anim-hero-rise {
    animation: hero-rise 0.8s var(--ease-decelerate) both;
  }
  .anim-hero-pop {
    animation: hero-pop 0.9s var(--ease-decelerate) both;
  }
  .anim-laptop-rise {
    animation: laptop-rise 0.9s var(--ease-decelerate) both;
  }
}