/* ============================================
   Ripple — Centralized Design System
   Design tokens, animations, component styles
   Company: Odento Infolabs Pvt Ltd
   ============================================ */

/* ---- DESIGN TOKENS (CSS Custom Properties) ---- */
:root {
  /* Brand Colors */
  --color-brand: #9333ea;
  --color-brand-accent: #a855f7;
  --color-brand-light: #c084fc;
  --color-brand-dark: #7e22ce;
  --color-brand-darker: #6b21a8;
  --color-ink: #0f172a;
  --color-ink-light: #64748b;
  --color-ink-lighter: #94a3b8;
  --color-border: #e5e7eb;
  --color-surface: #ffffff;
  --color-surface-alt: #f8fafc;

  /* Typography Scale — readable sizes */
  --font-display: 3.5rem;     /* 56px — hero h1 */
  --font-h1: 3rem;            /* 48px */
  --font-h2: 2.25rem;         /* 36px */
  --font-h3: 1.75rem;         /* 28px */
  --font-h4: 1.375rem;        /* 22px */
  --font-body: 1.0625rem;     /* 17px — body text */
  --font-body-sm: 0.9375rem;  /* 15px — secondary text */
  --font-caption: 0.875rem;   /* 14px — captions, labels (was 12px) */
  --font-label: 0.8125rem;    /* 13px — footer links, small labels */

  /* Spacing */
  --space-section: 6rem;
  --space-card: 2rem;
  --space-gap: 1.5rem;

  /* Radius */
  --radius-card: 1.5rem;
  --radius-button: 9999px;
  --radius-input: 0.75rem;

  /* Shadows */
  --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 16px 32px -4px rgba(0, 0, 0, 0.08), 0 4px 12px -2px rgba(147, 51, 234, 0.06);
  --shadow-glow: 0 10px 40px -10px rgba(147, 51, 234, 0.35);
  --shadow-bubble: 0 25px 50px -12px rgba(168, 85, 247, 0.35);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.25s var(--ease-out);
  --transition-med: 0.4s var(--ease-out);
  --transition-slow: 0.75s var(--ease-out);
}

/* ---- BASE ---- */
body {
  font-family: 'Inter', sans-serif;
  color: var(--color-ink);
  background-color: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-size: var(--font-body);
  line-height: 1.6;
}

/* ---- TAILWIND FONT SIZE OVERRIDES ---- */
/* Make text-xs readable (was 12px → now 14px) */
.text-xs { font-size: var(--font-caption) !important; line-height: 1.5 !important; }
.text-sm { font-size: var(--font-body-sm) !important; line-height: 1.55 !important; }
.text-\[11px\] { font-size: var(--font-label) !important; line-height: 1.5 !important; }
.text-\[10px\] { font-size: var(--font-label) !important; line-height: 1.5 !important; }

/* ---- AMBIENT EFFECTS ---- */
.purple-radial-glow {
  background: radial-gradient(circle, rgba(216, 180, 254, 0.45) 0%, rgba(243, 232, 255, 0.2) 45%, rgba(255, 255, 255, 0) 70%);
}

.bubble-gradient {
  background: linear-gradient(135deg, #c084fc 0%, #9333ea 50%, #7e22ce 100%);
}

.bubble-3d-shadow {
  filter: drop-shadow(0px 24px 32px rgba(147, 51, 234, 0.38));
  transition: transform var(--transition-med), filter var(--transition-med);
}
.bubble-3d-shadow:hover {
  filter: drop-shadow(0px 30px 40px rgba(147, 51, 234, 0.52));
  transform: translateY(-8px) scale(1.05);
}

/* ---- MARQUEE ---- */
.animate-marquee {
  display: flex;
  width: 200%;
  animation: marquee 26s linear infinite;
}
.animate-marquee:hover {
  animation-play-state: paused;
}

/* ---- SCROLL REVEAL ---- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0px);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92) translateY(24px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  will-change: opacity, transform;
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1) translateY(0px);
}

.reveal-delay-100 { transition-delay: 0.1s; }
.reveal-delay-200 { transition-delay: 0.2s; }
.reveal-delay-300 { transition-delay: 0.3s; }

/* ---- FLOATING ANIMATIONS ---- */
.float-anim-1 { animation: gentleFloat1 6.5s ease-in-out infinite; }
.float-anim-2 { animation: gentleFloat2 7.5s ease-in-out infinite 0.7s; }
.float-anim-3 { animation: gentleFloat3 6s ease-in-out infinite 1.4s; }

@keyframes gentleFloat1 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(1.5deg); }
}
@keyframes gentleFloat2 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(-2deg); }
}
@keyframes gentleFloat3 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(2.5deg); }
}

/* ---- HOVER INTERACTIONS ---- */
.hover-card {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.hover-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(147, 51, 234, 0.3);
}

.hover-btn-black {
  transition: all var(--transition-fast);
}
.hover-btn-black:hover {
  background-color: #1f2937;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
}
.hover-btn-black:active {
  transform: translateY(0px) scale(0.97);
}

.hover-btn-purple {
  transition: all var(--transition-fast);
}
.hover-btn-purple:hover {
  background-color: var(--color-brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -5px rgba(147, 51, 234, 0.3);
}
.hover-btn-purple:active {
  transform: translateY(0px) scale(0.97);
}

.hover-btn-outline {
  transition: all var(--transition-fast);
}
.hover-btn-outline:hover {
  background-color: var(--color-surface-alt);
  border-color: var(--color-ink);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -3px rgba(0, 0, 0, 0.06);
}
.hover-btn-outline:active {
  transform: translateY(0px) scale(0.97);
}

.hover-image-zoom {
  overflow: hidden;
}
.hover-image-zoom img {
  transition: transform 0.6s var(--ease-out);
}
.hover-image-zoom:hover img {
  transform: scale(1.06);
}

.hover-abstract {
  transition: transform 0.6s var(--ease-out);
}
.group:hover .hover-abstract {
  transform: scale(1.08) rotate(2deg);
}

/* ---- GLASS NAV ---- */
.glass {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: var(--color-surface-alt);
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ---- HERO GLOW ---- */
.hero-glow {
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(216, 180, 254, 0.3), transparent 70%);
}

/* ---- FOOTER READABILITY ---- */
footer h4 {
  font-size: var(--font-body-sm) !important;
  font-weight: 700 !important;
}
footer a {
  font-size: var(--font-label) !important;
  line-height: 1.7 !important;
}
footer p {
  font-size: var(--font-label) !important;
  line-height: 1.7 !important;
}

/* ---- CARD READABILITY ---- */
.hover-card p,
.hover-card span:not(.stat-counter) {
  line-height: 1.6 !important;
}