@tailwind base;
@tailwind components;
@tailwind utilities;

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    /* Light mode colors */
    --background: 0 0% 75%;
    --foreground: 240 10% 10%;

    --card: 0 0% 100%;
    --card-foreground: 240 10% 10%;

    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 10%;

    --primary: 280 70% 30%;
    --primary-foreground: 0 0% 100%;

    --secondary: 240 4.8% 95%;
    --secondary-foreground: 240 5.9% 10%;

    --muted: 240 4.8% 95%;
    --muted-foreground: 240 10% 10%;

    --accent: 340 80% 55%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --border: 240 5.9% 85%;
    --input: 0 0% 100%;
    --ring: 340 80% 55%;

    --radius: 1rem;

    /* Casino theme specific colors - Light */
    --glass-bg: 0 0% 100%;
    --glass-opacity: 0.95;
    --gradient-start: 0 0% 75%;
    --gradient-mid: 0 0% 73%;
    --gradient-end: 0 0% 71%;
    
    /* Wager colors */
    --wager-excellent: 142 76% 36%;
    --wager-good: 47 96% 53%;
    --wager-medium: 25 95% 53%;
    --wager-high: 0 84% 60%;
  }

  .dark {
    /* Dark mode colors */
    --background: 240 15% 6%;
    --foreground: 0 0% 98%;

    --card: 240 12% 8%;
    --card-foreground: 0 0% 98%;

    --popover: 240 12% 8%;
    --popover-foreground: 0 0% 98%;

    --primary: 280 70% 38%;
    --primary-foreground: 0 0% 100%;

    --secondary: 280 60% 50%;
    --secondary-foreground: 0 0% 100%;

    --muted: 240 8% 18%;
    --muted-foreground: 240 5% 65%;

    --accent: 280 70% 55%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 240 8% 18%;
    --input: 240 8% 18%;
    --ring: 280 70% 55%;

    /* Casino theme specific colors - Dark */
    --glass-bg: 0 0% 100%;
    --glass-opacity: 0.06;
    --gradient-start: 240 15% 6%;
    --gradient-mid: 237 17% 8%;
    --gradient-end: 240 20% 3%;
    
    /* Dark mode glow effects */
    --glow-primary: 280 70% 38%;
    --glow-secondary: 280 60% 50%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    background: linear-gradient(180deg, hsl(var(--gradient-start)) 0%, hsl(var(--gradient-mid)) 50%, hsl(var(--gradient-end)) 100%);
    background-attachment: fixed;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  }
}

@layer utilities {
  .glass-card {
    background: rgba(255, 255, 255, var(--glass-opacity));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    will-change: transform;
    transform: translateZ(0);
    content-visibility: auto;
    contain: layout style paint;
  }
  
  /* Variant without paint/layout containment for overlays (e.g., nav dropdowns) */
  .glass-card-overlay {
    background: rgba(255, 255, 255, var(--glass-opacity));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: visible; /* allow dropdowns to overflow */
  }
  
  .text-gradient {
    background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--secondary)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Optimize animations to use GPU acceleration */
  .animate-fade-in,
  .animate-fade-in-up,
  .animate-glow {
    will-change: transform, opacity;
    transform: translateZ(0);
  }

  /* Optimize hover transitions */
  .hover\:scale-\[1\.02\]:hover,
  .hover\:scale-105:hover {
    will-change: transform;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }

  /* Breathing animation pour le loader */
  @keyframes breathing {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.08);
    }
  }
}

/* Non-render-blocking large sections */
@layer utilities {
  .cv-auto {
    content-visibility: auto;
    contain-intrinsic-size: 1000px;
  }
}

/* Keyframes pour les animations subtiles */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-30px);
  }
}

@keyframes casino-float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-25px) rotate(120deg);
  }
  66% {
    transform: translateY(-15px) rotate(240deg);
  }
}

@keyframes card-fall {
  0% {
    transform: translateY(-100px) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(calc(100vh + 100px)) rotate(360deg);
    opacity: 0;
  }
}

@keyframes sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes shine-sweep {
  0% {
    left: -100%;
  }
  100% {
    left: 200%;
  }
}

@keyframes jackpot-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 hsl(var(--primary) / 0.4);
  }
  50% {
    box-shadow: 0 0 20px 10px hsl(var(--primary) / 0);
  }
}

@keyframes slot-spin {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes dice-roll {
  0% {
    transform: rotate(0deg) rotateY(0deg);
  }
  100% {
    transform: rotate(360deg) rotateY(360deg);
  }
}

@keyframes card-deal {
  0% {
    opacity: 0;
    transform: translateX(-50px) rotate(-10deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
}

@keyframes bounce-mini {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Ripple effect for buttons */
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* 3D tilt subtle */
@keyframes tilt-3d {
  0%, 100% {
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(1000px) rotateX(2deg) rotateY(2deg);
  }
}

/* Neon glow pulse for dark mode */
@keyframes neon-glow {
  0%, 100% {
    box-shadow: 0 0 5px hsl(var(--glow-primary) / 0.5),
                0 0 10px hsl(var(--glow-primary) / 0.3),
                0 0 15px hsl(var(--glow-primary) / 0.2);
  }
  50% {
    box-shadow: 0 0 10px hsl(var(--glow-primary) / 0.6),
                0 0 20px hsl(var(--glow-primary) / 0.4),
                0 0 30px hsl(var(--glow-primary) / 0.3);
  }
}

/* Floating CTA pulse */
@keyframes float-pulse {
  0%, 100% {
    transform: translateY(0px) scale(1);
    box-shadow: 0 10px 30px -10px hsl(var(--primary) / 0.5);
  }
  50% {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px -10px hsl(var(--primary) / 0.6);
  }
}

/* Orb movement */
@keyframes orb-float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -30px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
}

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