/* ═══════════════════════════════════════════════════════════════════════════
   ANIME THEME — Core aesthetic system
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Speed lines ─────────────────────────────────────────────────────────── */
.speed-lines-h {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 6px,
    rgba(139, 92, 246, 0.02) 6px,
    rgba(139, 92, 246, 0.02) 7px
  );
  pointer-events: none;
}
.speed-lines-d {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 8px,
    rgba(139, 92, 246, 0.015) 8px,
    rgba(139, 92, 246, 0.015) 9px
  );
  pointer-events: none;
}

/* ── Manga panel border ───────────────────────────────────────────────────── */
.manga-panel {
  position: relative;
  border: 3px solid var(--border-color);
  border-radius: 4px;
}
.manga-panel::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(139, 92, 246, 0.08);
  border-radius: 2px;
  pointer-events: none;
}

/* ── Halftone overlay ─────────────────────────────────────────────────────── */
.halftone-overlay {
  position: relative;
  overflow: hidden;
}
.halftone-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    rgba(139, 92, 246, 0.08) 1px,
    transparent 1px
  );
  background-size: 16px 16px;
  pointer-events: none;
  z-index: 1;
}

/* ── Screen tone (diagonal lines bg) ─────────────────────────────────────── */
.screen-tone {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 3px,
    rgba(139, 92, 246, 0.025) 3px,
    rgba(139, 92, 246, 0.025) 4px
  );
}

/* ── Energy glow border ───────────────────────────────────────────────────── */
.glow-border {
  border: 1px solid transparent;
  background-clip: padding-box;
  position: relative;
}
.glow-border::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--gradient);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s;
}
.glow-border:hover::before {
  opacity: 0.6;
}

/* ── Sparkle burst (JS-driven, CSS definition) ───────────────────────────── */
.sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8b5cf6;
  animation: sparkle-burst 0.7s ease-out forwards;
}
@keyframes sparkle-burst {
  0% {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: scale(0) translate(var(--tx), var(--ty));
    opacity: 0;
  }
}

/* ── Japanese text decoration ────────────────────────────────────────────── */
.jp-accent {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: rgba(139, 92, 246, 0.35);
  font-weight: 400;
  line-height: 1;
}

/* ── Glitch text effect ───────────────────────────────────────────────────── */
.glitch {
  position: relative;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: var(--bg-primary);
  clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%);
}
.glitch::before {
  left: 2px;
  color: #06b6d4;
  animation: glitch-before 3s infinite steps(1);
}
.glitch::after {
  left: -2px;
  color: #f43f5e;
  animation: glitch-after 3s infinite steps(1);
}
@keyframes glitch-before {
  0%,
  90%,
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
  92% {
    clip-path: polygon(0 15%, 100% 15%, 100% 30%, 0 30%);
    left: 3px;
  }
  94% {
    clip-path: polygon(0 50%, 100% 50%, 100% 70%, 0 70%);
    left: -2px;
  }
  96% {
    clip-path: polygon(0 80%, 100% 80%, 100% 95%, 0 95%);
    left: 1px;
  }
}
@keyframes glitch-after {
  0%,
  90%,
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
  93% {
    clip-path: polygon(0 40%, 100% 40%, 100% 55%, 0 55%);
    left: -3px;
  }
  95% {
    clip-path: polygon(0 60%, 100% 60%, 100% 75%, 0 75%);
    left: 2px;
  }
  97% {
    clip-path: polygon(0 10%, 100% 10%, 100% 25%, 0 25%);
    left: -1px;
  }
}

/* ── Impact frame flash ───────────────────────────────────────────────────── */
@keyframes impact-flash {
  0% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}
.impact-flash {
  position: fixed;
  inset: 0;
  background: white;
  pointer-events: none;
  z-index: 9997;
  animation: impact-flash 0.2s ease-out forwards;
}

/* ── Onomatopoeia popup ───────────────────────────────────────────────────── */
.onomatopoeia {
  position: fixed;
  pointer-events: none;
  z-index: 9996;
  font-family: "Playfair Display", serif;
  font-weight: 900;
  font-size: 2rem;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: onoma-pop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  text-shadow: none;
  white-space: nowrap;
  transform-origin: center center;
}
@keyframes onoma-pop {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-10deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) rotate(3deg);
  }
  75% {
    transform: scale(0.95) rotate(-1deg);
  }
  100% {
    opacity: 0;
    transform: scale(1) translateY(-30px) rotate(0deg);
  }
}

/* ── Tilt card (3D hover) ─────────────────────────────────────────────────── */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.1s ease;
}
.tilt-card .tilt-inner {
  transform: translateZ(20px);
}

/* ── Floating animation ───────────────────────────────────────────────────── */
@keyframes float-y {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}
@keyframes float-x {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-8px);
  }
}
@keyframes rotate-slow {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse-ring {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
  }
  70% {
    transform: scale(1.3);
    opacity: 0;
  }
  100% {
    transform: scale(0.9);
    opacity: 0;
  }
}
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.animate-float {
  animation: float-y 5s ease-in-out infinite;
}
.animate-float-x {
  animation: float-x 4s ease-in-out infinite;
}
.animate-spin-slow {
  animation: rotate-slow 20s linear infinite;
}

/* ── Shimmer gradient text ────────────────────────────────────────────────── */
.shimmer-text {
  background: linear-gradient(
    90deg,
    #8b5cf6 0%,
    #06b6d4 25%,
    #f43f5e 50%,
    #8b5cf6 75%,
    #06b6d4 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* ── Neon glow text ───────────────────────────────────────────────────────── */
.neon-purple {
  text-shadow:
    0 0 10px rgba(139, 92, 246, 0.8),
    0 0 20px rgba(139, 92, 246, 0.5),
    0 0 40px rgba(139, 92, 246, 0.3);
}
.neon-cyan {
  text-shadow:
    0 0 10px rgba(6, 182, 212, 0.8),
    0 0 20px rgba(6, 182, 212, 0.5),
    0 0 40px rgba(6, 182, 212, 0.3);
}

/* ── Anime card hover glow variants ──────────────────────────────────────── */
.card-glow-purple:hover {
  box-shadow:
    0 0 0 1px rgba(139, 92, 246, 0.4),
    0 8px 40px rgba(139, 92, 246, 0.2);
}
.card-glow-cyan:hover {
  box-shadow:
    0 0 0 1px rgba(6, 182, 212, 0.4),
    0 8px 40px rgba(6, 182, 212, 0.2);
}
.card-glow-pink:hover {
  box-shadow:
    0 0 0 1px rgba(244, 63, 94, 0.4),
    0 8px 40px rgba(244, 63, 94, 0.2);
}

/* ── Section transition wipe ─────────────────────────────────────────────── */
.wipe-enter {
  animation: wipe-in 0.6s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
@keyframes wipe-in {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0% 0 0);
  }
}

/* ── Scroll indicator ────────────────────────────────────────────────────── */
.scroll-dot {
  width: 6px;
  height: 6px;
  background: var(--accent-1);
  border-radius: 50%;
  animation: scroll-bounce 2s ease-in-out infinite;
}
@keyframes scroll-bounce {
  0%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(20px);
    opacity: 0.3;
  }
}

/* ── Noise texture overlay ───────────────────────────────────────────────── */
.noise-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.4;
  pointer-events: none;
}

/* ── Active nav underline draw ───────────────────────────────────────────── */
@keyframes underline-draw {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}