@tailwind base;
@tailwind components;
@tailwind utilities;

/* ================================================================
   ViewRelay Portal — Custom Utilities & Overrides
   ================================================================
   The main design system lives in viewrelay-theme.css (BEM classes).
   This file contains Tailwind layer customizations and animations.
   ================================================================ */

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInFromRight {
  from { transform: translateX(1rem); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInFromTop {
  from { transform: translateY(-0.5rem); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.animate-in { animation: fadeIn 0.3s ease-in; }
.fade-in { animation: fadeIn 0.3s ease-in; }
.slide-in-from-right-4 { animation: slideInFromRight 0.3s ease-in; }
.slide-in-from-top { animation: slideInFromTop 0.2s ease-out; }

/* Scrollbar Styling — Light theme */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-page, #F4F6F9);
}

::-webkit-scrollbar-thumb {
  background: var(--vr-neutral-300, #CBD5E1);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--vr-neutral-400, #758698);
}

/* Utility animations */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

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

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

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

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