@tailwind base;
@tailwind components;
@tailwind utilities;

/* Pretendard Font Configuration */
@layer base {
  html {
    font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  }

  body {
    font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
    font-feature-settings: 'cv01', 'cv02', 'cv03', 'cv04';
    font-variation-settings: 'wght' 400;
  }

  /* Font weight variations */
  .font-light {
    font-variation-settings: 'wght' 300;
  }

  .font-normal {
    font-variation-settings: 'wght' 400;
  }

  .font-medium {
    font-variation-settings: 'wght' 500;
  }

  .font-semibold {
    font-variation-settings: 'wght' 600;
  }

  .font-bold {
    font-variation-settings: 'wght' 700;
  }

  .font-extrabold {
    font-variation-settings: 'wght' 800;
  }
}

/* Hero Section Animations */
@layer utilities {
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(30px);
    }

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

  .animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out;
  }

  .hero-background {
    background-image: url("/assets/hero-background-ac06894e.png");
  }

  /* Logo Animation */
  .logo-container {
    transition: all 0.4s ease;
    position: relative;
  }

  .group:hover .logo-container {
    transform: translateX(-20px);
  }

  .logo-text-hidden {
    transform: translateY(100%);
    opacity: 0;
    transition: all 0.3s ease;
  }

  .group:hover .logo-text-hidden {
    transform: translateY(0);
    opacity: 1;
  }

  /* 호버 중간에 빠져나가면 즉시 애니메이션 종료 */
  .group:not(:hover) .logo-text-hidden {
    transform: translateY(100%);
    opacity: 0;
    transition: all 0.2s ease;
  }

  .logo-text-s {
    transition: all 0.4s ease, color 0.5s ease, background 0.5s ease;
    transition-delay: 100ms;
  }

  .logo-text-h {
    transition: all 0.4s ease, color 0.5s ease, background 0.5s ease;
    transition-delay: 150ms;
  }

  .logo-text-o1 {
    transition: all 0.4s ease, color 0.5s ease, background 0.5s ease;
    transition-delay: 200ms;
  }

  .logo-text-r1 {
    transition: all 0.4s ease, color 0.5s ease, background 0.5s ease;
    transition-delay: 250ms;
  }

  .logo-text-t {
    transition: all 0.4s ease, color 0.5s ease, background 0.5s ease;
    transition-delay: 300ms;
  }

  .logo-text-f {
    transition: all 0.4s ease, color 0.5s ease, background 0.5s ease;
    transition-delay: 350ms;
  }

  .logo-text-o2 {
    transition: all 0.4s ease, color 0.5s ease, background 0.5s ease;
    transition-delay: 400ms;
  }

  .logo-text-r2 {
    transition: all 0.4s ease, color 0.5s ease, background 0.5s ease;
    transition-delay: 450ms;
  }

  .logo-text-m {
    transition: all 0.4s ease, color 0.5s ease, background 0.5s ease;
    transition-delay: 500ms;
  }

  .logo-subtext {
    transition: all 0.4s ease, color 0.5s ease;
    transition-delay: 550ms;
  }

  /* 호버 중간에 빠져나가면 즉시 애니메이션 종료 */
  .group:not(:hover) .logo-text-s,
  .group:not(:hover) .logo-text-h,
  .group:not(:hover) .logo-text-o1,
  .group:not(:hover) .logo-text-r1,
  .group:not(:hover) .logo-text-t,
  .group:not(:hover) .logo-text-f,
  .group:not(:hover) .logo-text-o2,
  .group:not(:hover) .logo-text-r2,
  .group:not(:hover) .logo-text-m,
  .group:not(:hover) .logo-subtext {
    transition: all 0.2s ease, color 0.5s ease, background 0.5s ease;
    transition-delay: 0ms;
  }

  /* Animated Background */
  .animated-background {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
  }

  @keyframes blob-float {
    0%, 100% {
      transform: translate(0, 0) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
  }

  .gradient-blob {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
    animation: blob-float 20s ease-in-out infinite;
  }

  .gradient-blob-1 {
    background: linear-gradient(45deg, #3b82f6, #8b5cf6);
    top: 10%;
    left: 10%;
    animation-delay: 0s;
  }

  .gradient-blob-2 {
    background: linear-gradient(45deg, #8b5cf6, #ec4899);
    top: 60%;
    right: 10%;
    animation-delay: 5s;
  }

  .gradient-blob-3 {
    background: linear-gradient(45deg, #ec4899, #f97316);
    bottom: 10%;
    left: 30%;
    animation-delay: 10s;
  }
}