/* Google Fonts are loaded in HTML */

:root {
  --ring-color: #4FC3F7;
}

html {
  scroll-behavior: smooth;
}

/* ─── Keyframes (copied from xoul_ai/index.html) ─────────────────────────── */

@keyframes ripple {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.5); opacity: 0; }
}

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

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

@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes slideUp {
  0%   { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

@keyframes mood-flash {
  0%   { opacity: 0; }
  20%  { opacity: 0.3; }
  100% { opacity: 0; }
}

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

@keyframes shudder {
  0%   { transform: translateX(0); }
  16%  { transform: translateX(2px); }
  33%  { transform: translateX(-2px); }
  50%  { transform: translateX(2px); }
  66%  { transform: translateX(-2px); }
  83%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

@keyframes mood-slow-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.4; }
  50%       { transform: scale(1.05); opacity: 0.8; }
}

@keyframes fadeInUp {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes checkPop {
  0%   { transform: scale(0);   opacity: 0; }
  70%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

/* ─── Standard keyframes ─────────────────────────────────────────────────── */

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

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

/* ─── Animation utilities ────────────────────────────────────────────────── */

.animate-float          { animation: float 6s ease-in-out infinite; }
.animate-pulse-slow     { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-spin-slow      { animation: spin 12s linear infinite; }
.animate-reverse-spin   { animation: reverse-spin 15s linear infinite; }
.animate-ripple         { animation: ripple 1.5s linear infinite; }
.animate-fade-in        { animation: fadeIn 0.5s ease-out forwards; }
.animate-fade-in-up     { animation: fadeInUp 0.5s ease-out forwards; opacity: 0; }
.animate-mood-slow-pulse{ animation: mood-slow-pulse 4s ease-in-out infinite; }

/* ─── Mood ring transition ───────────────────────────────────────────────── */

.mood-ring-layer {
  transition: border-color 1.5s ease, background-color 1.5s ease, box-shadow 1.5s ease;
}

/* ─── Stagger delays ─────────────────────────────────────────────────────── */

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }

/* ─── Hide scrollbar ─────────────────────────────────────────────────────── */

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

/* ─── Stat bar transition ────────────────────────────────────────────────── */

.stat-bar { transition: width 1s ease-out; width: 0; }

/* ─── Pre-animation state ────────────────────────────────────────────────── */

.pre-animate { opacity: 0; transform: translateY(12px); }