/**
 * ╔═══════════════════════════════════════════════════════════════════════════╗
 * ║                    NW VISUAL LIBRARY - CORE CSS                           ║
 * ║                   The Ultimate Animation & Effects System                  ║
 * ║                         Version 1.0.0 | 2026                              ║
 * ╚═══════════════════════════════════════════════════════════════════════════╝
 * 
 * USAGE: Include this CSS file and add classes to elements.
 * All effects are customizable via CSS variables.
 * 
 * Theme Variables: Override --nw-* variables in :root to change all effects
 */

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 1: CSS VARIABLES & THEMING SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Primary Theme Colors ─── */
  --nw-primary: #ff6b00;
  --nw-primary-light: #ff9d4d;
  --nw-primary-dark: #cc5500;
  --nw-secondary: #00d4ff;
  --nw-secondary-light: #66e5ff;
  --nw-secondary-dark: #00a8cc;
  --nw-accent: #ff00ff;
  --nw-accent-light: #ff66ff;
  --nw-accent-dark: #cc00cc;
  
  /* ─── Status Colors ─── */
  --nw-success: #00ff88;
  --nw-warning: #ffcc00;
  --nw-error: #ff3366;
  --nw-info: #00d4ff;
  
  /* ─── Background Colors ─── */
  --nw-bg-dark: #0a0a0f;
  --nw-bg-darker: #050508;
  --nw-bg-card: rgba(255, 107, 0, 0.05);
  --nw-bg-glass: rgba(255, 255, 255, 0.05);
  --nw-bg-overlay: rgba(0, 0, 0, 0.8);
  
  /* ─── Text Colors ─── */
  --nw-text-primary: #ffffff;
  --nw-text-secondary: rgba(255, 255, 255, 0.7);
  --nw-text-muted: rgba(255, 255, 255, 0.5);
  
  /* ─── Glow & Shadow ─── */
  --nw-glow-primary: 0 0 20px rgba(255, 107, 0, 0.5);
  --nw-glow-secondary: 0 0 20px rgba(0, 212, 255, 0.5);
  --nw-glow-accent: 0 0 20px rgba(255, 0, 255, 0.5);
  --nw-shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.3);
  --nw-shadow-hard: 0 8px 40px rgba(0, 0, 0, 0.5);
  
  /* ─── Animation Timings ─── */
  --nw-duration-fast: 0.15s;
  --nw-duration-normal: 0.3s;
  --nw-duration-slow: 0.6s;
  --nw-duration-slower: 1s;
  --nw-duration-slowest: 2s;
  
  /* ─── Easing Functions ─── */
  --nw-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --nw-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --nw-ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  --nw-ease-snap: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --nw-ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  
  /* ─── Border Radius ─── */
  --nw-radius-sm: 4px;
  --nw-radius-md: 8px;
  --nw-radius-lg: 16px;
  --nw-radius-xl: 24px;
  --nw-radius-full: 9999px;
  
  /* ─── Spacing ─── */
  --nw-space-xs: 4px;
  --nw-space-sm: 8px;
  --nw-space-md: 16px;
  --nw-space-lg: 24px;
  --nw-space-xl: 32px;
}

/* ─── Dark Theme (default) ─── */
[data-nw-theme="dark"] {
  --nw-bg-dark: #0a0a0f;
  --nw-text-primary: #ffffff;
}

/* ─── Light Theme ─── */
[data-nw-theme="light"] {
  --nw-bg-dark: #f5f5f5;
  --nw-bg-darker: #e5e5e5;
  --nw-bg-card: rgba(255, 107, 0, 0.1);
  --nw-bg-glass: rgba(0, 0, 0, 0.05);
  --nw-text-primary: #1a1a1a;
  --nw-text-secondary: rgba(0, 0, 0, 0.7);
  --nw-text-muted: rgba(0, 0, 0, 0.5);
}

/* ─── Neon Theme ─── */
[data-nw-theme="neon"] {
  --nw-primary: #00ff88;
  --nw-secondary: #ff00ff;
  --nw-accent: #00ffff;
}

/* ─── Retro Theme ─── */
[data-nw-theme="retro"] {
  --nw-primary: #ff6b9d;
  --nw-secondary: #c44569;
  --nw-accent: #f8b500;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 2: GLOW EFFECTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Basic Glows ─── */
.nw-glow {
  box-shadow: var(--nw-glow-primary);
  transition: box-shadow var(--nw-duration-normal) var(--nw-ease-smooth);
}

.nw-glow-secondary {
  box-shadow: var(--nw-glow-secondary);
}

.nw-glow-accent {
  box-shadow: var(--nw-glow-accent);
}

/* ─── Glow on Hover ─── */
.nw-glow-hover:hover {
  box-shadow: 0 0 30px rgba(255, 107, 0, 0.7), 0 0 60px rgba(255, 107, 0, 0.4);
}

/* ─── Pulsing Glow ─── */
.nw-glow-pulse {
  animation: nw-glow-pulse 2s ease-in-out infinite;
}

@keyframes nw-glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 107, 0, 0.3); }
  50% { box-shadow: 0 0 40px rgba(255, 107, 0, 0.6), 0 0 60px rgba(255, 107, 0, 0.3); }
}

/* ─── Rainbow Glow ─── */
.nw-glow-rainbow {
  animation: nw-glow-rainbow 3s linear infinite;
}

@keyframes nw-glow-rainbow {
  0% { box-shadow: 0 0 30px rgba(255, 0, 0, 0.6); }
  16.67% { box-shadow: 0 0 30px rgba(255, 165, 0, 0.6); }
  33.33% { box-shadow: 0 0 30px rgba(255, 255, 0, 0.6); }
  50% { box-shadow: 0 0 30px rgba(0, 255, 0, 0.6); }
  66.67% { box-shadow: 0 0 30px rgba(0, 191, 255, 0.6); }
  83.33% { box-shadow: 0 0 30px rgba(138, 43, 226, 0.6); }
  100% { box-shadow: 0 0 30px rgba(255, 0, 0, 0.6); }
}

/* ─── Neon Border Glow ─── */
.nw-neon-border {
  border: 2px solid var(--nw-primary);
  box-shadow: 
    inset 0 0 10px rgba(255, 107, 0, 0.3),
    0 0 10px rgba(255, 107, 0, 0.3),
    0 0 20px rgba(255, 107, 0, 0.2),
    0 0 40px rgba(255, 107, 0, 0.1);
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 3: TEXT EFFECTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Gradient Text ─── */
.nw-text-gradient {
  background: linear-gradient(135deg, var(--nw-primary), var(--nw-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nw-text-gradient-rainbow {
  background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: nw-gradient-shift 3s linear infinite;
}

@keyframes nw-gradient-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ─── Glowing Text ─── */
.nw-text-glow {
  text-shadow: 
    0 0 10px var(--nw-primary),
    0 0 20px var(--nw-primary),
    0 0 30px var(--nw-primary);
}

.nw-text-glow-pulse {
  animation: nw-text-glow-pulse 2s ease-in-out infinite;
}

@keyframes nw-text-glow-pulse {
  0%, 100% { 
    text-shadow: 0 0 10px var(--nw-primary), 0 0 20px var(--nw-primary);
  }
  50% { 
    text-shadow: 0 0 20px var(--nw-primary), 0 0 40px var(--nw-primary), 0 0 60px var(--nw-primary);
  }
}

/* ─── Stroke Text ─── */
.nw-text-stroke {
  -webkit-text-stroke: 1px var(--nw-primary);
  -webkit-text-fill-color: transparent;
}

.nw-text-stroke-thick {
  -webkit-text-stroke: 2px var(--nw-primary);
  -webkit-text-fill-color: transparent;
}

/* ─── 3D Text ─── */
.nw-text-3d {
  text-shadow: 
    1px 1px 0 var(--nw-primary-dark),
    2px 2px 0 var(--nw-primary-dark),
    3px 3px 0 var(--nw-primary-dark),
    4px 4px 0 var(--nw-primary-dark);
}

/* ─── Flicker Text (Neon Sign) ─── */
.nw-text-flicker {
  animation: nw-text-flicker 0.5s ease-in-out infinite alternate;
}

@keyframes nw-text-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow: 
      0 0 10px var(--nw-primary),
      0 0 20px var(--nw-primary),
      0 0 40px var(--nw-primary);
  }
  20%, 24%, 55% {
    text-shadow: none;
  }
}

/* ─── Cyberpunk Glitch Text ─── */
.nw-text-glitch {
  position: relative;
}

.nw-text-glitch::before,
.nw-text-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.nw-text-glitch::before {
  left: 2px;
  text-shadow: -2px 0 #ff00ff;
  clip: rect(44px, 450px, 56px, 0);
  animation: nw-glitch-anim 5s infinite linear alternate-reverse;
}

.nw-text-glitch::after {
  left: -2px;
  text-shadow: -2px 0 #00ffff;
  clip: rect(44px, 450px, 56px, 0);
  animation: nw-glitch-anim2 5s infinite linear alternate-reverse;
}

@keyframes nw-glitch-anim {
  0% { clip: rect(31px, 9999px, 94px, 0); }
  5% { clip: rect(70px, 9999px, 71px, 0); }
  10% { clip: rect(29px, 9999px, 24px, 0); }
  15% { clip: rect(69px, 9999px, 60px, 0); }
  20% { clip: rect(5px, 9999px, 36px, 0); }
  25% { clip: rect(83px, 9999px, 73px, 0); }
  30% { clip: rect(45px, 9999px, 14px, 0); }
  35% { clip: rect(26px, 9999px, 97px, 0); }
  40% { clip: rect(43px, 9999px, 55px, 0); }
  45% { clip: rect(91px, 9999px, 4px, 0); }
  50% { clip: rect(7px, 9999px, 76px, 0); }
  55% { clip: rect(62px, 9999px, 19px, 0); }
  60% { clip: rect(15px, 9999px, 86px, 0); }
  65% { clip: rect(79px, 9999px, 32px, 0); }
  70% { clip: rect(3px, 9999px, 42px, 0); }
  75% { clip: rect(56px, 9999px, 81px, 0); }
  80% { clip: rect(33px, 9999px, 11px, 0); }
  85% { clip: rect(88px, 9999px, 63px, 0); }
  90% { clip: rect(21px, 9999px, 49px, 0); }
  95% { clip: rect(67px, 9999px, 28px, 0); }
  100% { clip: rect(44px, 9999px, 82px, 0); }
}

@keyframes nw-glitch-anim2 {
  0% { clip: rect(65px, 9999px, 100px, 0); }
  5% { clip: rect(33px, 9999px, 77px, 0); }
  10% { clip: rect(82px, 9999px, 8px, 0); }
  15% { clip: rect(19px, 9999px, 54px, 0); }
  20% { clip: rect(91px, 9999px, 41px, 0); }
  25% { clip: rect(12px, 9999px, 88px, 0); }
  30% { clip: rect(57px, 9999px, 23px, 0); }
  35% { clip: rect(76px, 9999px, 66px, 0); }
  40% { clip: rect(4px, 9999px, 95px, 0); }
  45% { clip: rect(48px, 9999px, 17px, 0); }
  50% { clip: rect(85px, 9999px, 52px, 0); }
  55% { clip: rect(27px, 9999px, 79px, 0); }
  60% { clip: rect(69px, 9999px, 6px, 0); }
  65% { clip: rect(14px, 9999px, 93px, 0); }
  70% { clip: rect(58px, 9999px, 34px, 0); }
  75% { clip: rect(96px, 9999px, 47px, 0); }
  80% { clip: rect(22px, 9999px, 72px, 0); }
  85% { clip: rect(61px, 9999px, 9px, 0); }
  90% { clip: rect(38px, 9999px, 84px, 0); }
  95% { clip: rect(75px, 9999px, 29px, 0); }
  100% { clip: rect(10px, 9999px, 59px, 0); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 4: BUTTON EFFECTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Base Button ─── */
.nw-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-weight: 600;
  border: none;
  border-radius: var(--nw-radius-md);
  cursor: pointer;
  overflow: hidden;
  transition: all var(--nw-duration-normal) var(--nw-ease-smooth);
}

/* ─── Gradient Button ─── */
.nw-btn-gradient {
  background: linear-gradient(135deg, var(--nw-primary), var(--nw-primary-dark));
  color: white;
}

.nw-btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(255, 107, 0, 0.4);
}

/* ─── Outline Button ─── */
.nw-btn-outline {
  background: transparent;
  border: 2px solid var(--nw-primary);
  color: var(--nw-primary);
}

.nw-btn-outline:hover {
  background: var(--nw-primary);
  color: white;
}

/* ─── Neon Button ─── */
.nw-btn-neon {
  background: transparent;
  border: 2px solid var(--nw-primary);
  color: var(--nw-primary);
  box-shadow: 
    0 0 10px rgba(255, 107, 0, 0.3),
    inset 0 0 10px rgba(255, 107, 0, 0.1);
}

.nw-btn-neon:hover {
  background: rgba(255, 107, 0, 0.1);
  box-shadow: 
    0 0 20px rgba(255, 107, 0, 0.5),
    0 0 40px rgba(255, 107, 0, 0.3),
    inset 0 0 20px rgba(255, 107, 0, 0.2);
}

/* ─── Ripple Effect ─── */
.nw-btn-ripple {
  overflow: hidden;
}

.nw-btn-ripple::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
  transform: scale(0);
  opacity: 0;
  transition: transform 0.5s, opacity 0.5s;
}

.nw-btn-ripple:active::after {
  transform: scale(2.5);
  opacity: 1;
  transition: 0s;
}

/* ─── Shine Effect ─── */
.nw-btn-shine {
  overflow: hidden;
}

.nw-btn-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s;
}

.nw-btn-shine:hover::before {
  left: 100%;
}

/* ─── Magnetic Button (needs JS) ─── */
.nw-btn-magnetic {
  transition: transform 0.3s var(--nw-ease-out-expo);
}

/* ─── 3D Push Button ─── */
.nw-btn-3d {
  background: var(--nw-primary);
  color: white;
  box-shadow: 0 6px 0 var(--nw-primary-dark);
  transform: translateY(0);
}

.nw-btn-3d:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 var(--nw-primary-dark);
}

.nw-btn-3d:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--nw-primary-dark);
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 5: CARD & CONTAINER EFFECTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Glass Card ─── */
.nw-glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--nw-radius-lg);
}

.nw-glass-dark {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ─── Gradient Border ─── */
.nw-border-gradient {
  position: relative;
  background: var(--nw-bg-dark);
  border-radius: var(--nw-radius-lg);
}

.nw-border-gradient::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--nw-primary), var(--nw-secondary), var(--nw-accent));
  border-radius: inherit;
  z-index: -1;
}

/* ─── Animated Border ─── */
.nw-border-animated {
  position: relative;
  background: var(--nw-bg-dark);
  border-radius: var(--nw-radius-lg);
}

.nw-border-animated::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(90deg, var(--nw-primary), var(--nw-secondary), var(--nw-accent), var(--nw-primary));
  background-size: 300% 300%;
  border-radius: inherit;
  z-index: -1;
  animation: nw-border-rotate 3s linear infinite;
}

@keyframes nw-border-rotate {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ─── 3D Tilt Card (needs JS) ─── */
.nw-card-tilt {
  transform-style: preserve-3d;
  transition: transform 0.3s var(--nw-ease-out-expo);
}

.nw-card-tilt-inner {
  transform: translateZ(20px);
}

/* ─── Holographic Card ─── */
.nw-card-holo {
  position: relative;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  overflow: hidden;
}

.nw-card-holo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    125deg,
    transparent 0%,
    rgba(255, 0, 0, 0.1) 10%,
    rgba(255, 165, 0, 0.1) 20%,
    rgba(255, 255, 0, 0.1) 30%,
    rgba(0, 255, 0, 0.1) 40%,
    rgba(0, 191, 255, 0.1) 50%,
    rgba(138, 43, 226, 0.1) 60%,
    transparent 70%
  );
  background-size: 200% 200%;
  animation: nw-holo-shift 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes nw-holo-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ─── Floating Card ─── */
.nw-card-float {
  animation: nw-float 3s ease-in-out infinite;
}

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


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 6: HOVER EFFECTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Scale Effects ─── */
.nw-hover-scale {
  transition: transform var(--nw-duration-normal) var(--nw-ease-smooth);
}

.nw-hover-scale:hover {
  transform: scale(1.05);
}

.nw-hover-scale-up {
  transition: transform var(--nw-duration-normal) var(--nw-ease-bounce);
}

.nw-hover-scale-up:hover {
  transform: scale(1.1);
}

/* ─── Lift Effects ─── */
.nw-hover-lift {
  transition: transform var(--nw-duration-normal) var(--nw-ease-smooth), 
              box-shadow var(--nw-duration-normal) var(--nw-ease-smooth);
}

.nw-hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* ─── Rotate Effects ─── */
.nw-hover-rotate {
  transition: transform var(--nw-duration-normal) var(--nw-ease-smooth);
}

.nw-hover-rotate:hover {
  transform: rotate(5deg);
}

.nw-hover-spin:hover {
  animation: nw-spin 0.5s var(--nw-ease-smooth);
}

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

/* ─── Shake Effect ─── */
.nw-hover-shake:hover {
  animation: nw-shake 0.5s ease-in-out;
}

@keyframes nw-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* ─── Pulse Effect ─── */
.nw-hover-pulse:hover {
  animation: nw-pulse 0.5s ease-in-out;
}

@keyframes nw-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* ─── Bounce Effect ─── */
.nw-hover-bounce:hover {
  animation: nw-bounce 0.5s var(--nw-ease-bounce);
}

@keyframes nw-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* ─── Swing Effect ─── */
.nw-hover-swing:hover {
  animation: nw-swing 0.5s ease-in-out;
  transform-origin: top center;
}

@keyframes nw-swing {
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

/* ─── Jello Effect ─── */
.nw-hover-jello:hover {
  animation: nw-jello 0.9s ease-in-out;
}

@keyframes nw-jello {
  0%, 100% { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(1.25, 0.75, 1); }
  40% { transform: scale3d(0.75, 1.25, 1); }
  50% { transform: scale3d(1.15, 0.85, 1); }
  65% { transform: scale3d(0.95, 1.05, 1); }
  75% { transform: scale3d(1.05, 0.95, 1); }
}

/* ─── Color Shift ─── */
.nw-hover-color-shift {
  transition: filter var(--nw-duration-normal) var(--nw-ease-smooth);
}

.nw-hover-color-shift:hover {
  filter: hue-rotate(30deg) saturate(1.5);
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 7: LOADING & SKELETON EFFECTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Spinner ─── */
.nw-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--nw-bg-glass);
  border-top-color: var(--nw-primary);
  border-radius: 50%;
  animation: nw-spinner-rotate 0.8s linear infinite;
}

@keyframes nw-spinner-rotate {
  to { transform: rotate(360deg); }
}

/* ─── Dual Ring Spinner ─── */
.nw-spinner-dual {
  width: 40px;
  height: 40px;
  border: 3px solid transparent;
  border-top-color: var(--nw-primary);
  border-bottom-color: var(--nw-secondary);
  border-radius: 50%;
  animation: nw-spinner-rotate 1s linear infinite;
}

/* ─── Dots Loader ─── */
.nw-loader-dots {
  display: flex;
  gap: 8px;
}

.nw-loader-dots span {
  width: 10px;
  height: 10px;
  background: var(--nw-primary);
  border-radius: 50%;
  animation: nw-dots-bounce 1.4s ease-in-out infinite both;
}

.nw-loader-dots span:nth-child(1) { animation-delay: -0.32s; }
.nw-loader-dots span:nth-child(2) { animation-delay: -0.16s; }
.nw-loader-dots span:nth-child(3) { animation-delay: 0; }

@keyframes nw-dots-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* ─── Bar Loader ─── */
.nw-loader-bar {
  width: 100%;
  height: 4px;
  background: var(--nw-bg-glass);
  overflow: hidden;
  border-radius: var(--nw-radius-full);
}

.nw-loader-bar::after {
  content: '';
  display: block;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, var(--nw-primary), var(--nw-secondary));
  animation: nw-bar-slide 1.5s ease-in-out infinite;
}

@keyframes nw-bar-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* ─── Skeleton Loading ─── */
.nw-skeleton {
  background: linear-gradient(
    90deg,
    var(--nw-bg-glass) 25%,
    rgba(255, 255, 255, 0.1) 50%,
    var(--nw-bg-glass) 75%
  );
  background-size: 200% 100%;
  animation: nw-skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes nw-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.nw-skeleton-text {
  height: 1em;
  border-radius: var(--nw-radius-sm);
}

.nw-skeleton-circle {
  border-radius: 50%;
}

.nw-skeleton-rect {
  border-radius: var(--nw-radius-md);
}

/* ─── Pulse Loader ─── */
.nw-loader-pulse {
  width: 40px;
  height: 40px;
  background: var(--nw-primary);
  border-radius: 50%;
  animation: nw-pulse-scale 1s ease-in-out infinite;
}

@keyframes nw-pulse-scale {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 8: SCROLL REVEAL EFFECTS (needs JS to add .nw-visible)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Base Reveal ─── */
.nw-reveal {
  opacity: 0;
  transition: opacity var(--nw-duration-slow) var(--nw-ease-smooth),
              transform var(--nw-duration-slow) var(--nw-ease-smooth);
}

.nw-reveal.nw-visible {
  opacity: 1;
}

/* ─── Fade Up ─── */
.nw-reveal-up {
  transform: translateY(50px);
}

.nw-reveal-up.nw-visible {
  transform: translateY(0);
}

/* ─── Fade Down ─── */
.nw-reveal-down {
  transform: translateY(-50px);
}

.nw-reveal-down.nw-visible {
  transform: translateY(0);
}

/* ─── Fade Left ─── */
.nw-reveal-left {
  transform: translateX(-50px);
}

.nw-reveal-left.nw-visible {
  transform: translateX(0);
}

/* ─── Fade Right ─── */
.nw-reveal-right {
  transform: translateX(50px);
}

.nw-reveal-right.nw-visible {
  transform: translateX(0);
}

/* ─── Scale Up ─── */
.nw-reveal-scale {
  transform: scale(0.8);
}

.nw-reveal-scale.nw-visible {
  transform: scale(1);
}

/* ─── Rotate In ─── */
.nw-reveal-rotate {
  transform: rotate(-10deg) scale(0.9);
}

.nw-reveal-rotate.nw-visible {
  transform: rotate(0) scale(1);
}

/* ─── Flip In ─── */
.nw-reveal-flip {
  transform: perspective(400px) rotateX(90deg);
}

.nw-reveal-flip.nw-visible {
  transform: perspective(400px) rotateX(0);
}

/* ─── Stagger Delays ─── */
.nw-stagger-1 { transition-delay: 0.1s; }
.nw-stagger-2 { transition-delay: 0.2s; }
.nw-stagger-3 { transition-delay: 0.3s; }
.nw-stagger-4 { transition-delay: 0.4s; }
.nw-stagger-5 { transition-delay: 0.5s; }
.nw-stagger-6 { transition-delay: 0.6s; }
.nw-stagger-7 { transition-delay: 0.7s; }
.nw-stagger-8 { transition-delay: 0.8s; }


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 9: BACKGROUND EFFECTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Aurora Background ─── */
.nw-bg-aurora {
  position: relative;
  overflow: hidden;
}

.nw-bg-aurora::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: 
    radial-gradient(ellipse at 20% 50%, rgba(255, 107, 0, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(0, 212, 255, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(255, 0, 255, 0.2) 0%, transparent 50%);
  animation: nw-aurora-drift 15s ease-in-out infinite;
  pointer-events: none;
}

@keyframes nw-aurora-drift {
  0%, 100% { transform: rotate(0deg) scale(1); }
  33% { transform: rotate(5deg) scale(1.1); }
  66% { transform: rotate(-5deg) scale(0.9); }
}

/* ─── Gradient Mesh ─── */
.nw-bg-mesh {
  background: 
    radial-gradient(at 40% 20%, rgba(255, 107, 0, 0.3) 0px, transparent 50%),
    radial-gradient(at 80% 0%, rgba(0, 212, 255, 0.3) 0px, transparent 50%),
    radial-gradient(at 0% 50%, rgba(255, 0, 255, 0.2) 0px, transparent 50%),
    radial-gradient(at 80% 50%, rgba(0, 255, 136, 0.2) 0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(255, 107, 0, 0.2) 0px, transparent 50%),
    radial-gradient(at 80% 100%, rgba(0, 212, 255, 0.2) 0px, transparent 50%);
}

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

/* ─── Grid Pattern ─── */
.nw-bg-grid {
  background-image: 
    linear-gradient(rgba(255, 107, 0, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 107, 0, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* ─── Dot Pattern ─── */
.nw-bg-dots {
  background-image: radial-gradient(rgba(255, 107, 0, 0.3) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* ─── Diagonal Lines ─── */
.nw-bg-lines {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(255, 107, 0, 0.05) 10px,
    rgba(255, 107, 0, 0.05) 20px
  );
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 10: CURSOR EFFECTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Custom Cursor (needs JS for position) ─── */
.nw-cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  border: 2px solid var(--nw-primary);
  border-radius: 50%;
  pointer-events: none;
  transition: transform 0.1s ease-out, width 0.2s, height 0.2s;
  z-index: 9999;
  mix-blend-mode: difference;
}

.nw-cursor-dot {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--nw-primary);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
}

.nw-cursor.nw-cursor-hover {
  width: 40px;
  height: 40px;
  border-color: var(--nw-secondary);
}

/* ─── Trail Effect ─── */
.nw-cursor-trail {
  position: fixed;
  width: 10px;
  height: 10px;
  background: var(--nw-primary);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.5;
  z-index: 9998;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 11: PAGE TRANSITION EFFECTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Fade Transition ─── */
.nw-page-fade {
  animation: nw-page-fade-in var(--nw-duration-slow) var(--nw-ease-smooth);
}

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

/* ─── Slide Up Transition ─── */
.nw-page-slide-up {
  animation: nw-page-slide-up var(--nw-duration-slow) var(--nw-ease-out-expo);
}

@keyframes nw-page-slide-up {
  from { 
    opacity: 0;
    transform: translateY(30px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Scale In Transition ─── */
.nw-page-scale {
  animation: nw-page-scale-in var(--nw-duration-slow) var(--nw-ease-out-expo);
}

@keyframes nw-page-scale-in {
  from { 
    opacity: 0;
    transform: scale(0.95);
  }
  to { 
    opacity: 1;
    transform: scale(1);
  }
}

/* ─── Wipe Transition Container ─── */
.nw-page-wipe {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
}

.nw-page-wipe-bar {
  position: absolute;
  width: 100%;
  height: 20%;
  background: var(--nw-primary);
  transform: scaleX(0);
  transform-origin: left;
}

.nw-page-wipe.nw-active .nw-page-wipe-bar {
  animation: nw-wipe-in 0.5s var(--nw-ease-out-expo) forwards,
             nw-wipe-out 0.5s var(--nw-ease-out-expo) 0.3s forwards;
}

@keyframes nw-wipe-in {
  to { transform: scaleX(1); }
}

@keyframes nw-wipe-out {
  from { transform-origin: right; transform: scaleX(1); }
  to { transform-origin: right; transform: scaleX(0); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 12: IMAGE & MEDIA EFFECTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Image Zoom ─── */
.nw-img-zoom {
  overflow: hidden;
}

.nw-img-zoom img {
  transition: transform var(--nw-duration-slow) var(--nw-ease-smooth);
}

.nw-img-zoom:hover img {
  transform: scale(1.1);
}

/* ─── Image Tilt ─── */
.nw-img-tilt {
  perspective: 1000px;
}

.nw-img-tilt img {
  transition: transform var(--nw-duration-normal) var(--nw-ease-smooth);
}

.nw-img-tilt:hover img {
  transform: rotateY(10deg) rotateX(5deg);
}

/* ─── Image Grayscale ─── */
.nw-img-grayscale img {
  filter: grayscale(100%);
  transition: filter var(--nw-duration-normal) var(--nw-ease-smooth);
}

.nw-img-grayscale:hover img {
  filter: grayscale(0%);
}

/* ─── Image Blur Reveal ─── */
.nw-img-blur img {
  filter: blur(5px);
  transition: filter var(--nw-duration-normal) var(--nw-ease-smooth);
}

.nw-img-blur:hover img {
  filter: blur(0);
}

/* ─── Image Shine ─── */
.nw-img-shine {
  position: relative;
  overflow: hidden;
}

.nw-img-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: transform 0.6s;
}

.nw-img-shine:hover::after {
  transform: translateX(100%);
}

/* ─── Image Overlay ─── */
.nw-img-overlay {
  position: relative;
  overflow: hidden;
}

.nw-img-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  opacity: 0;
  transition: opacity var(--nw-duration-normal) var(--nw-ease-smooth);
}

.nw-img-overlay:hover::after {
  opacity: 1;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 13: FORM & INPUT EFFECTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Input Underline ─── */
.nw-input-underline {
  position: relative;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--nw-bg-glass);
  padding: 10px 0;
  color: var(--nw-text-primary);
  transition: border-color var(--nw-duration-normal) var(--nw-ease-smooth);
}

.nw-input-underline:focus {
  outline: none;
  border-bottom-color: var(--nw-primary);
}

/* ─── Input Glow ─── */
.nw-input-glow {
  background: var(--nw-bg-glass);
  border: 1px solid transparent;
  border-radius: var(--nw-radius-md);
  padding: 12px 16px;
  color: var(--nw-text-primary);
  transition: box-shadow var(--nw-duration-normal) var(--nw-ease-smooth),
              border-color var(--nw-duration-normal) var(--nw-ease-smooth);
}

.nw-input-glow:focus {
  outline: none;
  border-color: var(--nw-primary);
  box-shadow: 0 0 20px rgba(255, 107, 0, 0.3);
}

/* ─── Floating Label ─── */
.nw-input-float-wrapper {
  position: relative;
}

.nw-input-float {
  padding: 20px 16px 8px;
}

.nw-input-float-label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nw-text-muted);
  pointer-events: none;
  transition: all var(--nw-duration-normal) var(--nw-ease-smooth);
}

.nw-input-float:focus + .nw-input-float-label,
.nw-input-float:not(:placeholder-shown) + .nw-input-float-label {
  top: 8px;
  transform: translateY(0);
  font-size: 0.75rem;
  color: var(--nw-primary);
}

/* ─── Checkbox Custom ─── */
.nw-checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--nw-primary);
  border-radius: var(--nw-radius-sm);
  cursor: pointer;
  position: relative;
  transition: all var(--nw-duration-fast) var(--nw-ease-smooth);
}

.nw-checkbox:checked {
  background: var(--nw-primary);
}

.nw-checkbox:checked::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
}

/* ─── Toggle Switch ─── */
.nw-toggle {
  appearance: none;
  width: 50px;
  height: 26px;
  background: var(--nw-bg-glass);
  border-radius: var(--nw-radius-full);
  cursor: pointer;
  position: relative;
  transition: background var(--nw-duration-normal) var(--nw-ease-smooth);
}

.nw-toggle::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: transform var(--nw-duration-normal) var(--nw-ease-bounce);
}

.nw-toggle:checked {
  background: var(--nw-primary);
}

.nw-toggle:checked::after {
  transform: translateX(24px);
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 14: TOOLTIP & POPOVER EFFECTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Tooltip ─── */
.nw-tooltip {
  position: relative;
}

.nw-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-5px);
  padding: 8px 12px;
  background: var(--nw-bg-darker);
  color: var(--nw-text-primary);
  font-size: 0.875rem;
  border-radius: var(--nw-radius-md);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--nw-duration-normal) var(--nw-ease-smooth);
  z-index: 1000;
}

.nw-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--nw-bg-darker);
  opacity: 0;
  visibility: hidden;
  transition: all var(--nw-duration-normal) var(--nw-ease-smooth);
}

.nw-tooltip:hover::after,
.nw-tooltip:hover::before {
  opacity: 1;
  visibility: visible;
}

/* ─── Tooltip Positions ─── */
.nw-tooltip-bottom::after {
  bottom: auto;
  top: 100%;
  transform: translateX(-50%) translateY(5px);
}

.nw-tooltip-bottom::before {
  bottom: auto;
  top: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--nw-bg-darker);
}

.nw-tooltip-left::after {
  bottom: auto;
  left: auto;
  right: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(-5px);
}

.nw-tooltip-right::after {
  bottom: auto;
  left: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(5px);
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 15: BADGE & TAG EFFECTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Badge ─── */
.nw-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--nw-radius-full);
  background: var(--nw-primary);
  color: white;
}

.nw-badge-outline {
  background: transparent;
  border: 1px solid var(--nw-primary);
  color: var(--nw-primary);
}

.nw-badge-glow {
  box-shadow: 0 0 10px var(--nw-primary);
}

/* ─── Notification Dot ─── */
.nw-notification-dot {
  position: relative;
}

.nw-notification-dot::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  background: var(--nw-error);
  border-radius: 50%;
  border: 2px solid var(--nw-bg-dark);
}

.nw-notification-dot-pulse::after {
  animation: nw-notification-pulse 2s ease-in-out infinite;
}

@keyframes nw-notification-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* ─── Status Indicator ─── */
.nw-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nw-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nw-success);
}

.nw-status-offline::before {
  background: var(--nw-text-muted);
}

.nw-status-busy::before {
  background: var(--nw-error);
}

.nw-status-away::before {
  background: var(--nw-warning);
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 16: SPECIAL EFFECTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Morphing Blob ─── */
.nw-blob {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: nw-blob-morph 8s ease-in-out infinite;
}

@keyframes nw-blob-morph {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50% { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; }
  75% { border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%; }
}

/* ─── Liquid Fill ─── */
.nw-liquid {
  position: relative;
  overflow: hidden;
}

.nw-liquid::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background: var(--nw-primary);
  border-radius: 45%;
  transform: translateX(-25%) translateY(75%) rotate(0deg);
  animation: nw-liquid-wave 3s linear infinite;
}

@keyframes nw-liquid-wave {
  to { transform: translateX(-25%) translateY(75%) rotate(360deg); }
}

/* ─── Typewriter Cursor ─── */
.nw-typewriter-cursor::after {
  content: '|';
  animation: nw-blink 1s step-start infinite;
}

@keyframes nw-blink {
  50% { opacity: 0; }
}

/* ─── Scan Line Effect ─── */
.nw-scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.1) 2px,
    rgba(0, 0, 0, 0.1) 4px
  );
  pointer-events: none;
}

/* ─── CRT Flicker ─── */
.nw-crt-flicker {
  animation: nw-crt-flicker 0.15s infinite;
}

@keyframes nw-crt-flicker {
  0% { opacity: 0.97; }
  50% { opacity: 1; }
  100% { opacity: 0.98; }
}

/* ─── Marquee ─── */
.nw-marquee {
  overflow: hidden;
  white-space: nowrap;
}

.nw-marquee-content {
  display: inline-block;
  animation: nw-marquee 20s linear infinite;
}

@keyframes nw-marquee {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

/* ─── Number Counter (needs JS) ─── */
.nw-counter {
  font-variant-numeric: tabular-nums;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 17: RESPONSIVE UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Disable Animations for Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Mobile-specific adjustments ─── */
@media (max-width: 768px) {
  :root {
    --nw-duration-fast: 0.1s;
    --nw-duration-normal: 0.2s;
    --nw-duration-slow: 0.4s;
  }
  
  /* Reduce heavy effects on mobile */
  .nw-bg-aurora::before {
    animation: none;
    opacity: 0.5;
  }
  
  .nw-card-holo::before {
    animation: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 18: UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Animation Play States ─── */
.nw-paused { animation-play-state: paused !important; }
.nw-running { animation-play-state: running !important; }

/* ─── Visibility ─── */
.nw-hidden { display: none !important; }
.nw-invisible { visibility: hidden !important; }

/* ─── Pointer Events ─── */
.nw-pointer-none { pointer-events: none !important; }
.nw-pointer-auto { pointer-events: auto !important; }

/* ─── Overflow ─── */
.nw-overflow-hidden { overflow: hidden !important; }
.nw-overflow-visible { overflow: visible !important; }

/* ─── Z-Index Layers ─── */
.nw-z-0 { z-index: 0; }
.nw-z-10 { z-index: 10; }
.nw-z-20 { z-index: 20; }
.nw-z-30 { z-index: 30; }
.nw-z-40 { z-index: 40; }
.nw-z-50 { z-index: 50; }
.nw-z-max { z-index: 9999; }

/* ─── GPU Acceleration ─── */
.nw-gpu {
  transform: translateZ(0);
  will-change: transform;
}

/* ─── Animation Delays ─── */
.nw-delay-100 { animation-delay: 0.1s; }
.nw-delay-200 { animation-delay: 0.2s; }
.nw-delay-300 { animation-delay: 0.3s; }
.nw-delay-400 { animation-delay: 0.4s; }
.nw-delay-500 { animation-delay: 0.5s; }
.nw-delay-750 { animation-delay: 0.75s; }
.nw-delay-1000 { animation-delay: 1s; }

/* ─── Animation Durations ─── */
.nw-duration-fast { animation-duration: var(--nw-duration-fast) !important; }
.nw-duration-normal { animation-duration: var(--nw-duration-normal) !important; }
.nw-duration-slow { animation-duration: var(--nw-duration-slow) !important; }
.nw-duration-slower { animation-duration: var(--nw-duration-slower) !important; }
.nw-duration-slowest { animation-duration: var(--nw-duration-slowest) !important; }

/* ─── Animation Iterations ─── */
.nw-infinite { animation-iteration-count: infinite !important; }
.nw-once { animation-iteration-count: 1 !important; }
.nw-twice { animation-iteration-count: 2 !important; }

/* ─── Animation Fill Modes ─── */
.nw-fill-forwards { animation-fill-mode: forwards !important; }
.nw-fill-backwards { animation-fill-mode: backwards !important; }
.nw-fill-both { animation-fill-mode: both !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   END OF NW VISUAL LIBRARY - CORE CSS
   ═══════════════════════════════════════════════════════════════════════════ */