/* ════════════════════════════════════════════════════════════════════════════════
   KREYOLIA DESIGN SYSTEM v2.0 — CSS OVERRIDES
   Force les animations et styles à s'afficher par-dessus Tailwind
   ════════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   FONTS — Override Outfit/Rajdhani avec Playfair Display
   ══════════════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6,
[class*="text-"][class*="xl"],
[class*="text-"][class*="2xl"],
[class*="text-"][class*="4xl"],
[class*="text-"][class*="5xl"],
[class*="text-"][class*="6xl"],
[class*="font-bold"],
[class*="font-semibold"] {
  font-family: 'Playfair Display', serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

body, p, span, a, button, input, textarea, label {
  font-family: 'IBM Plex Sans', sans-serif !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   COLORS — Active color palette
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
  --color-primary-500: #00D4AA !important;
  --color-primary-600: #00aa89 !important;
  --color-secondary-500: #F0A500 !important;
  --color-secondary-600: #c48400 !important;
  --accent-coral: #FF6B5B !important;
  --accent-coral-light: #FF8F7D !important;
  --accent-coral-dark: #E54435 !important;
  --accent-electric: #00FFFF !important;
  --accent-bronze: #B8860B !important;
  --accent-bronze-light: #DAA520 !important;
  --accent-sage: #9CAF88 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ANIMATIONS — Keyframes
   ══════════════════════════════════════════════════════════════════════════════ */

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@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%;
  }
}

@keyframes floatPulse {
  0%, 100% {
    transform: translateY(0px);
    opacity: 1;
  }
  50% {
    transform: translateY(-20px);
    opacity: 0.8;
  }
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(0, 212, 170, 0.3), 0 0 40px rgba(0, 212, 170, 0.1);
  }
  50% {
    box-shadow: 0 0 30px rgba(0, 212, 170, 0.5), 0 0 60px rgba(0, 212, 170, 0.2);
  }
}

@keyframes slideIconRight {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@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;
  }
}

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

/* ══════════════════════════════════════════════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
   ══════════════════════════════════════════════════════════════════════════════ */

.fade-in-on-scroll {
  opacity: 0 !important;
  transform: translateY(40px) !important;
  transition: all 600ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.fade-in-on-scroll.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  animation: slideUpFade 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   BUTTON STYLES — Override flat design
   ══════════════════════════════════════════════════════════════════════════════ */

button, [role="button"] {
  transition: all 250ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

button:hover, [role="button"]:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15), 0 0 20px rgba(0, 212, 170, 0.6) !important;
}

button:active, [role="button"]:active {
  transform: translateY(0) !important;
}

/* Primary Buttons */
button[class*="btn-primary"],
button[class*="bg-kreyol-teal"],
[role="button"][class*="bg-kreyol-teal"] {
  background: linear-gradient(135deg, #00D4AA 0%, #FF6B5B 100%) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 212, 170, 0.08) !important;
}

button[class*="btn-primary"]:hover,
button[class*="bg-kreyol-teal"]:hover,
[role="button"][class*="bg-kreyol-teal"]:hover {
  background: linear-gradient(135deg, #FF6B5B, #F0A500) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15), 0 5px 10px rgba(0, 212, 170, 0.1), 0 0 20px rgba(0, 212, 170, 0.6) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CARD STYLES — Accent colors & hover effects
   ══════════════════════════════════════════════════════════════════════════════ */

[class*="card"],
[class*="feature-card"],
[class*="bg-kreyol-card"] {
  border-left: 4px solid var(--color-primary-500) !important;
  transition: all 350ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 212, 170, 0.08) !important;
}

[class*="card"]:hover,
[class*="feature-card"]:hover,
[class*="bg-kreyol-card"]:hover {
  transform: translateY(-8px) rotateZ(0.5deg) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15), 0 5px 10px rgba(0, 212, 170, 0.1), 0 0 20px rgba(0, 212, 170, 0.3) !important;
  border-left-width: 5px !important;
}

/* Accent color variants */
.card-teal { border-left-color: #00D4AA !important; }
.card-gold { border-left-color: #F0A500 !important; }
.card-coral { border-left-color: #FF6B5B !important; }
.card-sage { border-left-color: #9CAF88 !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   FORM INPUTS — Floating labels & glow focus
   ══════════════════════════════════════════════════════════════════════════════ */

input, textarea, select {
  transition: all 250ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  border: 2px solid rgba(0, 212, 170, 0.2) !important;
  border-radius: 8px !important;
}

input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: #00D4AA !important;
  box-shadow: 0 0 20px rgba(0, 212, 170, 0.3), inset 0 0 0 1px #00D4AA !important;
}

label {
  transition: all 250ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   TEXT GRADIENTS — Caribbean colors
   ══════════════════════════════════════════════════════════════════════════════ */

.text-gradient {
  background: linear-gradient(135deg, #00D4AA 0%, #FF6B5B 50%, #F0A500 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   GLOW EFFECTS — Apply teal & warm glows
   ══════════════════════════════════════════════════════════════════════════════ */

.glow-primary, .glow-teal {
  box-shadow: 0 0 20px rgba(0, 212, 170, 0.4), 0 0 40px rgba(0, 212, 170, 0.2) !important;
}

.glow-gold {
  box-shadow: 0 0 20px rgba(240, 165, 0, 0.3), 0 0 40px rgba(240, 165, 0, 0.15) !important;
}

.glow-coral {
  box-shadow: 0 0 20px rgba(255, 107, 91, 0.3), 0 0 40px rgba(255, 107, 91, 0.15) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ANIMATION UTILITIES
   ══════════════════════════════════════════════════════════════════════════════ */

.animate-slide-up-fade {
  animation: slideUpFade 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

.animate-blob-morph {
  animation: blobMorph 8s ease-in-out infinite !important;
}

.animate-float {
  animation: floatPulse 6s ease-in-out infinite !important;
}

.animate-glow {
  animation: glowPulse 3s ease-in-out infinite !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY — Reduce motion
   ══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE OPTIMIZATIONS
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  button, [role="button"] {
    padding: 12px 20px !important;
    font-size: 16px !important;
  }
  
  h1, h2, h3 {
    font-size: clamp(1.5rem, 2rem + 2vw, 3.5rem) !important;
  }
}