:root {
  --primary: #ec4899;
  --secondary: #eab308;
}
body {
  font-family: 'Noto Sans JP', sans-serif;
  background-color: #0f0f11;
  color: #fff;
  overflow-x: hidden;
  cursor: none; /* Hide default cursor for custom one */
}
.font-rock {
  font-family: 'Rock Salt', cursive;
}

/* Noise Texture Overlay */
.noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
}

/* Custom Cursor */
#cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease, width 0.2s ease, height 0.2s ease, background-color 0.2s ease;
  z-index: 9999;
  mix-blend-mode: difference;
}
#cursor.hovered {
  width: 50px;
  height: 50px;
  background-color: rgba(236, 72, 153, 0.2);
  border-color: transparent;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #1a1a1a;
}
::-webkit-scrollbar-thumb {
  background: #e11d48;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #be123c;
}

/* Glitch Effect */
.glitch-effect {
  position: relative;
}
.glitch-effect::before,
.glitch-effect::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00000000;
}
.glitch-effect::before {
  left: 2px;
  text-shadow: -1px 0 #ff00c1;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 5s infinite linear alternate-reverse;
}
.glitch-effect::after {
  left: -2px;
  text-shadow: -1px 0 #00fff9;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim2 5s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
  0% { clip: rect(35px, 9999px, 12px, 0); }
  5% { clip: rect(78px, 9999px, 96px, 0); }
  100% { clip: rect(12px, 9999px, 64px, 0); }
}
@keyframes glitch-anim2 {
  0% { clip: rect(15px, 9999px, 82px, 0); }
  5% { clip: rect(48px, 9999px, 26px, 0); }
  100% { clip: rect(52px, 9999px, 14px, 0); }
}

/* Loader */
#loader {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.8s ease-out, visibility 0.8s;
}
.loader-text {
  font-family: 'Rock Salt', cursive;
  color: #ec4899;
  font-size: 2rem;
  animation: pulse 1s infinite;
}

/* Hero Hover Effects */
.hero-strip {
  transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s ease;
}
.hero-strip:hover {
  flex: 2;
  filter: grayscale(0%);
}
.hero-content {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
}
.hero-strip:hover .hero-content {
  opacity: 1;
  transform: translateY(0);
}