@import "tailwindcss";

/* Enable class-based dark mode in Tailwind v4 */
@custom-variant dark (&:where(.dark, .dark *));

/* ============================================================================
   Neobrutalism Design System
   ============================================================================ */

@theme {
  /* -------------------------------------------------------------------------
     Colors - Primary palette
     ------------------------------------------------------------------------- */
  --color-neo-bg: #fffef5;
  --color-neo-card: #ffffff;
  --color-neo-pending: #ffd60a;
  --color-neo-progress: #00b4d8;
  --color-neo-done: #70e000;
  --color-neo-accent: #ff006e;
  --color-neo-danger: #ff5400;
  --color-neo-border: #1a1a1a;
  --color-neo-text: #1a1a1a;
  --color-neo-text-secondary: #4a4a4a;
  --color-neo-text-muted: #6b6b6b;

  /* Dark text for bright backgrounds (always dark regardless of theme) */
  --color-neo-text-on-bright: #1a1a1a;

  /* -------------------------------------------------------------------------
     Colors - Neutral scale
     ------------------------------------------------------------------------- */
  --color-neo-neutral-50: #fafafa;
  --color-neo-neutral-100: #f5f5f5;
  --color-neo-neutral-200: #e5e5e5;
  --color-neo-neutral-300: #d4d4d4;
  --color-neo-neutral-400: #a3a3a3;
  --color-neo-neutral-500: #737373;
  --color-neo-neutral-600: #525252;
  --color-neo-neutral-700: #404040;
  --color-neo-neutral-800: #262626;
  --color-neo-neutral-900: #171717;

  /* -------------------------------------------------------------------------
     Colors - Semantic states
     ------------------------------------------------------------------------- */
  --color-neo-error-bg: #fef2f2;
  --color-neo-error-border: #fecaca;
  --color-neo-error-text: #dc2626;
  --color-neo-error: #dc2626;
  --color-neo-surface: #ffffff;

  /* Hover states */
  --color-neo-hover-subtle: rgba(0, 0, 0, 0.05);

  /* -------------------------------------------------------------------------
     Colors - Log levels
     ------------------------------------------------------------------------- */
  --color-neo-log-error: #ef4444;
  --color-neo-log-warning: #f59e0b;
  --color-neo-log-info: #3b82f6;
  --color-neo-log-debug: #6b7280;
  --color-neo-log-success: #22c55e;

  /* GLM/Alternative API badge */
  --color-neo-glm: #8b5cf6;

  /* Additional semantic colors */
  --color-neo-category-pink: #ff006e;
  --color-neo-category-cyan: #00b4d8;
  --color-neo-category-green: #70e000;
  --color-neo-category-yellow: #ffd60a;
  --color-neo-category-orange: #ff5400;
  --color-neo-category-purple: #8338ec;
  --color-neo-category-blue: #3a86ff;

  /* -------------------------------------------------------------------------
     Typography - Font stacks with proper fallbacks
     ------------------------------------------------------------------------- */
  --font-neo-display: 'Archivo Black', 'Bebas Neue', 'Impact', system-ui, sans-serif;
  --font-neo-sans: 'Work Sans', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-neo-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* -------------------------------------------------------------------------
     Shadows - Solid black for light mode
     ------------------------------------------------------------------------- */
  --shadow-neo-sm: 2px 2px 0px #1a1a1a;
  --shadow-neo-md: 4px 4px 0px #1a1a1a;
  --shadow-neo-lg: 6px 6px 0px #1a1a1a;
  --shadow-neo-xl: 8px 8px 0px #1a1a1a;
  --shadow-neo-left: -4px 0px 0px #1a1a1a;
  --shadow-neo-left-lg: -8px 0px 0px #1a1a1a;
  --shadow-neo-inset: inset 2px 2px 0 var(--color-neo-border);
  --shadow-neo-inset-lg: inset 4px 4px 0 var(--color-neo-border);

  /* -------------------------------------------------------------------------
     Transitions
     ------------------------------------------------------------------------- */
  --transition-neo-fast: 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-neo-normal: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Transition timing */
  --transition-fast: 150ms;
  --transition-normal: 250ms;
  --transition-slow: 400ms;
  --transition-slower: 600ms;

  /* Easing functions */
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* -------------------------------------------------------------------------
     Spacing scale
     ------------------------------------------------------------------------- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* -------------------------------------------------------------------------
     Z-index scale
     ------------------------------------------------------------------------- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-tooltip: 500;
  --z-toast: 600;

  /* -------------------------------------------------------------------------
     Border radius tokens
     ------------------------------------------------------------------------- */
  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;
}

/* ============================================================================
   Base Layer - Foundation styles
   ============================================================================ */

/* Dark mode - must be outside @layer to override @theme values */
.dark {
  --color-neo-bg: #121212;
  --color-neo-card: #1e1e1e;
  --color-neo-pending: #ffca28;
  --color-neo-progress: #26c6da;
  --color-neo-done: #66bb6a;
  --color-neo-accent: #f50057;
  --color-neo-danger: #ff6e40;
  --color-neo-border: #e0e0e0;
  --color-neo-text: #f5f5f5;
  --color-neo-text-secondary: #b0b0b0;
  --color-neo-text-muted: #757575;

  /* Dark text for bright backgrounds (unchanged in dark mode) */
  --color-neo-text-on-bright: #1a1a1a;

  /* Neutral scale for dark mode (inverted) */
  --color-neo-neutral-50: #171717;
  --color-neo-neutral-100: #262626;
  --color-neo-neutral-200: #404040;
  --color-neo-neutral-300: #525252;
  --color-neo-neutral-400: #737373;
  --color-neo-neutral-500: #a3a3a3;
  --color-neo-neutral-600: #d4d4d4;
  --color-neo-neutral-700: #e5e5e5;
  --color-neo-neutral-800: #f5f5f5;
  --color-neo-neutral-900: #fafafa;

  /* Semantic error states for dark mode */
  --color-neo-error-bg: rgba(244, 67, 54, 0.15);
  --color-neo-error-border: rgba(244, 67, 54, 0.4);
  --color-neo-error-text: #ef5350;
  --color-neo-error: #ef5350;
  --color-neo-surface: #1e1e1e;

  /* Hover states */
  --color-neo-hover-subtle: rgba(255, 255, 255, 0.08);

  /* Log level colors for dark mode - adjusted for dark backgrounds */
  --color-neo-log-error: #f87171;
  --color-neo-log-warning: #fbbf24;
  --color-neo-log-info: #60a5fa;
  --color-neo-log-debug: #9ca3af;
  --color-neo-log-success: #4ade80;

  /* GLM/Alternative API badge for dark mode */
  --color-neo-glm: #a78bfa;

  /* Shadows - lighter for dark mode with subtle glow */
  --shadow-neo-sm: 2px 2px 0px rgba(224, 224, 224, 0.7);
  --shadow-neo-md: 4px 4px 0px rgba(224, 224, 224, 0.7);
  --shadow-neo-lg: 6px 6px 0px rgba(224, 224, 224, 0.7);
  --shadow-neo-xl: 8px 8px 0px rgba(224, 224, 224, 0.7);
  --shadow-neo-left: -4px 0px 0px rgba(224, 224, 224, 0.7);
  --shadow-neo-left-lg: -8px 0px 0px rgba(224, 224, 224, 0.7);
  --shadow-neo-inset: inset 2px 2px 0 var(--color-neo-border);
  --shadow-neo-inset-lg: inset 4px 4px 0 var(--color-neo-border);
}

@layer base {
  body {
    font-family: var(--font-neo-sans);
    background-color: var(--color-neo-bg);
    color: var(--color-neo-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* Force form elements to inherit colors properly */
  button,
  input,
  textarea,
  select {
    color: inherit;
    font-family: inherit;
  }
}

/* ============================================================================
   Component Layer - Reusable component styles
   ============================================================================ */

@layer components {
  /* Cards */
  .neo-card {
    background: var(--color-neo-card);
    border: 3px solid var(--color-neo-border);
    box-shadow: var(--shadow-neo-md);
    transition: transform var(--transition-neo-fast), box-shadow var(--transition-neo-fast);
  }

  .neo-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-neo-lg);
  }

  /* Card Elevation Variants */
  .neo-card-elevated {
    box-shadow: var(--shadow-neo-lg);
  }

  .neo-card-flat {
    box-shadow: none;
    border-width: 2px;
  }

  .neo-card-sunken {
    box-shadow: var(--shadow-neo-inset);
  }

  /* Buttons */
  .neo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-family: var(--font-neo-display);
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--color-neo-text);
    background-color: var(--color-neo-card);
    border: 3px solid var(--color-neo-border);
    box-shadow: var(--shadow-neo-md);
    transition: transform var(--transition-neo-fast), box-shadow var(--transition-neo-fast);
    cursor: pointer;
  }

  .neo-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-neo-lg);
  }

  .neo-btn:active {
    transform: translate(2px, 2px);
    box-shadow: var(--shadow-neo-sm);
  }

  .neo-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: var(--shadow-neo-sm) !important;
  }

  /* Button Size Variants */
  .neo-btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
  }

  .neo-btn-lg {
    padding: 0.875rem 1.75rem;
    font-size: 1.125rem;
  }

  .neo-btn-icon {
    padding: 0.5rem;
    aspect-ratio: 1;
  }

  /* Button Loading State */
  .neo-btn-loading {
    position: relative;
    color: transparent;
  }

  .neo-btn-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--color-neo-border);
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
  }

  .neo-btn-primary {
    background-color: #ff006e;
    color: #ffffff;
  }

  .neo-btn-success {
    background-color: #70e000;
    color: #1a1a1a;
  }

  .neo-btn-warning {
    background-color: #ffd60a;
    color: #1a1a1a;
  }

  .neo-btn-danger {
    background-color: #ff5400;
    color: #ffffff;
  }

  .neo-btn-ghost {
    background-color: transparent;
    color: var(--color-neo-text);
    box-shadow: none;
  }

  .neo-btn-ghost:hover {
    background-color: rgba(128, 128, 128, 0.1);
    color: var(--color-neo-text);
    box-shadow: none;
    transform: none;
  }

  /* YOLO Mode Button - Animated fire effect for when YOLO mode is enabled */
  .neo-btn-yolo {
    position: relative;
    will-change: transform, filter;
    background:
      radial-gradient(ellipse at 20% 80%, rgba(255, 200, 0, 0.4) 0%, transparent 50%),
      radial-gradient(ellipse at 80% 80%, rgba(255, 150, 0, 0.3) 0%, transparent 50%),
      radial-gradient(ellipse at 50% 90%, rgba(255, 100, 0, 0.5) 0%, transparent 40%),
      linear-gradient(
        0deg,
        #8b0000 0%,
        #c43500 20%,
        #d64500 35%,
        #ff6a00 55%,
        #ff8c00 75%,
        #ffa500 90%,
        #ffcc00 100%
      );
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 300%;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 200, 0, 0.5);
    animation:
      fireGlow 0.8s ease-in-out infinite,
      fireGradient 2s ease-in-out infinite,
      fireFlicker 0.3s ease-in-out infinite;
    overflow: visible;
  }

  .neo-btn-yolo::before {
    content: '';
    position: absolute;
    inset: -2px;
    background:
      radial-gradient(circle at 30% 100%, rgba(255, 200, 0, 0.6) 0%, transparent 30%),
      radial-gradient(circle at 70% 100%, rgba(255, 150, 0, 0.5) 0%, transparent 25%),
      radial-gradient(circle at 50% 100%, rgba(255, 100, 0, 0.7) 0%, transparent 35%);
    background-size: 100% 200%;
    z-index: -1;
    animation: fireParticles 1.5s ease-in-out infinite;
    filter: blur(4px);
    opacity: 0.8;
  }

  .neo-btn-yolo::after {
    content: '';
    position: absolute;
    top: -4px;
    left: 10%;
    right: 10%;
    height: 8px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 220, 0, 0.6) 20%,
      rgba(255, 255, 200, 0.8) 50%,
      rgba(255, 220, 0, 0.6) 80%,
      transparent 100%
    );
    filter: blur(3px);
    animation: fireFlicker 0.4s ease-in-out infinite reverse;
    opacity: 0.9;
  }

  .neo-btn-yolo:hover {
    background:
      radial-gradient(ellipse at 20% 80%, rgba(255, 220, 0, 0.5) 0%, transparent 50%),
      radial-gradient(ellipse at 80% 80%, rgba(255, 180, 0, 0.4) 0%, transparent 50%),
      radial-gradient(ellipse at 50% 90%, rgba(255, 120, 0, 0.6) 0%, transparent 40%),
      linear-gradient(
        0deg,
        #a00000 0%,
        #d64500 20%,
        #e65c00 35%,
        #ff7800 55%,
        #ff9c00 75%,
        #ffb700 90%,
        #ffdd00 100%
      );
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 300%;
  }

  .neo-btn-yolo:hover::before {
    opacity: 1;
    filter: blur(6px);
  }

  /* Inputs */
  .neo-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-neo-sans);
    font-size: 1rem;
    color: var(--color-neo-text);
    background-color: var(--color-neo-card);
    border: 3px solid var(--color-neo-border);
    box-shadow: 3px 3px 0px rgba(128, 128, 128, 0.2);
    transition: transform var(--transition-neo-fast), box-shadow var(--transition-neo-fast);
  }

  .neo-input::placeholder {
    color: var(--color-neo-text-secondary);
    opacity: 0.7;
  }

  .neo-input:focus {
    outline: none;
    transform: translate(-1px, -1px);
    box-shadow: var(--shadow-neo-md);
    border-color: #ff006e;
  }

  /* Input Variants */
  .neo-input-error {
    border-color: var(--color-neo-error);
    background-color: color-mix(in srgb, var(--color-neo-error) 5%, var(--color-neo-surface));
  }

  .neo-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--color-neo-neutral-200);
  }

  .neo-textarea {
    min-height: 6rem;
    resize: vertical;
  }

  /* Badge */
  .neo-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-family: var(--font-neo-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-neo-text);
    border: 2px solid var(--color-neo-border);
  }

  /* Badge Color Variants */
  .neo-badge-success {
    background-color: var(--color-neo-done);
    color: var(--color-neo-text-on-bright);
  }

  .neo-badge-warning {
    background-color: var(--color-neo-pending);
    color: var(--color-neo-text-on-bright);
  }

  .neo-badge-error {
    background-color: var(--color-neo-error);
    color: white;
  }

  .neo-badge-info {
    background-color: var(--color-neo-progress);
    color: var(--color-neo-text-on-bright);
  }

  /* Badge Size Variants */
  .neo-badge-sm {
    padding: 0.125rem 0.375rem;
    font-size: 0.625rem;
  }

  .neo-badge-lg {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
  }

  /* Progress Bar */
  .neo-progress {
    width: 100%;
    height: 2rem;
    background-color: var(--color-neo-card);
    border: 3px solid var(--color-neo-border);
    box-shadow: var(--shadow-neo-sm);
    overflow: hidden;
  }

  .neo-progress-fill {
    height: 100%;
    background-color: var(--color-neo-done);
    transition: width 0.5s ease-out;
    position: relative;
  }

  /* Progress Bar Shimmer Effect */
  .neo-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,0.2) 50%,
      transparent 100%
    );
    animation: shimmer 2s infinite;
  }

  /* Modal */
  .neo-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-backdrop);
  }

  .neo-modal {
    background-color: var(--color-neo-card);
    border: 4px solid var(--color-neo-border);
    box-shadow: var(--shadow-neo-xl);
    animation: popIn 0.3s var(--transition-neo-fast);
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
    z-index: var(--z-modal);
  }

  /* Dropdown */
  .neo-dropdown {
    background-color: var(--color-neo-card);
    border: 3px solid var(--color-neo-border);
    box-shadow: var(--shadow-neo-lg);
    z-index: var(--z-dropdown);
  }

  .neo-dropdown-item {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    cursor: pointer;
    color: var(--color-neo-text);
    background-color: transparent;
    text-align: left;
    border: none;
    font-size: 0.875rem;
    transition: background-color var(--transition-neo-fast);
  }

  .neo-dropdown-item:hover {
    background-color: var(--color-neo-pending);
    color: #1a1a1a;
  }

  /* Tooltip - Neobrutalism style with light bg and dark text */
  .neo-tooltip {
    background: var(--color-neo-surface);
    color: var(--color-neo-text);
    border: 2px solid var(--color-neo-border);
    box-shadow: var(--shadow-neo-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    z-index: var(--z-tooltip);
  }

  /* Empty State */
  .neo-empty-state {
    background-color: var(--color-neo-bg);
    border: 4px dashed var(--color-neo-border);
    padding: 2rem;
    text-align: center;
  }
}

/* ============================================================================
   Animations
   ============================================================================ */

@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

@keyframes neoPulse {
  0%, 100% {
    box-shadow: 6px 6px 0px rgba(0, 180, 216, 0.3);
  }
  50% {
    box-shadow: 6px 6px 0px rgba(0, 180, 216, 0.8);
  }
}

@keyframes completePop {
  0% {
    transform: scale(0.8);
  }
  60% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes thoughtFade {
  0% {
    opacity: 0;
    transform: translateY(-4px);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

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

@keyframes fireGlow {
  0%, 100% {
    box-shadow:
      4px 4px 0 var(--color-neo-border),
      0 0 10px rgba(255, 100, 0, 0.6),
      0 0 20px rgba(255, 60, 0, 0.4),
      0 -5px 15px rgba(255, 200, 0, 0.3),
      inset 0 -2px 8px rgba(255, 200, 0, 0.2);
  }
  25% {
    box-shadow:
      4px 4px 0 var(--color-neo-border),
      0 0 18px rgba(255, 80, 0, 0.7),
      0 0 35px rgba(255, 40, 0, 0.5),
      0 -8px 20px rgba(255, 180, 0, 0.4),
      inset 0 -3px 12px rgba(255, 180, 0, 0.25);
  }
  50% {
    box-shadow:
      4px 4px 0 var(--color-neo-border),
      0 0 14px rgba(255, 120, 0, 0.8),
      0 0 28px rgba(255, 50, 0, 0.6),
      0 -6px 18px rgba(255, 220, 0, 0.35),
      inset 0 -2px 10px rgba(255, 220, 0, 0.3);
  }
  75% {
    box-shadow:
      4px 4px 0 var(--color-neo-border),
      0 0 22px rgba(255, 70, 0, 0.65),
      0 0 40px rgba(255, 30, 0, 0.45),
      0 -10px 25px rgba(255, 160, 0, 0.45),
      inset 0 -4px 14px rgba(255, 160, 0, 0.2);
  }
}

@keyframes fireGradient {
  0% {
    background-position: 0% 100%;
  }
  25% {
    background-position: 50% 50%;
  }
  50% {
    background-position: 100% 0%;
  }
  75% {
    background-position: 50% 50%;
  }
  100% {
    background-position: 0% 100%;
  }
}

@keyframes fireFlicker {
  0%, 100% {
    filter: brightness(1) saturate(1);
  }
  25% {
    filter: brightness(1.1) saturate(1.2);
  }
  50% {
    filter: brightness(0.95) saturate(1.1);
  }
  75% {
    filter: brightness(1.15) saturate(1.15);
  }
}

@keyframes fireParticles {
  0% {
    background-position: 0% 100%, 50% 100%, 100% 100%;
  }
  50% {
    background-position: 25% 0%, 50% 25%, 75% 0%;
  }
  100% {
    background-position: 0% 100%, 50% 100%, 100% 100%;
  }
}

@keyframes slide-in-top {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-in-bottom {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

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

@keyframes scale-pop {
  0% {
    transform: scale(0.95);
    opacity: 0;
  }
  40% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

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

/* ============================================================================
   Utilities Layer
   ============================================================================ */

@layer utilities {
  .animate-slide-in {
    animation: slideIn 0.3s ease-out;
  }

  .animate-pop-in {
    animation: popIn 0.3s var(--transition-neo-fast);
  }

  .animate-pulse-neo {
    animation: neoPulse 2s infinite;
  }

  .animate-complete {
    animation: completePop 0.5s var(--transition-neo-fast);
  }

  .animate-thought-fade {
    animation: thoughtFade 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  }

  .animate-shimmer {
    background: linear-gradient(
      90deg,
      var(--color-neo-text) 0%,
      var(--color-neo-text) 40%,
      var(--color-neo-progress) 50%,
      var(--color-neo-text) 60%,
      var(--color-neo-text) 100%
    );
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: shimmer 2s ease-in-out infinite;
  }

  /* Slide animations */
  .animate-slide-in-top {
    animation: slide-in-top var(--transition-normal) var(--ease-out-back);
  }

  .animate-slide-in-bottom {
    animation: slide-in-bottom var(--transition-normal) var(--ease-out-back);
  }

  .animate-slide-in-left {
    animation: slide-in-left var(--transition-normal) var(--ease-out-back);
  }

  /* Bounce and pop animations */
  .animate-bounce-in {
    animation: bounce-in var(--transition-slow) var(--ease-bounce);
  }

  .animate-scale-pop {
    animation: scale-pop var(--transition-normal) var(--ease-out-back);
  }

  /* Error shake animation */
  .animate-shake {
    animation: shake 0.5s ease-in-out;
  }

  /* Stagger delay utilities for sequential animations */
  .stagger-1 {
    animation-delay: 50ms;
  }

  .stagger-2 {
    animation-delay: 100ms;
  }

  .stagger-3 {
    animation-delay: 150ms;
  }

  .stagger-4 {
    animation-delay: 200ms;
  }

  .stagger-5 {
    animation-delay: 250ms;
  }

  .font-display {
    font-family: var(--font-neo-display);
  }

  .font-sans {
    font-family: var(--font-neo-sans);
  }

  .font-mono {
    font-family: var(--font-neo-mono);
  }
}

/* ============================================================================
   Scrollbar Styling (outside layers for broad compatibility)
   ============================================================================ */

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

::-webkit-scrollbar-track {
  background: var(--color-neo-bg);
  border: 2px solid var(--color-neo-border);
}

::-webkit-scrollbar-thumb {
  background: var(--color-neo-border);
  border: 2px solid var(--color-neo-border);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-neo-text-secondary);
}