@import "tailwindcss";

/* =========================================================================
   PORTFOLIO — Cyberpunk Dark / Free Party v2
   Palette acid : noir warehouse + cyan UV + acid yellow + magenta + LED rouge
   ========================================================================= */

@theme {
  /* Couleurs de base */
  --color-bg:          #0A0A0F;
  --color-surface:     #111118;
  --color-surface-2:   #16161F;
  --color-border:      #1F1F2C;

  /* Accents néon */
  --color-cyan:        #00F0FF;
  --color-acid:        #C6FF00;   /* free party strobe */
  --color-magenta:     #FF2A6D;
  --color-red:         #FF0040;   /* LED live / now playing */
  --color-violet:      #B967FF;
  --color-ice:         #D1F7FF;

  /* Texte */
  --color-text:        #E0E0FF;
  --color-text-muted:  #8A8FA8;
  --color-text-dim:    #5A5F78;

  /* Typographies */
  --font-sans:    "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "Fira Code", ui-monospace, monospace;
  --font-stencil: "Bebas Neue", "Impact", sans-serif;
}

html {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  background: var(--color-bg);
  min-height: 100vh;
  overflow-x: hidden;
}

::selection {
  background: var(--color-acid);
  color: var(--color-bg);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--color-cyan), var(--color-acid));
  border-radius: 10px;
}

/* =========================================================================
   Glow utilities
   ========================================================================= */

@utility glow-cyan {
  box-shadow:
    0 0 8px rgba(0, 240, 255, 0.4),
    0 0 20px rgba(0, 240, 255, 0.25),
    0 0 40px rgba(0, 240, 255, 0.12);
}
@utility glow-acid {
  box-shadow:
    0 0 8px rgba(198, 255, 0, 0.5),
    0 0 20px rgba(198, 255, 0, 0.3),
    0 0 40px rgba(198, 255, 0, 0.15);
}
@utility glow-magenta {
  box-shadow:
    0 0 8px rgba(255, 42, 109, 0.4),
    0 0 20px rgba(255, 42, 109, 0.25),
    0 0 40px rgba(255, 42, 109, 0.12);
}
@utility glow-red {
  box-shadow:
    0 0 6px rgba(255, 0, 64, 0.6),
    0 0 16px rgba(255, 0, 64, 0.3);
}

@utility glow-text-cyan {
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.8), 0 0 20px rgba(0, 240, 255, 0.4);
}
@utility glow-text-acid {
  text-shadow: 0 0 6px rgba(198, 255, 0, 0.85), 0 0 22px rgba(198, 255, 0, 0.45);
}
@utility glow-text-magenta {
  text-shadow: 0 0 6px rgba(255, 42, 109, 0.8), 0 0 20px rgba(255, 42, 109, 0.4);
}

@utility neon-border-cyan {
  border: 1px solid var(--color-cyan);
  box-shadow:
    0 0 0 1px rgba(0, 240, 255, 0.3),
    0 0 20px rgba(0, 240, 255, 0.2),
    inset 0 0 12px rgba(0, 240, 255, 0.08);
}
@utility neon-border-acid {
  border: 1px solid var(--color-acid);
  box-shadow:
    0 0 0 1px rgba(198, 255, 0, 0.35),
    0 0 20px rgba(198, 255, 0, 0.2),
    inset 0 0 12px rgba(198, 255, 0, 0.08);
}
@utility neon-border-magenta {
  border: 1px solid var(--color-magenta);
  box-shadow:
    0 0 0 1px rgba(255, 42, 109, 0.3),
    0 0 20px rgba(255, 42, 109, 0.2),
    inset 0 0 12px rgba(255, 42, 109, 0.08);
}

/* =========================================================================
   Free party utilities
   ========================================================================= */

@utility stencil {
  font-family: var(--font-stencil);
  letter-spacing: 0.04em;
  font-weight: 400;
}

/* Sticker style (pour les overlays "flyer" collés) */
@utility sticker {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid currentColor;
  border-radius: 2px;
  background: rgba(10, 10, 15, 0.6);
  backdrop-filter: blur(4px);
  transform: rotate(-2deg);
}

/* Warehouse background — gradient + grain + UV spots (pas encore les spots mobiles, juste la base) */
@utility warehouse-bg {
  background:
    radial-gradient(ellipse 60% 40% at 15% 20%, rgba(0, 240, 255, 0.1), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 70%, rgba(255, 42, 109, 0.08), transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(198, 255, 0, 0.05), transparent 60%),
    var(--color-bg);
}

/* Aurora (kept as alias for warehouse) */
@utility aurora-bg {
  background:
    radial-gradient(ellipse 60% 40% at 15% 20%, rgba(0, 240, 255, 0.1), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 70%, rgba(255, 42, 109, 0.08), transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(198, 255, 0, 0.05), transparent 60%),
    var(--color-bg);
}

/* Scanlines CRT subtiles (à appliquer sur un pseudo-élément ou overlay fixe) */
@utility scanlines {
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.015) 0px,
    rgba(255, 255, 255, 0.015) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* =========================================================================
   Keyframes
   ========================================================================= */

@keyframes flicker {
  0%, 100% { opacity: 1; }
  45%, 55% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes pulse-neon {
  0%, 100% { box-shadow: 0 0 8px rgba(0, 240, 255, 0.4), 0 0 20px rgba(0, 240, 255, 0.25); }
  50% { box-shadow: 0 0 16px rgba(0, 240, 255, 0.7), 0 0 32px rgba(0, 240, 255, 0.4); }
}

@keyframes pulse-led-green {
  0%, 100% {
    background: #00FF6A;
    box-shadow: 0 0 8px rgba(0, 255, 106, 0.7), 0 0 16px rgba(0, 255, 106, 0.35);
  }
  50% {
    background: #00FF6A;
    box-shadow: 0 0 14px rgba(0, 255, 106, 1), 0 0 28px rgba(0, 255, 106, 0.6);
  }
}

@keyframes pulse-led-red {
  0%, 100% {
    background: var(--color-red);
    box-shadow: 0 0 6px rgba(255, 0, 64, 0.7), 0 0 14px rgba(255, 0, 64, 0.35);
  }
  50% {
    background: var(--color-red);
    box-shadow: 0 0 12px rgba(255, 0, 64, 1), 0 0 22px rgba(255, 0, 64, 0.55);
  }
}

@keyframes glitch-skew {
  0%, 100% { transform: translate(-50%, -50%) skew(0deg); }
  20% { transform: translate(-50%, -50%) skew(3deg, -1deg); }
  40% { transform: translate(-50%, -50%) skew(-2deg, 1deg); }
  60% { transform: translate(-50%, -50%) skew(2deg, 0deg); }
  80% { transform: translate(-50%, -50%) skew(-3deg, 2deg); }
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); }
  20% { transform: translate(-15%, 5%); }
  30% { transform: translate(7%, -25%); }
  40% { transform: translate(-5%, 25%); }
  50% { transform: translate(-15%, 10%); }
  60% { transform: translate(15%, 0%); }
  70% { transform: translate(0%, 15%); }
  80% { transform: translate(3%, 35%); }
  90% { transform: translate(-10%, 10%); }
}

@utility animate-flicker { animation: flicker 3s infinite; }
@utility animate-pulse-neon { animation: pulse-neon 2s ease-in-out infinite; }
@utility animate-led-green { animation: pulse-led-green 1.4s ease-in-out infinite; }
@utility animate-led-red { animation: pulse-led-red 1s ease-in-out infinite; }
@utility animate-grain { animation: grain 8s steps(10) infinite; }

/* =========================================================================
   Composants de base
   ========================================================================= */

@layer components {
  /* CTA principal : acid yellow (free party flyer) */
  .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: 0.04em;
    background: var(--color-acid);
    color: var(--color-bg);
    border: 1px solid var(--color-acid);
    border-radius: 2px;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(198, 255, 0, 0.35);
    text-transform: uppercase;
    font-size: 0.875rem;
  }
  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
      0 0 30px rgba(198, 255, 0, 0.7),
      0 0 60px rgba(198, 255, 0, 0.3);
  }

  /* CTA ghost : cyan UV */
  .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: 0.04em;
    background: transparent;
    color: var(--color-cyan);
    border: 1px solid var(--color-cyan);
    border-radius: 2px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-size: 0.875rem;
  }
  .btn-ghost:hover {
    background: var(--color-cyan);
    color: var(--color-bg);
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.6);
  }

  .card-neon {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  .card-neon:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 240, 255, 0.4);
    box-shadow: 0 10px 40px -10px rgba(0, 240, 255, 0.2);
  }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    background: rgba(0, 240, 255, 0.08);
    border: 1px solid rgba(0, 240, 255, 0.25);
    color: var(--color-cyan);
    border-radius: 2px;
  }

  /* LED indicators (circles à côté d'un label) */
  .led {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .led-green { background: #00FF6A; box-shadow: 0 0 8px #00FF6A; }
  .led-red { background: var(--color-red); box-shadow: 0 0 8px var(--color-red); }
  .led-cyan { background: var(--color-cyan); box-shadow: 0 0 8px var(--color-cyan); }
  .led-acid { background: var(--color-acid); box-shadow: 0 0 8px var(--color-acid); }

  .font-display { font-family: var(--font-display); }
  .font-mono { font-family: var(--font-mono); }
  .font-stencil { font-family: var(--font-stencil); letter-spacing: 0.04em; }
}

/* =========================================================================
   View Transitions (crossfade EQ entre pages)
   ========================================================================= */

::view-transition-old(root) {
  animation: fade-blur-out 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}
::view-transition-new(root) {
  animation: fade-blur-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes fade-blur-out {
  from { opacity: 1; filter: blur(0); }
  to { opacity: 0; filter: blur(8px); }
}
@keyframes fade-blur-in {
  from { opacity: 0; filter: blur(8px); transform: translateY(8px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* =========================================================================
   Accessibility
   ========================================================================= */

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