frontend/src/index.css

@import '@fontsource/dm-serif-display';
@import '@fontsource/ibm-plex-sans/400.css';
@import '@fontsource/ibm-plex-sans/500.css';
@import '@fontsource/ibm-plex-sans/600.css';
@import '@fontsource/ibm-plex-mono/400.css';
@import '@fontsource/ibm-plex-mono/500.css';

@import "tailwindcss";
@config "../tailwind.config.js";

/* ─── Design Engineering: Custom Easing Curves ─── */
:root {
  --ease-out-expo: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-expo: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

@layer utilities {
  .glass-card {
    @apply bg-white/5 backdrop-blur-2xl border border-white/10;
  }
  .glass-ai-bubble {
    @apply bg-senti-primary-container/5 backdrop-blur-xl border border-senti-primary-container/20 relative;
  }
  .glass-ai-bubble-biz {
    @apply bg-senti-blue-600/5 backdrop-blur-xl border border-senti-blue-500/20 relative;
  }
  .glass-ai-bubble::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(80, 250, 123, 0.3), transparent, rgba(0, 218, 243, 0.3));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
  .glass-ai-bubble-biz::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.4), transparent, rgba(168, 85, 247, 0.3));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  /* ─── Neon glow: custom curve replaces ease-in-out ─── */
  .neon-glow {
    animation: neon-pulse 3s infinite cubic-bezier(0.77, 0, 0.175, 1);
  }

  /* ─── Button Press Feedback (Emil Design Eng) ─── */
  .btn-press {
    transition: transform 160ms var(--ease-out-expo);
    cursor: pointer;
  }
  .btn-press:active {
    transform: scale(0.97);
  }

  /* ─── Stagger Cascade Reveal (Stitch + High-End) ─── */
  .stagger-item {
    opacity: 0;
    transform: translateY(8px);
    animation: fadeSlideIn 350ms var(--ease-out-expo) forwards;
  }
  .stagger-item:nth-child(1)  { animation-delay: 0ms; }
  .stagger-item:nth-child(2)  { animation-delay: 40ms; }
  .stagger-item:nth-child(3)  { animation-delay: 80ms; }
  .stagger-item:nth-child(4)  { animation-delay: 120ms; }
  .stagger-item:nth-child(5)  { animation-delay: 160ms; }
  .stagger-item:nth-child(6)  { animation-delay: 200ms; }
  .stagger-item:nth-child(7)  { animation-delay: 240ms; }
  .stagger-item:nth-child(8)  { animation-delay: 280ms; }
  .stagger-item:nth-child(9)  { animation-delay: 320ms; }
  .stagger-item:nth-child(10) { animation-delay: 360ms; }

  /* ─── Nav stagger: tighter 30ms intervals ─── */
  .stagger-nav {
    opacity: 0;
    transform: translateY(6px);
    animation: fadeSlideIn 300ms var(--ease-out-expo) forwards;
  }
  .stagger-nav:nth-child(1)  { animation-delay: 0ms; }
  .stagger-nav:nth-child(2)  { animation-delay: 30ms; }
  .stagger-nav:nth-child(3)  { animation-delay: 60ms; }
  .stagger-nav:nth-child(4)  { animation-delay: 90ms; }
  .stagger-nav:nth-child(5)  { animation-delay: 120ms; }
  .stagger-nav:nth-child(6)  { animation-delay: 150ms; }
  .stagger-nav:nth-child(7)  { animation-delay: 180ms; }
  .stagger-nav:nth-child(8)  { animation-delay: 210ms; }
  .stagger-nav:nth-child(9)  { animation-delay: 240ms; }
  .stagger-nav:nth-child(10) { animation-delay: 270ms; }

  /* ─── Modal overlay entrance ─── */
  .modal-enter {
    animation: modalFadeIn 200ms var(--ease-out-expo) forwards;
  }
  .modal-panel-enter {
    animation: modalPanelIn 250ms var(--ease-out-expo) forwards;
  }
}

/* ─── Keyframes ─── */
@keyframes neon-pulse {
  0%, 100% { opacity: 0.8; box-shadow: 0 0 10px rgba(80, 250, 123, 0.3); }
  50% { opacity: 1; box-shadow: 0 0 20px rgba(80, 250, 123, 0.6); }
}

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

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

@keyframes modalPanelIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ─── Alert pulse: subtle opacity only, no bounce ─── */
@keyframes alertPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
.alert-pulse {
  animation: alertPulse 2.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

/* ─── Accessibility: Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
  .stagger-item,
  .stagger-nav,
  .modal-enter,
  .modal-panel-enter {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .neon-glow {
    animation: none;
  }
  .btn-press:active {
    transform: none;
  }
}

/* ─── Touch Device Hover Gate ─── */
@media (hover: none) {
  .hover-gate:hover {
    background: initial;
    transform: none;
  }
}

/* Custom Scrollbar for dark theme */
* {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
*::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.chat-scroll::-webkit-scrollbar {
  width: 4px;
}
.chat-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.chat-scroll::-webkit-scrollbar-thumb {
  background: rgba(80, 250, 123, 0.1);
  border-radius: 10px;
}