/**
 * 전역 커스텀 스타일
 * - 원본 app/globals.css 의 본문/폰트 클래스
 * - 원본 app/page.tsx styled-jsx 의 진입 애니메이션 (reveal / shimmer)
 */

:root {
  --background: #ffffff;
  --foreground: #171717;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-suit), Arial, Helvetica, sans-serif;
}

.font-suit {
  font-family: var(--font-suit), Arial, Helvetica, sans-serif;
}

.font-tenor {
  font-family: var(--font-tenor-sans), "Times New Roman", serif;
}

.font-42dot {
  font-family: var(--font-42dot-sans), var(--font-suit), system-ui, sans-serif;
}

/* ---------- 진입 애니메이션 (원본 page.tsx styled-jsx) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal-1,
  .reveal-2,
  .reveal-3,
  .reveal-4,
  .reveal-5,
  .reveal-6 {
    opacity: 0;
    transform: translateY(10px);
    animation: revealUp 0.7s ease-out forwards;
  }

  .reveal-2 { animation-delay: 0.08s; }
  .reveal-3 { animation-delay: 0.14s; }
  .reveal-4 { animation-delay: 0.2s; }
  .reveal-5 { animation-delay: 0.26s; }
  .reveal-6 { animation-delay: 0.32s; }

  .shimmer-bar {
    background-size: 160% 100%;
    animation: shimmerMove 4.8s ease-in-out infinite;
  }
}

@keyframes revealUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmerMove {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}