/**
 * NameGen Pro – Animations & Keyframes
 * Supplement to style.css; enqueued separately for cache efficiency.
 */

/* ─── Keyframe Library ─────────────────────────────────────────── */

@keyframes ngFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ngFadeInUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes ngFadeInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes ngFadeInRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes ngScaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes ngSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

@keyframes ngPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.06); }
}

@keyframes ngFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-14px); }
}

@keyframes ngSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes ngSpinReverse {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}

@keyframes ngOrb {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(40px, -30px) scale(1.08); }
  66%  { transform: translate(-20px, 20px) scale(0.94); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes ngGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); }
  50%       { box-shadow: 0 0 50px rgba(139, 92, 246, 0.7), 0 0 80px rgba(139, 92, 246, 0.3); }
}

@keyframes ngGradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes ngShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

@keyframes ngBounce {
  0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50%       { transform: translateY(-18px); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}

@keyframes ngWiggle {
  0%, 100% { transform: rotate(0deg); }
  20%       { transform: rotate(-5deg); }
  60%       { transform: rotate(5deg); }
}

@keyframes ngTypewriter {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes ngBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes ngProgressFill {
  from { width: 0%; }
  to   { width: var(--target-width, 70%); }
}

@keyframes ngCounterUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ngRipple {
  0%   { transform: scale(0); opacity: 1; }
  100% { transform: scale(4); opacity: 0; }
}

@keyframes ngStaggerIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── Utility Animation Classes ────────────────────────────────── */

.ng-animate-fade-in      { animation: ngFadeIn      0.6s ease both; }
.ng-animate-fade-in-up   { animation: ngFadeInUp    0.7s ease both; }
.ng-animate-fade-in-down { animation: ngFadeInDown  0.6s ease both; }
.ng-animate-fade-in-left { animation: ngFadeInLeft  0.7s ease both; }
.ng-animate-fade-in-right{ animation: ngFadeInRight 0.7s ease both; }
.ng-animate-scale-in     { animation: ngScaleIn     0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.ng-animate-bounce       { animation: ngBounce      1s infinite; }
.ng-animate-float        { animation: ngFloat       3s ease-in-out infinite; }
.ng-animate-pulse        { animation: ngPulse       2s ease-in-out infinite; }
.ng-animate-spin         { animation: ngSpin        1s linear infinite; }
.ng-animate-glow         { animation: ngGlow        2.5s ease-in-out infinite; }
.ng-animate-wiggle       { animation: ngWiggle      0.5s ease; }

/* Delay helpers */
.ng-delay-100 { animation-delay: 0.1s; }
.ng-delay-200 { animation-delay: 0.2s; }
.ng-delay-300 { animation-delay: 0.3s; }
.ng-delay-400 { animation-delay: 0.4s; }
.ng-delay-500 { animation-delay: 0.5s; }
.ng-delay-600 { animation-delay: 0.6s; }
.ng-delay-700 { animation-delay: 0.7s; }
.ng-delay-800 { animation-delay: 0.8s; }

/* Duration helpers */
.ng-duration-300 { animation-duration: 0.3s; }
.ng-duration-500 { animation-duration: 0.5s; }
.ng-duration-700 { animation-duration: 0.7s; }
.ng-duration-1000{ animation-duration: 1s; }
.ng-duration-1500{ animation-duration: 1.5s; }
.ng-duration-2000{ animation-duration: 2s; }

/* ─── Hero Orb Animations ───────────────────────────────────────── */

.ng-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

.ng-orb-1 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.35) 0%, transparent 70%);
  top: -100px; right: -80px;
  animation: ngOrb 12s ease-in-out infinite;
}

.ng-orb-2 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.28) 0%, transparent 70%);
  bottom: -60px; left: -60px;
  animation: ngOrb 16s ease-in-out infinite reverse;
}

.ng-orb-3 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.22) 0%, transparent 70%);
  top: 40%; left: 40%;
  animation: ngOrb 10s ease-in-out infinite 4s;
}

/* ─── Scroll Reveal States ──────────────────────────────────────── */

.ng-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.ng-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ng-reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.ng-reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.ng-reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.ng-reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.ng-reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ng-reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ─── Loading / Skeleton Shimmer ───────────────────────────────── */

.ng-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.06) 25%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0.06) 75%
  );
  background-size: 200% 100%;
  animation: ngShimmer 1.6s infinite;
  border-radius: var(--ng-radius-md);
}

.ng-skeleton-text  { height: 14px; margin-bottom: 8px; }
.ng-skeleton-title { height: 28px; width: 55%; margin-bottom: 16px; }
.ng-skeleton-badge { height: 36px; width: 100px; border-radius: 9999px; }
.ng-skeleton-block { height: 80px; }

/* ─── Button Ripple Effect ──────────────────────────────────────── */

.ng-btn { position: relative; overflow: hidden; }

.ng-btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transform: scale(0);
  animation: ngRipple 0.6s linear;
  pointer-events: none;
}

/* ─── Gradient Text Animation ───────────────────────────────────── */

.ng-gradient-text-animated {
  background: linear-gradient(270deg, #8b5cf6, #a78bfa, #6366f1, #c4b5fd, #8b5cf6);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: ngGradientShift 5s ease infinite;
}

/* ─── Typewriter Effect ─────────────────────────────────────────── */

.ng-typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--ng-purple-400);
  animation: ngTypewriter 2.5s steps(40) both, ngBlink 0.8s step-end infinite 2.5s;
}

/* ─── Progress Bar ──────────────────────────────────────────────── */

.ng-progress-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  overflow: hidden;
}

.ng-progress-bar .ng-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ng-purple-500), var(--ng-purple-300));
  border-radius: 99px;
  width: 0%;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Card Hover Lift ───────────────────────────────────────────── */

.ng-card-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ng-card-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(139, 92, 246, 0.25);
}

/* ─── Staggered Child Animations ────────────────────────────────── */

.ng-stagger > * {
  opacity: 0;
  animation: ngStaggerIn 0.5s ease both;
}

.ng-stagger.is-visible > *:nth-child(1)  { animation-delay: 0.05s; }
.ng-stagger.is-visible > *:nth-child(2)  { animation-delay: 0.10s; }
.ng-stagger.is-visible > *:nth-child(3)  { animation-delay: 0.15s; }
.ng-stagger.is-visible > *:nth-child(4)  { animation-delay: 0.20s; }
.ng-stagger.is-visible > *:nth-child(5)  { animation-delay: 0.25s; }
.ng-stagger.is-visible > *:nth-child(6)  { animation-delay: 0.30s; }
.ng-stagger.is-visible > *:nth-child(7)  { animation-delay: 0.35s; }
.ng-stagger.is-visible > *:nth-child(8)  { animation-delay: 0.40s; }
.ng-stagger.is-visible > *:nth-child(9)  { animation-delay: 0.45s; }
.ng-stagger.is-visible > *:nth-child(10) { animation-delay: 0.50s; }

/* ─── Spinner Variants ──────────────────────────────────────────── */

.ng-spinner {
  display: inline-block;
  width: 24px; height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--ng-purple-400);
  border-radius: 50%;
  animation: ngSpin 0.8s linear infinite;
}

.ng-spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.ng-spinner-lg { width: 40px; height: 40px; border-width: 4px; }

.ng-spinner-duo {
  display: inline-block;
  width: 30px; height: 30px;
  position: relative;
}

.ng-spinner-duo::before,
.ng-spinner-duo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
}

.ng-spinner-duo::before {
  border-top-color: var(--ng-purple-400);
  animation: ngSpin 0.8s linear infinite;
}

.ng-spinner-duo::after {
  border-bottom-color: var(--ng-purple-300);
  animation: ngSpinReverse 1.2s linear infinite;
}

/* ─── Notification Toast ────────────────────────────────────────── */

.ng-toast {
  position: fixed;
  bottom: 32px; right: 32px;
  background: rgba(30, 10, 60, 0.95);
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: var(--ng-radius-lg);
  padding: 14px 20px;
  color: #fff;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  transform: translateY(80px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
  max-width: 340px;
}

.ng-toast.show {
  transform: translateY(0);
  opacity: 1;
}

.ng-toast.success .ng-toast-icon { color: #4ade80; }
.ng-toast.error   .ng-toast-icon { color: #f87171; }
.ng-toast.info    .ng-toast-icon { color: var(--ng-purple-400); }

/* ─── Particle Canvas Overlay ───────────────────────────────────── */

#ng-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ─── Section Divider SVG ───────────────────────────────────────── */

.ng-divider {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  margin-top: -2px;
}

.ng-divider svg { display: block; }

/* ─── Animated Underline ─────────────────────────────────────────  */

.ng-underline-animate {
  position: relative;
  display: inline-block;
}

.ng-underline-animate::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--ng-purple-500), var(--ng-purple-300));
  transition: width 0.35s ease;
}

.ng-underline-animate:hover::after,
.ng-underline-animate.active::after { width: 100%; }

/* ─── Mobile reduced-motion override ───────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}