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

@layer components {
  .nav-link {
    @apply text-secondary font-bold relative overflow-hidden;
    transition: all 0.3s ease;
  }

  .nav-link::after {
    content: '';
    @apply absolute bottom-0 left-0 w-0 h-0.5 bg-primary;
    transition: width 0.3s ease;
  }

  .nav-link:hover::after {
    @apply w-full;
  }

  /* リップルエフェクト */
  .ripple {
    @apply absolute block rounded-full scale-0 bg-primary/30;
    animation: ripple 1s ease-out;
    width: 100px;
    height: 100px;
    transform-origin: center;
  }

  @keyframes ripple {
    from {
      transform: scale(0);
      opacity: 1;
    }
    to {
      transform: scale(4);
      opacity: 0;
    }
  }

  /* ヘッダーのスクロールアニメーション */
  header {
    @apply transition-transform duration-300 ease-in-out;
  }

  header.scroll-down {
    transform: translateY(-100%);
  }

  header.scroll-up {
    transform: translateY(0);
  }

  /* 既存のヒーローセクションのスタイル */
  #hero {
    @apply h-screen flex flex-col justify-center items-center text-center text-white;
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('/public/images/glitch.jpg');
    background-size: cover;
    background-position: center;
  }

  #hero h1 {
    @apply text-7xl mb-4 font-bold;
    animation: fadeInDown 1.2s ease-out, glowText 2s ease-in-out infinite alternate;
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
  }

  #hero p {
    @apply text-2xl font-medium opacity-0;
    animation: fadeInUp 1.2s ease-out forwards;
    animation-delay: 0.8s;
  }

  /* 既存のアニメーション */
  @keyframes fadeInDown {
    0% {
      opacity: 0;
      transform: translateY(-50px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(50px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes glowText {
    0% {
      text-shadow: 0 0 10px rgba(255,255,255,0.5);
    }
    100% {
      text-shadow: 0 0 20px rgba(255,255,255,0.8),
                   0 0 30px rgba(158, 24, 188, 0.6);
    }
  }
}

/* 全体のリセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  line-height: 1.6;
}

/* ヘッダーのスタイル */
header {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 1rem 0;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}

nav ul {
  display: flex;
  justify-content: center;
  list-style: none;
  gap: 2rem;
}

nav a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  transition: color 0.5s ease;
}

nav a:hover {
  color: rgb(158, 24, 188);
} 

top-title{
    text-decoration: none;
  color: #fff;
  font-weight: bold;
  transition: color 0.5s ease;
}
top-title a:hover{
    color: rgb(158, 24, 188); 
}