/* ═══════════════════════════════════════════════════════════════════
   RIDERFAST — Client Design System
   ═══════════════════════════════════════════════════════════════════ */

/* ── Keyframes ───────────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.04); opacity: .85; }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes countPop {
  0%   { opacity: 0; transform: translateY(12px) scale(0.9); }
  60%  { transform: translateY(-2px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dotPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 1; transform: scale(1); }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(45,74,83,0.15); }
  50%      { box-shadow: 0 4px 30px rgba(45,74,83,0.35); }
}
@keyframes shineMove {
  0%, 100% { left: -100%; }
  50%      { left: 150%; }
}

/* ── Animation utilities ─────────────────────────────────────────── */
.anim-fade-up     { animation: fadeInUp .55s cubic-bezier(.22,1,.36,1) both; }
.anim-fade-in     { animation: fadeIn .5s ease-out both; }
.anim-scale-in    { animation: scaleIn .45s cubic-bezier(.22,1,.36,1) both; }
.anim-slide-left  { animation: slideInLeft .5s cubic-bezier(.22,1,.36,1) both; }
.anim-slide-right { animation: slideInRight .5s cubic-bezier(.22,1,.36,1) both; }
.anim-slide-down  { animation: slideInDown .45s cubic-bezier(.22,1,.36,1) both; }
.anim-count-pop   { animation: countPop .7s cubic-bezier(.22,1,.36,1) both; }
.anim-breathe     { animation: breathe 3s ease-in-out infinite; }
.anim-float       { animation: float 3.5s ease-in-out infinite; }

/* Stagger delays */
.d-0  { animation-delay: 0ms; }
.d-1  { animation-delay: 60ms; }
.d-2  { animation-delay: 120ms; }
.d-3  { animation-delay: 180ms; }
.d-4  { animation-delay: 240ms; }
.d-5  { animation-delay: 300ms; }
.d-6  { animation-delay: 360ms; }
.d-7  { animation-delay: 420ms; }
.d-8  { animation-delay: 480ms; }
.d-9  { animation-delay: 540ms; }
.d-10 { animation-delay: 600ms; }

/* ── Card system ─────────────────────────────────────────────────── */
.rf-card {
  border-radius: 2rem;
  border: 1px solid rgba(0,0,0,0.04);
  transition: transform .32s cubic-bezier(.22,1,.36,1), box-shadow .32s ease;
}
.rf-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.06);
}
.rf-card:active {
  transform: scale(0.985);
}
.dark .rf-card {
  border-color: rgba(255,255,255,0.06);
}
.dark .rf-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}

/* Solid surface (replaces glassmorphism) */
.rf-glass {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.dark .rf-glass {
  background: #1a2a30;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Shine sweep on card */
.rf-shine {
  position: relative;
  overflow: hidden;
}
.rf-shine::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
  animation: shineMove 5s ease-in-out infinite;
  pointer-events: none;
}

/* ── Interactive elements ────────────────────────────────────────── */
.rf-tap {
  -webkit-tap-highlight-color: transparent;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
  cursor: pointer;
}
.rf-tap:active {
  transform: scale(0.95);
}

.rf-btn {
  -webkit-tap-highlight-color: transparent;
  transition: all .25s cubic-bezier(.22,1,.36,1);
  position: relative;
  overflow: hidden;
}
.rf-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(45,74,83,0.25);
}
.rf-btn:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(45,74,83,0.15);
}

.rf-menu-item {
  transition: all .25s cubic-bezier(.22,1,.36,1);
  -webkit-tap-highlight-color: transparent;
}
.rf-menu-item:hover {
  background: rgba(45,74,83,0.04);
  transform: translateX(4px);
}
.rf-menu-item:active {
  transform: scale(0.98);
}
.dark .rf-menu-item:hover {
  background: rgba(45,74,83,0.08);
}

/* ── Typography ──────────────────────────────────────────────────── */
.rf-gradient-text {
  background: linear-gradient(135deg, #2D4A53 0%, #1E3A42 50%, #69818D 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.rf-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* ── Visual effects ──────────────────────────────────────────────── */
.rf-glow {
  animation: glowPulse 2.5s ease-in-out infinite;
}

/* Typing indicator dots */
.rf-typing-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(45,74,83,0.5);
  display: inline-block;
}
.rf-typing-dot:nth-child(1) { animation: dotPulse 1.4s infinite 0s; }
.rf-typing-dot:nth-child(2) { animation: dotPulse 1.4s infinite 0.2s; }
.rf-typing-dot:nth-child(3) { animation: dotPulse 1.4s infinite 0.4s; }

/* Animated bar */
.rf-bar {
  transition: height 0.8s cubic-bezier(.22,1,.36,1);
}

/* Gradient border */
.rf-border-glow {
  position: relative;
  border-radius: 2rem;
}
.rf-border-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(45,74,83,0.4), rgba(30,58,66,0.1), rgba(105,129,141,0.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── Page auto-stagger ───────────────────────────────────────────── */
.rf-page > * {
  opacity: 0;
  animation: fadeInUp .55s cubic-bezier(.22,1,.36,1) both;
}
.rf-page > *:nth-child(1)  { animation-delay: 0ms; }
.rf-page > *:nth-child(2)  { animation-delay: 70ms; }
.rf-page > *:nth-child(3)  { animation-delay: 140ms; }
.rf-page > *:nth-child(4)  { animation-delay: 210ms; }
.rf-page > *:nth-child(5)  { animation-delay: 280ms; }
.rf-page > *:nth-child(6)  { animation-delay: 350ms; }
.rf-page > *:nth-child(7)  { animation-delay: 420ms; }
.rf-page > *:nth-child(8)  { animation-delay: 490ms; }
.rf-page > *:nth-child(9)  { animation-delay: 560ms; }
.rf-page > *:nth-child(10) { animation-delay: 630ms; }

/* ── Custom scrollbar ────────────────────────────────────────────── */
.rf-scroll::-webkit-scrollbar { width: 3px; }
.rf-scroll::-webkit-scrollbar-track { background: transparent; }
.rf-scroll::-webkit-scrollbar-thumb { background: rgba(45,74,83,0.15); border-radius: 99px; }

/* ── Modal sheet ─────────────────────────────────────────────────── */
.rf-sheet {
  border-radius: 2.5rem 2.5rem 0 0;
  box-shadow: 0 -20px 60px rgba(0,0,0,0.15);
}
.dark .rf-sheet {
  box-shadow: 0 -20px 60px rgba(0,0,0,0.5);
}

/* ── Badges ──────────────────────────────────────────────────────── */
.rf-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ── Skeleton placeholder ────────────────────────────────────────── */
.rf-skeleton {
  background: linear-gradient(90deg,
    rgba(45,74,83,0.04) 25%,
    rgba(45,74,83,0.08) 50%,
    rgba(45,74,83,0.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.8s infinite;
  border-radius: 12px;
}

/* ── Body base ───────────────────────────────────────────────────── */
body {
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[x-cloak] { display: none !important; }