/* ════════════════════════════════════════════════════════════════════════════════
   KREYOL IA — Extended Design System v2.0
   Animations, Gradients, Textures & Micro-Interactions
   ════════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ══════════════════════════════════════════════════════════════════════════════
     EXTENDED COLOR PALETTE — Adding warmth & depth
     ══════════════════════════════════════════════════════════════════════════════ */
  
  /* Base palette (from v1.0) */
  --color-primary-500: #00D4AA;
  --color-primary-600: #00aa89;
  --color-secondary-500: #F0A500;
  --color-secondary-600: #c48400;
  
  /* NEW: Accent colors for warmth & personality */
  --accent-coral: #FF6B5B;
  --accent-coral-light: #FF8F7D;
  --accent-coral-dark: #E54435;
  
  --accent-electric: #00FFFF;
  --accent-electric-dim: rgba(0, 255, 255, 0.4);
  
  --accent-bronze: #B8860B;
  --accent-bronze-light: #DAA520;
  
  --accent-sage: #9CAF88;
  --accent-sage-light: #C5D9B7;
  
  /* Void & Surface (from v1.0) */
  --color-void: #09090F;
  --color-void-deep: #070A0F;
  --color-surface-card: #0D1219;
  --color-surface-glass: rgba(15, 15, 28, 0.92);
  --color-surface-divider: rgba(245, 240, 232, 0.14);
  --color-surface-overlay: rgba(0, 0, 0, 0.72);
  --color-surface-cream: #F5F0E8;
  
  /* ══════════════════════════════════════════════════════════════════════════════
     GRADIENT COLLECTIONS — Cohesive, memorable gradients
     ══════════════════════════════════════════════════════════════════════════════ */
  
  /* Hero gradient: Tech meets Caribbean warmth */
  --gradient-hero: linear-gradient(
    135deg,
    var(--color-primary-500) 0%,
    var(--accent-coral) 100%
  );
  
  /* Organic mesh: Flowing, non-linear, conic gradient */
  --gradient-mesh-warm: conic-gradient(
    from 45deg at 25% 35%,
    var(--color-primary-500) 0deg,
    var(--color-secondary-500) 90deg,
    var(--accent-coral) 180deg,
    var(--color-primary-500) 360deg
  );
  
  /* Neon night: Tech-forward electric feel */
  --gradient-neon: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 255, 255, 0.3) 50%,
    transparent 100%
  );
  
  /* Sunset gradient: Caribbean vibes */
  --gradient-sunset: linear-gradient(
    180deg,
    #FF6B5B 0%,
    #F0A500 50%,
    #00D4AA 100%
  );
  
  /* Gold accent gradient */
  --gradient-gold: linear-gradient(
    135deg,
    var(--color-secondary-500) 0%,
    #D4890A 100%
  );
  
  /* Subtle dark gradient (for backgrounds) */
  --gradient-dark: linear-gradient(
    90deg,
    var(--color-void-deep) 0%,
    var(--color-surface-card) 50%,
    var(--color-void-deep) 100%
  );
  
  /* ══════════════════════════════════════════════════════════════════════════════
     ANIMATION TIMING & EASING
     ══════════════════════════════════════════════════════════════════════════════ */
  
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
  --duration-slower: 500ms;
  --duration-molasses: 800ms;
  
  /* Easing curves for different feels */
  --ease-linear: linear;
  --ease-in: ease-in;
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;
  
  /* Spring effect (bouncy, playful) */
  --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Smooth, organic deceleration */
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  
  /* Sharp, immediate (for tech feel) */
  --ease-sharp: cubic-bezier(0.4, 0, 0.6, 1);
  
  /* Elastic (stretchy, human) */
  --ease-elastic: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  
  /* ══════════════════════════════════════════════════════════════════════════════
     SHADOW LAYERS — Dimensional depth
     ══════════════════════════════════════════════════════════════════════════════ */
  
  /* Subtle shadows (for cards, buttons) */
  --shadow-sm: 
    0 2px 4px rgba(0, 0, 0, 0.07),
    0 1px 2px rgba(0, 212, 170, 0.05);
  
  --shadow-md:
    0 4px 8px rgba(0, 0, 0, 0.1),
    0 2px 4px rgba(0, 212, 170, 0.08);
  
  /* Lift shadows (for hover states) */
  --shadow-lg:
    0 10px 20px rgba(0, 0, 0, 0.15),
    0 5px 10px rgba(0, 212, 170, 0.1);
  
  --shadow-xl:
    0 20px 40px rgba(0, 0, 0, 0.2),
    0 10px 20px rgba(0, 212, 170, 0.12);
  
  /* Dramatic shadows (for hero, modals) */
  --shadow-dramatic:
    0 30px 60px rgba(0, 0, 0, 0.3),
    0 15px 30px rgba(0, 212, 170, 0.15);
  
  /* Glow effects (for glassy, neon feel) */
  --shadow-glow-teal: 0 0 20px rgba(0, 212, 170, 0.3);
  --shadow-glow-teal-strong: 0 0 20px rgba(0, 212, 170, 0.6);
  --shadow-glow-gold: 0 0 20px rgba(240, 165, 0, 0.3);
  --shadow-glow-coral: 0 0 20px rgba(255, 107, 91, 0.3);
  --shadow-glow-electric: 0 0 30px rgba(0, 255, 255, 0.4);
  
  /* Inset shadows (for depth, pressed state) */
  --shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-inset-sm: inset 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  
  /* ══════════════════════════════════════════════════════════════════════════════
     TYPOGRAPHY ENHANCEMENTS
     ══════════════════════════════════════════════════════════════════════════════ */
  
  /* Font families */
  --font-body: 'IBM Plex Sans', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono: 'Fira Code', Monaco, 'Courier New', monospace;
  --font-display: 'Outfit', 'IBM Plex Sans', sans-serif; /* Modern, geometric */
  --font-accent: 'Space Mono', Monaco, monospace; /* Tech-forward accent */
  
  /* Fluid typography scales */
  --fluid-h1: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  --fluid-h2: clamp(1.875rem, 1.5rem + 2vw, 3.25rem);
  --fluid-h3: clamp(1.5rem, 1.25rem + 1.4vw, 2.25rem);
  --fluid-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  
  /* ══════════════════════════════════════════════════════════════════════════════
     SPACING & LAYOUT
     ══════════════════════════════════════════════════════════════════════════════ */
  
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  
  /* Container widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  
  /* ══════════════════════════════════════════════════════════════════════════════
     Z-INDEX SCALE
     ══════════════════════════════════════════════════════════════════════════════ */
  
  --z-hide: -1;
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 1000;
  --z-fixed: 2000;
  --z-modal-backdrop: 9990;
  --z-modal: 9999;
  --z-popover: 10000;
  --z-tooltip: 10001;
  --z-notification: 10002;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   KEYFRAME ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Fade in + slide up (primary entrance) */
@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide down fade (exit) */
@keyframes slideDownFade {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(40px);
  }
}

/* Slide in from left */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide in from right */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade in only (for text) */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Gentle floating animation */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

/* Glow pulse effect */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(0, 212, 170, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(0, 212, 170, 0.6);
  }
}

/* Soft shake (validation error) */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
  20%, 40%, 60%, 80% { transform: translateX(3px); }
}

/* Checkmark bounce (success) */
@keyframes checkBounce {
  0% { transform: scale(0) rotate(-45deg); opacity: 0; }
  50% { transform: scale(1.2) rotate(0deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Spin rotation (loading) */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Gradient shift (animated gradient) */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Blob morph (organic shapes) */
@keyframes blobMorph {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  50% {
    border-radius: 30% 60% 70% 40% / 30% 70% 40% 60%;
  }
}

/* Icon slide right (for buttons) */
@keyframes slideIconRight {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale pop effect */
@keyframes scalePop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Animation Utilities ─────────────────────────────────────────────────────── */

.animate-slide-up {
  animation: slideUpFade var(--duration-slow) var(--ease-smooth) forwards;
}

.animate-slide-in-left {
  animation: slideInLeft var(--duration-slow) var(--ease-smooth) forwards;
}

.animate-slide-in-right {
  animation: slideInRight var(--duration-slow) var(--ease-smooth) forwards;
}

.animate-fade-in {
  animation: fadeIn var(--duration-normal) var(--ease-smooth) forwards;
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

.animate-glow-pulse {
  animation: glowPulse 2s ease-in-out infinite;
}

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

/* Stagger animations */
.animate-stagger > * {
  animation: slideUpFade var(--duration-slow) var(--ease-smooth) both;
}

.animate-stagger > :nth-child(1) { animation-delay: 0ms; }
.animate-stagger > :nth-child(2) { animation-delay: 100ms; }
.animate-stagger > :nth-child(3) { animation-delay: 200ms; }
.animate-stagger > :nth-child(4) { animation-delay: 300ms; }
.animate-stagger > :nth-child(5) { animation-delay: 400ms; }
.animate-stagger > :nth-child(6) { animation-delay: 500ms; }

/* ── Color Utilities ────────────────────────────────────────────────────────── */

.bg-gradient-hero {
  background: var(--gradient-hero);
}

.bg-gradient-mesh {
  background: var(--gradient-mesh-warm);
}

.bg-gradient-dark {
  background: var(--gradient-dark);
}

.bg-gradient-gold {
  background: var(--gradient-gold);
}

.bg-gradient-sunset {
  background: var(--gradient-sunset);
}

/* ── Shadow Utilities ───────────────────────────────────────────────────────── */

.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.shadow-xl {
  box-shadow: var(--shadow-xl);
}

.shadow-dramatic {
  box-shadow: var(--shadow-dramatic);
}

.glow-teal {
  box-shadow: var(--shadow-glow-teal);
}

.glow-teal-strong {
  box-shadow: var(--shadow-glow-teal-strong);
}

.glow-gold {
  box-shadow: var(--shadow-glow-gold);
}

.glow-coral {
  box-shadow: var(--shadow-glow-coral);
}

.glow-electric {
  box-shadow: var(--shadow-glow-electric);
}

/* ── Typography Utilities ───────────────────────────────────────────────────── */

.font-display {
  font-family: var(--font-display);
  font-weight: 700;
}

.font-accent {
  font-family: var(--font-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.text-gradient {
  background: var(--gradient-hero);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Glass & Backdrop Effects ───────────────────────────────────────────────── */

.glass {
  background: var(--color-surface-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-surface-divider);
}

.glass-strong {
  background: rgba(13, 18, 25, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 212, 170, 0.1);
}

/* Grain texture overlay */
.texture-grain {
  position: relative;
}

.texture-grain::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.02;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ── Interactive States ─────────────────────────────────────────────────────── */

.transition-smooth {
  transition: all var(--duration-normal) var(--ease-smooth);
}

.transition-fast {
  transition: all var(--duration-fast) var(--ease-smooth);
}

/* Remove animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SCROLL BEHAVIOR
   ═══════════════════════════════════════════════════════════════════════════════ */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* Fade in elements on scroll */
.fade-in-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--duration-slow) var(--ease-smooth),
              transform var(--duration-slow) var(--ease-smooth);
}

.fade-in-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}