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

/* Design system spectaculaire pour Webew - Animations et effets modernes */

@layer base {
  :root {
    /* Palette de couleurs principale */
    --background: 0 0% 100%;
    --foreground: 0 0% 4%;
    --professional-black: 0 0% 4%;
    --pure-white: 0 0% 100%;
    --elegant-red: 355 85% 52%;
    --light-gray: 0 0% 96%;
    
    /* Couleurs système basées sur la palette */
    --card: 0 0% 100%;
    --card-foreground: 0 0% 4%;
    
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 4%;
    
    --primary: 355 85% 52%;
    --primary-foreground: 0 0% 100%;
    
    --secondary: 0 0% 96%;
    --secondary-foreground: 0 0% 4%;
    
    --muted: 0 0% 96%;
    --muted-foreground: 0 0% 45%;
    
    --accent: 355 85% 52%;
    --accent-foreground: 0 0% 100%;
    
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    
    --border: 0 0% 90%;
    --input: 0 0% 90%;
    --ring: 355 85% 52%;
    
    /* Gradients animés - designs spectaculaires */
    --gradient-cta: linear-gradient(135deg, hsl(355 85% 52%), hsl(355 85% 45%), hsl(355 85% 60%));
    --gradient-hero: linear-gradient(135deg, hsl(0 0% 4%), hsl(355 85% 8%), hsl(0 0% 15%));
    --gradient-card: linear-gradient(145deg, hsl(0 0% 100%), hsl(0 0% 96%));
    --gradient-animated: linear-gradient(-45deg, hsl(355 85% 52%), hsl(355 85% 60%), hsl(355 85% 45%), hsl(355 85% 55%));
    --gradient-glow: radial-gradient(circle at center, hsl(355 85% 52% / 0.3), transparent 70%);
    --gradient-aurora: linear-gradient(45deg, hsl(355 85% 52%), hsl(280 80% 60%), hsl(200 80% 55%), hsl(355 85% 52%));
    --gradient-neon: linear-gradient(90deg, transparent, hsl(355 85% 52%), transparent);
    
    /* Ombres et effets 3D spectaculaires */
    --shadow-card: 0 4px 20px hsl(0 0% 4% / 0.08);
    --shadow-hover: 0 8px 30px hsl(355 85% 52% / 0.15);
    --shadow-elegant: 0 10px 40px hsl(0 0% 4% / 0.12);
    --shadow-glow: 0 0 60px hsl(355 85% 52% / 0.4);
    --shadow-neon: 0 0 20px hsl(355 85% 52%), 0 0 40px hsl(355 85% 52%), 0 0 80px hsl(355 85% 52%);
    --shadow-3d: 0 20px 40px hsl(0 0% 4% / 0.1), 0 15px 12px hsl(0 0% 4% / 0.05);
    --shadow-floating: 0 32px 64px hsl(355 85% 52% / 0.15), 0 16px 32px hsl(355 85% 52% / 0.1);
    
    /* Animations et transitions ultra fluides */
    --transition-smooth: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    --transition-fast: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-spring: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Espacements */
    --radius: 0.5rem;

    --sidebar-background: 0 0% 98%;

    --sidebar-foreground: 240 5.3% 26.1%;

    --sidebar-primary: 240 5.9% 10%;

    --sidebar-primary-foreground: 0 0% 98%;

    --sidebar-accent: 240 4.8% 95.9%;

    --sidebar-accent-foreground: 240 5.9% 10%;

    --sidebar-border: 220 13% 91%;

    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  /* Mode sombre non utilisé - design en mode clair uniquement */
}

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

  body {
    @apply bg-background text-foreground font-sans;
    font-family: 'Open Sans', sans-serif;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
  }
}

@layer components {
  /* Animations spectaculaires - entrées */
  .fade-in {
    animation: fadeInSpectacular 1s cubic-bezier(0.23, 1, 0.32, 1);
  }
  
  .fade-in-delay {
    animation: fadeInSpectacular 1.2s cubic-bezier(0.23, 1, 0.32, 1) 0.3s both;
  }
  
  .slide-up {
    animation: slideUpSpectacular 1s cubic-bezier(0.23, 1, 0.32, 1);
  }
  
  .scale-in {
    animation: scaleInSpectacular 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  
  /* Effets hover ultra modernes */
  .hover-zoom {
    transition: var(--transition-smooth);
    transform-origin: center;
  }
  
  .hover-zoom:hover {
    transform: scale(1.05) translateY(-8px);
    box-shadow: var(--shadow-floating);
  }
  
  .hover-glow {
    transition: var(--transition-smooth);
    position: relative;
  }
  
  .hover-glow:hover {
    box-shadow: var(--shadow-glow), var(--shadow-elegant);
    transform: translateY(-4px);
  }
  
  .hover-3d {
    transition: var(--transition-smooth);
    transform-style: preserve-3d;
  }
  
  .hover-3d:hover {
    transform: perspective(1000px) rotateX(10deg) rotateY(-10deg) translateY(-10px);
    box-shadow: var(--shadow-3d);
  }
  
  /* Backgrounds animés */
  .bg-animated {
    background: var(--gradient-animated);
    background-size: 400% 400%;
    animation: gradientShift 8s ease infinite;
  }
  
  .bg-aurora {
    background: var(--gradient-aurora);
    background-size: 400% 400%;
    animation: auroraFlow 12s ease infinite;
  }
  
  .bg-glow-pulse {
    position: relative;
  }
  
  .bg-glow-pulse::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-glow);
    border-radius: inherit;
    animation: pulseGlow 3s ease-in-out infinite;
    z-index: -1;
  }
  
  /* Effets de texte spectaculaires */
  .text-glow {
    text-shadow: 0 0 20px hsl(355 85% 52% / 0.5);
  }
  
  .text-shimmer {
    background: var(--gradient-animated);
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: hsl(355 85% 52%); /* Fallback color for mobile */
    animation: shimmer 3s linear infinite;
  }
  
  /* Support pour les navigateurs qui supportent le clipping */
  @supports (-webkit-background-clip: text) {
    .text-shimmer {
      -webkit-text-fill-color: transparent;
    }
  }
  
  /* Lignes de néon */
  .neon-line {
    position: relative;
    overflow: hidden;
  }
  
  .neon-line::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: var(--gradient-neon);
    animation: neonSweep 2s ease-in-out infinite;
  }
  
  /* Particules flottantes */
  .floating-particles {
    position: relative;
  }
  
  .floating-particles::before,
  .floating-particles::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: hsl(355 85% 52%);
    border-radius: 50%;
    animation: floatParticles 6s ease-in-out infinite;
  }
  
  .floating-particles::before {
    top: 20%;
    left: 20%;
    animation-delay: -2s;
  }
  
  .floating-particles::after {
    top: 80%;
    right: 20%;
    animation-delay: -4s;
  }
  
  /* Section spacing responsive */
  .section-padding {
    @apply py-12 sm:py-16 lg:py-20 xl:py-24;
  }
  
  /* Container max width responsive */
  .container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
  
  /* Effets de survol pour liens */
  .link-underline {
    position: relative;
    overflow: hidden;
  }
  
  .link-underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-cta);
    transition: var(--transition-smooth);
  }
  
  .link-underline:hover::after {
    width: 100%;
  }
}

/* Keyframes spectaculaires */
@keyframes fadeInSpectacular {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(0.9);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes slideUpSpectacular {
  0% {
    opacity: 0;
    transform: translateY(100px) rotateX(90deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
  }
}

@keyframes scaleInSpectacular {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-10deg);
  }
  50% {
    transform: scale(1.1) rotate(2deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

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

@keyframes auroraFlow {
  0%, 100% {
    background-position: 0% 0%;
  }
  25% {
    background-position: 100% 100%;
  }
  50% {
    background-position: 100% 0%;
  }
  75% {
    background-position: 0% 100%;
  }
}

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

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes neonSweep {
  0% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

@keyframes floatParticles {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  33% {
    transform: translateY(-20px) rotate(120deg);
    opacity: 0.7;
  }
  66% {
    transform: translateY(-10px) rotate(240deg);
    opacity: 0.9;
  }
}

@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blinkCursor {
  0%, 50% {
    border-color: transparent;
  }
  51%, 100% {
    border-color: hsl(355 85% 52%);
  }
}

/* Animations pour le nouveau splash screen holographique */
@keyframes hologramScan {
  0% {
    transform: translateY(-100vh);
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

@keyframes pixelMaterialize {
  0% {
    opacity: 0;
    transform: scale(0) rotate(180deg);
    filter: blur(10px);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2) rotate(90deg);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: blur(0);
  }
}

@keyframes digitalGlitch {
  0%, 100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-2px);
  }
  20% {
    transform: translateX(2px);
  }
  30% {
    transform: translateX(-1px);
  }
  40% {
    transform: translateX(1px);
  }
  50% {
    transform: translateX(-0.5px);
  }
  60% {
    transform: translateX(0.5px);
  }
}

@keyframes matrixRain {
  0% {
    transform: translateY(-100vh);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

@keyframes energyPulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.8;
  }
  25% {
    transform: scale(1.1) rotate(90deg);
    opacity: 1;
  }
  50% {
    transform: scale(0.9) rotate(180deg);
    opacity: 0.6;
  }
  75% {
    transform: scale(1.05) rotate(270deg);
    opacity: 0.9;
  }
}

@keyframes dataStream {
  0% {
    width: 0%;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    width: 100%;
    opacity: 0;
  }
}

@keyframes holographicFlicker {
  0%, 90%, 100% {
    opacity: 1;
  }
  91%, 99% {
    opacity: 0.1;
  }
  92%, 98% {
    opacity: 0.8;
  }
  93%, 97% {
    opacity: 0.3;
  }
  94%, 96% {
    opacity: 1;
  }
}

@keyframes explosionTransition {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.8;
  }
  100% {
    transform: scale(50);
    opacity: 0;
  }
}

@keyframes scannerBeam {
  0% {
    transform: translateX(-100vw) scaleX(0.1);
    opacity: 0;
  }
  50% {
    transform: translateX(50vw) scaleX(1);
    opacity: 1;
  }
  100% {
    transform: translateX(100vw) scaleX(0.1);
    opacity: 0;
  }
}

/* Classes pour le nouveau splash screen */
.hologram-scan-line {
  animation: hologramScan 2s linear infinite;
}

.pixel-materialize {
  animation: pixelMaterialize 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.digital-glitch {
  animation: digitalGlitch 0.1s ease-in-out infinite alternate;
}

.matrix-rain {
  animation: matrixRain 3s linear infinite;
}

.energy-pulse {
  animation: energyPulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.data-stream {
  animation: dataStream 2s ease-in-out infinite;
}

.holographic-flicker {
  animation: holographicFlicker 3s ease-in-out infinite;
}

.explosion-exit {
  animation: explosionTransition 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.scanner-beam {
  animation: scannerBeam 1.5s ease-in-out infinite;
}

/* Effets holographiques avancés */
.holographic-element {
  position: relative;
  overflow: hidden;
}

.holographic-element::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(0, 255, 255, 0.3) 25%, 
    rgba(0, 255, 255, 0.6) 50%, 
    rgba(0, 255, 255, 0.3) 75%, 
    transparent
  );
  animation: scannerBeam 3s ease-in-out infinite;
}

.cyber-grid {
  background-image: 
    linear-gradient(rgba(255, 0, 85, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 0, 85, 0.1) 1px, transparent 1px);
  background-size: 30px 30px;
  animation: digitalGlitch 0.5s ease-in-out infinite alternate;
}

.energy-particles::before,
.energy-particles::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, #ff0055, transparent);
  border-radius: 50%;
  animation: energyPulse 2s ease-in-out infinite;
}

.energy-particles::before {
  top: 10%;
  left: 10%;
  animation-delay: -0.5s;
}

.energy-particles::after {
  bottom: 10%;
  right: 10%;
  animation-delay: -1.5s;
}

/* Prose styles pour le contenu des articles */
.prose {
  @apply text-base text-muted-foreground;
}

.prose h2 {
  @apply font-display font-bold text-xl text-professional-black mt-8 mb-4 first:mt-0;
}

.prose p {
  @apply mb-4 leading-relaxed;
}

.prose ul {
  @apply mb-4 pl-6;
}

.prose li {
  @apply mb-2;
}