/* ============================================
   NEUROLINK QUEST - UTILITY STYLES
   File: nlq-utilities-q19.css
   CUBE CSS Architecture - Utility Layer
   ============================================ */

@layer utilities {
  /* ============================================
     DISPLAY UTILITIES
     ============================================ */
  .hidden {
    display: none !important;
  }

  .block {
    display: block !important;
  }

  .inline-block {
    display: inline-block !important;
  }

  .flex {
    display: flex !important;
  }

  .inline-flex {
    display: inline-flex !important;
  }

  .grid {
    display: grid !important;
  }

  /* ============================================
     TEXT UTILITIES
     ============================================ */
  .text-center {
    text-align: center !important;
  }

  .text-left {
    text-align: left !important;
  }

  .text-right {
    text-align: right !important;
  }

  .text-primary {
    color: var(--color-primary) !important;
  }

  .text-secondary {
    color: var(--color-text-secondary) !important;
  }

  .text-muted {
    color: var(--color-text-muted) !important;
  }

  /* ============================================
     SPACING UTILITIES
     ============================================ */
  .mt-4 {
    margin-top: var(--space-4) !important;
  }

  .mt-8 {
    margin-top: var(--space-8) !important;
  }

  .mb-4 {
    margin-bottom: var(--space-4) !important;
  }

  .mb-8 {
    margin-bottom: var(--space-8) !important;
  }

  .p-4 {
    padding: var(--space-4) !important;
  }

  .p-8 {
    padding: var(--space-8) !important;
  }

  /* ============================================
     ANIMATION UTILITIES
     ============================================ */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

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

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

  .animate-fade-in {
    animation: fadeIn var(--transition-base);
  }

  .animate-slide-up {
    animation: slideUp var(--transition-slow);
  }

  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  /* ============================================
     RESPONSIVE UTILITIES
     ============================================ */
  @container (max-width: 767px) {
    .hide-mobile {
      display: none !important;
    }
  }

  @container (min-width: 768px) {
    .hide-desktop {
      display: none !important;
    }
  }
}