/* =============================================================================
   SCROLLBAR STYLES
   ============================================================================= */

::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--track-color);
  border-radius: var(--border-radius-default);
}

::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: var(--border-radius-default);
  border: 2px solid var(--track-color);
  min-height: 30px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-overlay);
}

::-webkit-scrollbar-corner {
  background: var(--track-color);
}

/* Use standardized properties ONLY for browsers that don't support webkit */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) var(--track-color);
  }
}

/* =============================================================================
   BASE STYLES & FONTS
   ============================================================================= */

@font-face {
  font-family: myFont;
  src: url("../fonts/aquire-font/AquireLight-YzE0o.otf");
}

* {
  font-family: var(--default-font);
  text-decoration: none;
  box-sizing: border-box;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background: var(--primary-bg);
  color: var(--text-color-default);
}

/* =============================================================================
   CSS CUSTOM PROPERTIES (COLOR PALETTES)
   ============================================================================= */

:root {
  /* Base Design System */
  --my-font: "myFont";
  --default-font: 'Rajdhani', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --track-color: transparent;

  /* Default Theme Variables */
  --gradient-bg:
    radial-gradient(circle at 30% 70%, rgba(0, 0, 0, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
  --primary-bg: #0c0c0c;
  --secondary-bg: #141414;
  --content-bg: #1f1f1f;
  --static-overlay: rgba(0, 0, 0, 0.3);
  --accent-overlay: rgba(64, 64, 64, 0.5);
  --default-overlay: linear-gradient(135deg, rgba(63, 63, 63, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%);
  --drop-shadow1: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
  --drop-shadow2: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5));
  --accent-color: #9e9e9e;
  --primary-btn: linear-gradient(to right, var(--secondary-bg), var(--accent-color));
  --secondary-btn: var(--content-bg);
  --btn-accent: #9e9e9e;
  --text-color-default: #f0f0f0;
  --static-color: #f0f0f0;
  --shadow-hover: 0 0 16px var(--accent-overlay);
  --blur: blur(5px);

  /* Border Round Style */
  --border-radius-default: 14px;
  --border-radius-round: 50%;
  --border-radius-50px: 50px;

  /* Border Line Style */
  --border-thin: 1px solid var(--border-color);
  --border-thick: 2px solid var(--border-color);
  --border-thicker: 3px solid var(--border-color);

  /* Success (Green) */
  --success: #10b981;
  --success-bg: rgba(16, 185, 129, 0.1);

  /* Error (Red) */
  --error: #ef4444;
  --error-bg: rgba(239, 68, 68, 0.1);

  /* Warning (Amber) */
  --warning: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.1);

  /* Shadow System */
  --shadow-light: 0 0 2px rgba(0, 0, 0, 0.9);
  --shadow-medium: 0 0 3px rgba(0, 0, 0, 0.9);
  --shadow-heavy: 0 0 5px rgba(0, 0, 0, 0.9);
  --text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
  
  /* Font Sizes */
  --font-size-xxs: 0.75rem;
  --font-size-xs:  0.875rem;
  --font-size-sm:  1rem;
  --font-size-md:  1.25rem;
  --font-size-lg:  1.5rem;
  --font-size-xl:  1.875rem;
  --font-size-xxl: 2.25rem;
  --font-size-3xl: 3.75rem;

  /* Text Opacity */
  --text-opacity-strong: 0.5;
  --text-opacity-medium: 0.7;
  --text-opacity-light: 0.8;

  /*Button sizes*/
  --btn-font-size: 1rem;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing Scale */
  --line-height: 1.6;
  --letter-spacing: 0.01em;

  /* Animation & Transition Timing */
  --timing-fast: 0.2s ease;
  --timing-normal: 0.3s ease;
  --timing-slow: 0.5s ease;
  --timing-slower: 0.7s ease;
  --timing-extra-slow: 1s ease;

  --timing-linear-fast: 0.2s linear;
  --timing-linear-normal: 0.4s linear;
  --timing-linear-slow: 0.6s linear;

  --timing-bounce-fast: 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --timing-bounce-normal: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --timing-bounce-slow: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Animation Delay Scale */
  --delay-stagger-xs: 0.05s;
  --delay-stagger-sm: 0.1s;
  --delay-stagger-md: 0.15s;
  --delay-stagger-lg: 0.2s;

  /* Transformations */
  --translateY-up: translateY(-4px);
  --translateY-down: translateY(4px);
  --scale-up-base: scale(1.07);
  --scale-up-light: scale(1.02);
  --scale-down: scale(0.9);
}

/* =============================================================================
   THEME VARIATIONS - DARK THEMES
   ============================================================================= */

.theme-default {
  --gradient-bg:
    radial-gradient(circle at 30% 70%, rgba(0, 0, 0, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
  --drop-shadow1: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
  --drop-shadow2: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5));
  --primary-bg: #0c0c0c;
  --secondary-bg: #141414;
  --content-bg: #1f1f1f;
  --accent-overlay: rgba(64, 64, 64, 0.5);
  --default-overlay: linear-gradient(135deg, rgba(63, 63, 63, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%);
  --border-color: rgba(158, 158, 158, 0.2);
  --accent-color: #9e9e9e;
  --primary-btn: linear-gradient(to right, var(--secondary-bg), var(--accent-color));
  --secondary-btn: var(--content-bg);
  --btn-accent: #9e9e9e;
  --text-color-default: #f0f0f0;
  --shadow-hover: 0 0 16px var(--accent-overlay);
  --border-thin: 1px solid var(--border-color);
  --border-thick: 2px solid var(--border-color);
  --border-thicker: 3px solid var(--border-color);
}

.theme-dark-blue {
  --gradient-bg:
    radial-gradient(circle at 30% 70%, rgba(0, 89, 255, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(255, 0, 221, 0.2) 0%, transparent 50%);
  --drop-shadow1: drop-shadow(0 0 10px rgba(255, 0, 200, 0.5));
  --drop-shadow2: drop-shadow(0 0 20px rgba(0, 17, 255, 0.5));
  --primary-bg: #1c1f27;
  --secondary-bg: #1a2635;
  --content-bg: #1b3044;
  --accent-overlay: rgba(30, 143, 255, 0.5);
  --default-overlay: linear-gradient(135deg, rgba(0, 4, 255, 0.2) 0%, rgba(255, 0, 234, 0.2) 100%);
  --border-color: rgba(30, 144, 255, 0.2);
  --accent-color: #1e90ff;
  --primary-btn: linear-gradient(to right, var(--secondary-bg), var(--accent-color));
  --secondary-btn: var(--content-bg);
  --btn-accent: #1e90ff;
  --text-color-default: #f0f0f0;
  --shadow-hover: 0 0 16px var(--accent-overlay);
  --border-thin: 1px solid var(--border-color);
  --border-thick: 2px solid var(--border-color);
  --border-thicker: 3px solid var(--border-color);
}

.theme-dark-red {
  --gradient-bg:
    radial-gradient(circle at 30% 70%, rgba(255, 0, 0, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(255, 0, 234, 0.2) 0%, transparent 50%);
  --drop-shadow1: drop-shadow(0 0 10px rgba(255, 0, 221, 0.5));
  --drop-shadow2: drop-shadow(0 0 20px rgba(255, 0, 0, 0.5));
  --primary-bg: #160f0f;
  --secondary-bg: #2e1616;
  --content-bg: #4b1d1d;
  --accent-overlay: rgba(255, 30, 30, 0.5);
  --default-overlay: linear-gradient(135deg, rgba(255, 0, 0, 0.2) 0%, rgba(255, 0, 179, 0.2) 100%);
  --border-color: rgba(255, 30, 30, 0.2);
  --accent-color: #ff1e1e;
  --primary-btn: linear-gradient(to right, var(--secondary-bg), var(--accent-color));
  --secondary-btn: var(--content-bg);
  --btn-accent: #ff1e1e;
  --text-color-default: #f0f0f0;
  --shadow-hover: 0 0 16px var(--accent-overlay);
  --border-thin: 1px solid var(--border-color);
  --border-thick: 2px solid var(--border-color);
  --border-thicker: 3px solid var(--border-color);
}

.theme-dark-purple {
  --gradient-bg:
    radial-gradient(circle at 30% 70%, rgba(255, 0, 242, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(0, 4, 255, 0.2) 0%, transparent 50%);
  --drop-shadow1: drop-shadow(0 0 10px rgba(4, 0, 255, 0.5));
  --drop-shadow2: drop-shadow(0 0 20px rgba(255, 0, 200, 0.5));
  --primary-bg: #11051a;
  --secondary-bg: #2c162e;
  --content-bg: #2c173b;
  --accent-overlay: rgba(168, 50, 255, 0.5);
  --default-overlay: linear-gradient(135deg, rgba(255, 0, 200, 0.2) 0%, rgba(4, 0, 255, 0.2) 100%);
  --border-color: rgba(168, 50, 255, 0.2);
  --accent-color: #a832ff;
  --primary-btn: linear-gradient(to right, var(--secondary-bg), var(--accent-color));
  --secondary-btn: var(--content-bg);
  --btn-accent: #a832ff;
  --text-color-default: #f0f0f0;
  --shadow-hover: 0 0 16px var(--accent-overlay);
  --border-thin: 1px solid var(--border-color);
  --border-thick: 2px solid var(--border-color);
  --border-thicker: 3px solid var(--border-color);
}

.theme-dark-green {
  --gradient-bg:
    radial-gradient(circle at 30% 70%, rgba(9, 255, 0, 0.2) 0%, transparent 50%),
    radial-gradient( circle at 70% 30%, rgba(255, 251, 0, 0.2) 0%, transparent 50%);
  --drop-shadow1: drop-shadow(0 0 10px rgba(255, 251, 0, 0.5));
  --drop-shadow2: drop-shadow(0 0 20px rgba(30, 255, 0, 0.5));
  --primary-bg: #051a08;
  --secondary-bg: #162e17;
  --content-bg: #123325;
  --accent-overlay: rgba(50, 255, 168, 0.5);
  --default-overlay: linear-gradient( 135deg, rgba(43, 255, 0, 0.2) 0%, rgba(255, 251, 0, 0.2) 100%);
  --border-color: rgba(50, 255, 168, 0.2);
  --accent-color: #32ffa8;
  --primary-btn: linear-gradient(to right, var(--secondary-bg), var(--accent-color));
  --secondary-btn: var(--content-bg);
  --btn-accent: #32ffa8;
  --text-color-default: #f0f0f0;
  --shadow-hover: 0 0 16px var(--accent-overlay);
  --border-thin: 1px solid var(--border-color);
  --border-thick: 2px solid var(--border-color);
  --border-thicker: 3px solid var(--border-color);
}

.theme-dark-yellow {
  --gradient-bg:
    radial-gradient( circle at 30% 70%, rgba(255, 238, 0, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(255, 81, 0, 0.2) 0%, transparent 50%);
  --drop-shadow1: drop-shadow(0 0 10px rgba(255, 0, 0, 0.5));
  --drop-shadow2: drop-shadow(0 0 20px rgba(255, 251, 0, 0.5));
  --primary-bg: #1a1a05;
  --secondary-bg: #2e2e16;
  --content-bg: #3f2d13;
  --accent-overlay: rgba(255, 168, 50, 0.5);
  --default-overlay: linear-gradient(135deg, rgba(251, 255, 0, 0.2) 0%, rgba(255, 115, 0, 0.2) 100%);
  --border-color: rgba(255, 168, 50, 0.2);
  --accent-color: #ffa832;
  --primary-btn: linear-gradient(to right, var(--secondary-bg), var(--accent-color));
  --secondary-btn: var(--content-bg);
  --btn-accent: #ffa832;
  --text-color-default: #f0f0f0;
  --shadow-hover: 0 0 16px var(--accent-overlay);
  --border-thin: 1px solid var(--border-color);
  --border-thick: 2px solid var(--border-color);
  --border-thicker: 3px solid var(--border-color);
}

/* =============================================================================
   THEME VARIATIONS - LIGHT THEMES
   ============================================================================= */

.theme-modern-white {
  --gradient-bg:
    radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(0, 0, 0, 0.2) 0%, transparent 50%);
  --drop-shadow1: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
  --drop-shadow2: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
  --primary-bg: #ffffff;
  --secondary-bg: #f0f0f0;
  --content-bg: #e2e2e2;
  --accent-overlay: rgba(172, 172, 172, 0.5);
  --default-overlay: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(133, 133, 133, 0.2) 100%);
  --border-color: rgba(0, 0, 0, 0.2);
  --accent-color: #4d4d4d;
  --primary-btn: linear-gradient(to right, var(--secondary-bg), var(--accent-color));
  --secondary-btn: var(--content-bg);
  --btn-accent: #2e2b2b;
  --text-color-default: #2e2e2e;
  --shadow-hover: 0 0 16px var(--accent-overlay);
  --border-thin: 1px solid var(--border-color);
  --border-thick: 2px solid var(--border-color);
  --border-thicker: 3px solid rgba(0, 0, 0, 0.1);
}

.theme-white-blue {
  --gradient-bg:
    radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(0, 150, 255, 0.2) 0%, transparent 50%);
  --drop-shadow1: drop-shadow(0 0 10px rgba(0, 60, 255, 0.5));
  --drop-shadow2: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
  --primary-bg: #ffffff;
  --secondary-bg: #e8f5ff;
  --content-bg: #e2f0ff;
  --accent-overlay: rgba(30, 143, 255, 0.5);
  --default-overlay: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 47, 255, 0.2) 100%);
  --border-color: rgba(30, 144, 255, 0.2);
  --accent-color: #1e90ff;
  --primary-btn: linear-gradient(to right, var(--secondary-bg), var(--accent-color));
  --secondary-btn: var(--content-bg);
  --btn-accent: #062747;
  --text-color-default: #333333;
  --shadow-hover: 0 0 16px var(--accent-overlay);
  --border-thin: 1px solid var(--border-color);
  --border-thick: 2px solid var(--border-color);
  --border-thicker: 3px solid rgba(0, 0, 0, 0.1);
}

.theme-white-red {
  --gradient-bg:
    radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(255, 0, 0, 0.2) 0%, transparent 50%);
  --drop-shadow1: drop-shadow(0 0 10px rgba(255, 0, 0, 0.5));
  --drop-shadow2: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
  --primary-bg: #ffffff;
  --secondary-bg: #ffe8e8;
  --content-bg: #ffe0e0;
  --accent-overlay: rgba(255, 30, 30, 0.5);
  --default-overlay: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 0, 0, 0.2) 100%);
  --border-color: rgba(255, 30, 30, 0.2);
  --accent-color: #ff1e1e;
  --primary-btn: linear-gradient(to right, var(--secondary-bg), var(--accent-color));
  --secondary-btn: var(--content-bg);
  --btn-accent: #520808;
  --text-color-default: #333333;
  --shadow-hover: 0 0 16px var(--accent-overlay);
  --border-thin: 1px solid var(--border-color);
  --border-thick: 2px solid var(--border-color);
  --border-thicker: 3px solid rgba(0, 0, 0, 0.1);
}

.theme-white-purple {
  --gradient-bg:
    radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(255, 0, 234, 0.2) 0%, transparent 50%);
  --drop-shadow1: drop-shadow(0 0 10px rgba(255, 0, 221, 0.5));
  --drop-shadow2: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
  --primary-bg: #ffffff;
  --secondary-bg: #fbe6ff;
  --content-bg: #f2deff;
  --accent-overlay: rgba(168, 50, 255, 0.5);
  --default-overlay: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 0, 212, 0.2) 100%);
  --border-color: rgba(168, 50, 255, 0.2);
  --accent-color: #a832ff;
  --primary-btn: linear-gradient(to right, var(--secondary-bg), var(--accent-color));
  --secondary-btn: var(--content-bg);
  --btn-accent: #2f084b;
  --text-color-default: #333333;
  --shadow-hover: 0 0 16px var(--accent-overlay);
  --border-thin: 1px solid var(--border-color);
  --border-thick: 2px solid var(--border-color);
  --border-thicker: 3px solid rgba(0, 0, 0, 0.1);
}

.theme-white-green {
  --gradient-bg:
    radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(51, 255, 0, 0.2) 0%, transparent 50%);
  --drop-shadow1: drop-shadow(0 0 10px rgba(21, 255, 0, 0.5));
  --drop-shadow2: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
  --primary-bg: #ffffff;
  --secondary-bg: #e9ffea;
  --content-bg: #dcfff0;
  --accent-overlay: rgba(50, 255, 168, 0.5);
  --default-overlay: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(9, 255, 0, 0.2) 100%);
  --border-color: rgba(29, 216, 138, 0.2);
  --accent-color: #1dd88a;
  --primary-btn: linear-gradient(to right, var(--secondary-bg), var(--accent-color));
  --secondary-btn: var(--content-bg);
  --btn-accent: #07422a;
  --text-color-default: #333333;
  --shadow-hover: 0 0 16px var(--accent-overlay);
  --border-thin: 1px solid var(--border-color);
  --border-thick: 2px solid var(--border-color);
  --border-thicker: 3px solid rgba(0, 0, 0, 0.1);
}

.theme-white-yellow {
  --gradient-bg:
    radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(255, 251, 0, 0.2) 0%, transparent 50%);
  --drop-shadow1: drop-shadow(0 0 10px rgba(255, 230, 0, 0.5));
  --drop-shadow2: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
  --primary-bg: #ffffff;
  --secondary-bg: #ffffe8;
  --content-bg: #fff2df;
  --accent-overlay: rgba(255, 168, 50, 0.5);
  --default-overlay: linear-gradient(135deg,rgba(255, 255, 255, 0.2) 0%, rgba(255, 238, 0, 0.2) 100%);
  --border-color: rgba(243, 158, 39, 0.2);
  --accent-color: #f39e27;
  --primary-btn: linear-gradient(to right, var(--secondary-bg), var(--accent-color));
  --secondary-btn: var(--content-bg);
  --btn-accent: #4b2f08;
  --text-color-default: #333333;
  --shadow-hover: 0 0 16px var(--accent-overlay);
  --border-thin: 1px solid var(--border-color);
  --border-thick: 2px solid var(--border-color);
  --border-thicker: 3px solid rgba(0, 0, 0, 0.1);
}

/* =============================================================================
   INTERACTIVE ELEMENTS
   ============================================================================= */

a { color: var(--text-color-default); }

input, textarea, select { background: var(--content-bg); }

button {
  color: var(--text-color-default);
  border: unset;
  background: var(--content-bg);
  font-family: var(--default-font);
  font-size: var(--font-size-sm);
}

a span,
button span {
  font-family: var(--default-font);
}

a, a i, a p, a img, a span,
button, button i, button p, button img, button span {
  cursor: pointer;
}

/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */

.dL {
  color: #0f8fdf;
  font-size: var(--font-size-xs);
}

/* =============================================================================
   ANIMATION KEYFRAMES
   ============================================================================= */

/* Rotation Animations */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Fade & Slide Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes slideInRight {
  from {
    transform: translateX(40%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-40%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideContentTxt {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInFromTop {
  from {
    opacity: 0;
    transform: translate(-50%, -60%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

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

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

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

/* Modal Animations */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pop {
  50% { transform: scale(1.02); }
}

/* Movement Animations */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes talk-bounce {
  0%, 80%, 100% { transform: translateY(0) scale(1.03); }
  20% { transform: translateY(-8px) scale(1.03); }
  40% { transform: translateY(0) scale(1.03); }
  60% { transform: translateY(-6px) scale(1.03); }
}

@keyframes floatX {
  0% { transform: translateX(-100px); }
  100% { transform: translateX(100px); }
}

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

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@keyframes wiggleAnimation {
  0%, 100% { transform: rotate(-2deg); }
  20%, 60% { transform: rotate(2deg); }
  40%, 80% { transform: rotate(-2deg); }
}

@keyframes aiMoodWave {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.45);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
}

@keyframes ContactStatusPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 40%, transparent); }
  50%       { box-shadow: 0 0 0 5px color-mix(in srgb, var(--success) 0%, transparent); }
}

@keyframes ComicStatusPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--accent-color); }
  50% { opacity: 0.6; box-shadow: 0 0 0 4px transparent; }
}

@keyframes codex-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--character-accent); }
  50%      { opacity: 0.4; box-shadow: 0 0 2px var(--character-accent); }
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 10px var(--accent-color); }
  50% { box-shadow: 0 0 5px var(--accent-color); }
}

@keyframes aiPulse {
  0%, 100% { box-shadow: 0 0 5px var(--accent-color); }
  50% { box-shadow: 0 0 20px var(--accent-color); }
}

@keyframes aiPulse-record {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50% { transform: translateY(-50%) scale(1.1); }
}

@keyframes aiTyping {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

/* Effect Animations */
@keyframes shimmer {
  0% { transform: translateX(-100%) rotate(40deg); }
  100% { transform: translateX(100%) rotate(40deg); }
}

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

@keyframes sparkle {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

@keyframes barShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

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

@keyframes titleGlow {
  0% { filter: var(--drop-shadow1); }
  100% { filter: var(--drop-shadow2); }
}

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

@keyframes slideInScale {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(50px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes floatCharacter {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(1deg); }
  50% { transform: translateY(0px) rotate(0deg); }
  75% { transform: translateY(-5px) rotate(-1deg); }
}

@keyframes flip {
  0%, 100% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
}

@keyframes speakingPulse {
  0%, 100% {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(0, 195, 255, 0.3);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 40px rgba(0, 204, 255, 0.5);
  }
}

@keyframes glow {
  0% { text-shadow: 0 0 20px rgba(0, 174, 255, 0.5); }
  100% { text-shadow: 0 0 30px rgba(0, 119, 255, 0.8); }
}

@keyframes textShimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

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

@keyframes particleFloat {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% {
    transform: translateY(-10vh) rotate(360deg);
    opacity: 0;
  }
}

/* =============================================================================
   ANIMATION UTILITY CLASSES & PRESETS
   ============================================================================= */

/* Fade Animations */
.animate-fade-in {
  animation: fadeIn var(--timing-normal) forwards;
}

.animate-fade-in-fast {
  animation: fadeIn var(--timing-fast) forwards;
}

.animate-fade-in-slow {
  animation: fadeIn var(--timing-slow) forwards;
}

/* Fade In Up Animations */
.animate-fade-in-up {
  animation: fadeInUp var(--timing-normal) forwards;
  opacity: 0;
}

.animate-fade-in-up-fast {
  animation: fadeInUp var(--timing-fast) forwards;
  opacity: 0;
}

.animate-fade-in-up-slow {
  animation: fadeInUp var(--timing-slow) forwards;
  opacity: 0;
}

/* Slide Up Animations */
.animate-slide-up {
  animation: slideUp var(--timing-normal) forwards;
  opacity: 0;
}

.animate-slide-up-fast {
  animation: slideUp var(--timing-fast) forwards;
  opacity: 0;
}

.animate-slide-up-slow {
  animation: slideUp var(--timing-slow) forwards;
  opacity: 0;
}

/* Slide In Animations */
.animate-slide-in {
  animation: slideIn var(--timing-normal) forwards;
  opacity: 0;
}

.animate-slide-in-fast {
  animation: slideIn var(--timing-fast) forwards;
  opacity: 0;
}

.animate-slide-in-slow {
  animation: slideIn var(--timing-slow) forwards;
  opacity: 0;
}

/* Slide In Right Animations */
.animate-slide-in-right {
  animation: slideInRight var(--timing-normal) forwards;
  opacity: 0;
}

.animate-slide-in-right-fast {
  animation: slideInRight var(--timing-fast) forwards;
  opacity: 0;
}

.animate-slide-in-right-slow {
  animation: slideInRight var(--timing-slow) forwards;
  opacity: 0;
}

/* Slide In Left Animations */
.animate-slide-in-left {
  animation: slideInLeft var(--timing-normal) forwards;
  opacity: 0;
}

.animate-slide-in-left-fast {
  animation: slideInLeft var(--timing-fast) forwards;
  opacity: 0;
}

.animate-slide-in-left-slow {
  animation: slideInLeft var(--timing-slow) forwards;
  opacity: 0;
}

/* Pop Animation */
.animate-pop {
  animation: pop var(--timing-normal);
}

.animate-pop-fast {
  animation: pop var(--timing-fast);
}

.animate-pop-slow {
  animation: pop var(--timing-slow);
}

/* Bounce Animation */
.animate-bounce {
  animation: bounce var(--timing-normal) infinite;
}

.animate-bounce-fast {
  animation: bounce var(--timing-fast) infinite;
}

.animate-bounce-slow {
  animation: bounce var(--timing-slow) infinite;
}

/* Rotate Animation */
.animate-rotate {
  animation: rotate 20s linear infinite;
}

.animate-rotate-fast {
  animation: rotate 10s linear infinite;
}

.animate-rotate-slow {
  animation: rotate 30s linear infinite;
}

/* Float Animations */
.animate-float-y {
  animation: floatY var(--timing-slow) infinite;
}

.animate-float-x {
  animation: floatX var(--timing-slow) infinite;
}

/* Pulse Animation */
.animate-pulse {
  animation: pulse var(--timing-normal) forwards;
}

/* Shake Animation */
.animate-shake {
  animation: shake var(--timing-fast);
}

/* Stagger Animation Helper */
.animate-stagger-1 {
  animation-delay: calc(var(--delay-stagger-sm) * 1);
}

.animate-stagger-2 {
  animation-delay: calc(var(--delay-stagger-sm) * 2);
}

.animate-stagger-3 {
  animation-delay: calc(var(--delay-stagger-sm) * 3);
}

.animate-stagger-4 {
  animation-delay: calc(var(--delay-stagger-sm) * 4);
}

.animate-stagger-5 {
  animation-delay: calc(var(--delay-stagger-sm) * 5);
}

/* Transition Utility Classes */
.transition-all {
  transition: all var(--timing-normal);
}

.transition-all-fast {
  transition: all var(--timing-fast);
}

.transition-all-slow {
  transition: all var(--timing-slow);
}

.transition-colors {
  transition: color var(--timing-normal), background-color var(--timing-normal), border-color var(--timing-normal);
}

.transition-colors-fast {
  transition: color var(--timing-fast), background-color var(--timing-fast), border-color var(--timing-fast);
}

.transition-transform {
  transition: transform var(--timing-normal), opacity var(--timing-normal);
}

.transition-transform-fast {
  transition: transform var(--timing-fast), opacity var(--timing-fast);
}