/* ============================================================
   Novels AI — na-animations.css
   Keyframes, transitions, GSAP helpers, AOS overrides
   ============================================================ */

/* ── Core Keyframes ─────────────────────────────────────── */

@keyframes na-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}

@keyframes na-float-gentle {
  0%,100% { transform: translateY(0) rotate(0deg); }
  33%      { transform: translateY(-10px) rotate(1deg); }
  66%      { transform: translateY(-6px) rotate(-1deg); }
}

@keyframes na-blink {
  0%,100% { opacity: 1; }
  50%      { opacity: .3; }
}

@keyframes na-cursor-blink {
  0%,49% { opacity: 1; }
  50%,100%{ opacity: 0; }
}

@keyframes na-pulse-glow {
  0%,100% { box-shadow: 0 4px 32px rgba(124,58,237,.45), 0 0 0 0 rgba(124,58,237,0); }
  50%      { box-shadow: 0 4px 32px rgba(124,58,237,.6),  0 0 0 12px rgba(124,58,237,.08); }
}

@keyframes na-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes na-orb-drift {
  0%,100% { transform: translate(0,0) scale(1); }
  25%      { transform: translate(30px,-20px) scale(1.05); }
  50%      { transform: translate(-20px,30px) scale(.97); }
  75%      { transform: translate(20px,10px) scale(1.03); }
}

@keyframes na-wave-bounce {
  0%,100% { transform: scaleY(1); }
  50%      { transform: scaleY(.4); }
}

@keyframes na-slide-up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes na-slide-down {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes na-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes na-scale-in {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes na-scroll-dot {
  0%  { top: 5px; opacity: 1; }
  80% { top: 18px; opacity: 0; }
  100%{ top: 5px; opacity: 0; }
}

@keyframes na-shimmer {
  from { background-position: -200% center; }
  to   { background-position: 200% center; }
}

@keyframes na-gradient-shift {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

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

@keyframes na-progress-bar {
  from { width: 0; }
  to   { width: var(--na-progress-target, 100%); }
}

@keyframes na-counter-enter {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes na-particle-drift {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: .8; }
  50%  { transform: translateY(-60px) translateX(20px) scale(1.1); opacity: .4; }
  100% { transform: translateY(-120px) translateX(-10px) scale(.8); opacity: 0; }
}

@keyframes na-glow-pulse {
  0%,100% { filter: drop-shadow(0 0 8px rgba(124,58,237,.6)); }
  50%      { filter: drop-shadow(0 0 20px rgba(124,58,237,1)); }
}

@keyframes na-type-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

@keyframes na-bounce-in {
  0%   { transform: scale(0.3) translateY(50px); opacity: 0; }
  60%  { transform: scale(1.05) translateY(-5px); opacity: 1; }
  80%  { transform: scale(.97); }
  100% { transform: scale(1) translateY(0); }
}

/* ── Applied animation classes ─────────────────────────── */

.na-animate-float         { animation: na-float 6s ease-in-out infinite; }
.na-animate-float-gentle  { animation: na-float-gentle 8s ease-in-out infinite; }
.na-animate-pulse-glow    { animation: na-pulse-glow 3s ease-in-out infinite; }
.na-animate-spin-slow     { animation: na-spin-slow 20s linear infinite; }
.na-animate-slide-up      { animation: na-slide-up .8s ease forwards; }
.na-animate-fade-in       { animation: na-fade-in .8s ease forwards; }
.na-animate-scale-in      { animation: na-scale-in .6s cubic-bezier(.34,1.56,.64,1) forwards; }
.na-animate-glow-pulse    { animation: na-glow-pulse 2s ease-in-out infinite; }

/* Delay helpers */
.na-delay-100  { animation-delay: .1s; }
.na-delay-200  { animation-delay: .2s; }
.na-delay-300  { animation-delay: .3s; }
.na-delay-400  { animation-delay: .4s; }
.na-delay-500  { animation-delay: .5s; }
.na-delay-600  { animation-delay: .6s; }
.na-delay-700  { animation-delay: .7s; }
.na-delay-800  { animation-delay: .8s; }
.na-delay-1000 { animation-delay: 1s; }
.na-delay-1200 { animation-delay: 1.2s; }

/* Initial hidden state for JS-triggered animations */
.na-reveal-ready {
  opacity: 0;
  transform: translateY(32px);
}

.na-reveal-ready.na-revealed {
  animation: na-slide-up .8s ease forwards;
}

/* ── Wave bars animation ─────────────────────────────────── */
.na-wave-bar:nth-child(1)  { animation: na-wave-bounce 1.2s ease-in-out infinite 0.0s; }
.na-wave-bar:nth-child(2)  { animation: na-wave-bounce 1.2s ease-in-out infinite 0.1s; }
.na-wave-bar:nth-child(3)  { animation: na-wave-bounce 1.2s ease-in-out infinite 0.2s; }
.na-wave-bar:nth-child(4)  { animation: na-wave-bounce 1.2s ease-in-out infinite 0.3s; }
.na-wave-bar:nth-child(5)  { animation: na-wave-bounce 1.2s ease-in-out infinite 0.4s; }
.na-wave-bar:nth-child(6)  { animation: na-wave-bounce 1.2s ease-in-out infinite 0.5s; }
.na-wave-bar:nth-child(7)  { animation: na-wave-bounce 1.2s ease-in-out infinite 0.4s; }
.na-wave-bar:nth-child(8)  { animation: na-wave-bounce 1.2s ease-in-out infinite 0.3s; }
.na-wave-bar:nth-child(9)  { animation: na-wave-bounce 1.2s ease-in-out infinite 0.2s; }
.na-wave-bar:nth-child(10) { animation: na-wave-bounce 1.2s ease-in-out infinite 0.1s; }
.na-wave-bar:nth-child(11) { animation: na-wave-bounce 1.2s ease-in-out infinite 0.0s; }
.na-wave-bar:nth-child(12) { animation: na-wave-bounce 1.2s ease-in-out infinite 0.15s; }
.na-wave-bar:nth-child(13) { animation: na-wave-bounce 1.2s ease-in-out infinite 0.25s; }
.na-wave-bar:nth-child(14) { animation: na-wave-bounce 1.2s ease-in-out infinite 0.35s; }
.na-wave-bar:nth-child(15) { animation: na-wave-bounce 1.2s ease-in-out infinite 0.45s; }
.na-wave-bar:nth-child(16) { animation: na-wave-bounce 1.2s ease-in-out infinite 0.2s; }
.na-wave-bar:nth-child(17) { animation: na-wave-bounce 1.2s ease-in-out infinite 0.1s; }
.na-wave-bar:nth-child(18) { animation: na-wave-bounce 1.2s ease-in-out infinite 0.0s; }

/* ── Mini wave for voice cards ───────────────────────────── */
.na-voice-card.na-playing .na-mini-bar:nth-child(1) { animation: na-wave-bounce .8s ease-in-out infinite 0.0s; }
.na-voice-card.na-playing .na-mini-bar:nth-child(2) { animation: na-wave-bounce .8s ease-in-out infinite 0.15s; }
.na-voice-card.na-playing .na-mini-bar:nth-child(3) { animation: na-wave-bounce .8s ease-in-out infinite 0.3s; }
.na-voice-card.na-playing .na-mini-bar:nth-child(4) { animation: na-wave-bounce .8s ease-in-out infinite 0.15s; }
.na-voice-card.na-playing .na-mini-bar:nth-child(5) { animation: na-wave-bounce .8s ease-in-out infinite 0.0s; }

/* ── Shimmer skeleton ────────────────────────────────────── */
.na-skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.1)  50%,
    rgba(255,255,255,.04) 100%);
  background-size: 200% auto;
  animation: na-shimmer 2s linear infinite;
  border-radius: 4px;
}

/* ── Gradient animated background ───────────────────────── */
.na-gradient-animated {
  background: linear-gradient(-45deg,
    var(--na-navy),
    var(--na-navy-light),
    rgba(124,58,237,.15),
    rgba(6,182,212,.1),
    var(--na-navy));
  background-size: 400% 400%;
  animation: na-gradient-shift 12s ease infinite;
}

/* ── Hover ripple effect ─────────────────────────────────── */
.na-ripple-container { position: relative; overflow: hidden; }
.na-ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  width: 60px;
  height: 60px;
  margin-top: -30px;
  margin-left: -30px;
  animation: na-ripple .6s linear;
  pointer-events: none;
  transform-origin: center;
}

/* ── Custom cursor ───────────────────────────────────────── */
.na-custom-cursor {
  width: 12px;
  height: 12px;
  background: var(--na-violet-glow);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%,-50%);
  transition: transform .15s ease, width .2s ease, height .2s ease, background .2s ease;
  mix-blend-mode: screen;
}

.na-custom-cursor-ring {
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(124,58,237,.5);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%,-50%);
  transition: transform .3s ease, width .3s ease, height .3s ease;
}

body:has(a:hover) .na-custom-cursor,
body:has(button:hover) .na-custom-cursor {
  width: 20px;
  height: 20px;
  background: var(--na-cyan);
}

body:has(a:hover) .na-custom-cursor-ring,
body:has(button:hover) .na-custom-cursor-ring {
  width: 52px;
  height: 52px;
}

/* ── Parallax layers ─────────────────────────────────────── */
.na-parallax-layer { will-change: transform; }

/* ── Stagger animation helpers ───────────────────────────── */
.na-stagger-children > *:nth-child(1) { animation-delay: .1s; }
.na-stagger-children > *:nth-child(2) { animation-delay: .2s; }
.na-stagger-children > *:nth-child(3) { animation-delay: .3s; }
.na-stagger-children > *:nth-child(4) { animation-delay: .4s; }
.na-stagger-children > *:nth-child(5) { animation-delay: .5s; }
.na-stagger-children > *:nth-child(6) { animation-delay: .6s; }

/* ── Page transition ─────────────────────────────────────── */
.na-page-transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--na-navy);
  z-index: 99990;
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}

.na-page-transition-overlay.na-entering { transform: translateY(0); }
.na-page-transition-overlay.na-leaving  { transform: translateY(-100%); }