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

:root {
  --bg-void: #000000;
  --bg-deep: #0a0a0a;
  --neon-cyan: #00ffff;
  --neon-pink: #ff00aa;
  --neon-purple: #aa00ff;
  --glitch-red: #ff003c;
  --glitch-blue: #00ffea;
  
  --duration-insane: 0.6s;
  --duration-chaos: 1.2s;
  --ease-wild: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ============================================= */
/*                בסיס + רקע פסיכי              */
/* ============================================= */

body {
  background: var(--bg-void);
  color: #f0f0f0;
  overflow-x: hidden;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(0,255,255,0.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,0,170,0.06) 0%, transparent 50%);
}

/* ============================================= */
/*         אפקטים כלליים על hover               */
/* ============================================= */

.chaos-hover {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, filter;
}

.chaos-hover:hover {
  transform: translateY(-6px) scale(1.04);
  filter: brightness(1.3) contrast(1.2);
}

/* ============================================= */
/*               אפקטים מטורפים                 */
/* ============================================= */

/* 1. התפוצצות חלקיקים + ניאון */
.chaos-hover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), 
    rgba(0,255,255,0.35) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.5s, transform 0.8s;
  pointer-events: none;
}

.chaos-hover:hover::before {
  opacity: 1;
  transform: scale(2.5);
}

/* 2. גליץ' כפול צבעים מטורף */
.glitch-layer {
  position: absolute;
  inset: 0;
  background: inherit;
  clip-path: inset(0);
  animation: none;
}

.chaos-hover:hover .glitch-layer:nth-child(1) {
  animation: glitch-1 0.4s infinite;
}

.chaos-hover:hover .glitch-layer:nth-child(2) {
  animation: glitch-2 0.35s infinite;
}

@keyframes glitch-1 {
  0% { transform: translate(0); }
  20% { transform: translate(-4px, 4px); }
  40% { transform: translate(4px, -4px); }
  60% { transform: translate(-6px, 2px); }
  80% { transform: translate(6px, -2px); }
  100% { transform: translate(0); }
}

@keyframes glitch-2 {
  0% { transform: translate(0); opacity: 0.8; }
  30% { transform: translate(5px, -5px); opacity: 0.4; }
  70% { transform: translate(-5px, 5px); opacity: 0.6; }
  100% { transform: translate(0); opacity: 0.8; }
}

/* 3. עיוות נוזלי + warp */
.chaos-hover.liquid-warp:hover {
  animation: liquid 1.8s ease-in-out infinite alternate;
}

@keyframes liquid {
  0%   { border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; }
  33%  { border-radius: 73% 27% 34% 66% / 68% 32% 68% 32%; }
  66%  { border-radius: 22% 78% 41% 59% / 55% 73% 27% 45%; }
  100% { border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; }
}

/* ============================================= */
/*               שימושים לדוגמה                 */
/* ============================================= */

.card-insane {
  @apply chaos-hover glass-dark p-8 rounded-2xl border border-transparent;
  background: rgba(10,10,10,0.75);
  backdrop-filter: blur(12px);
}

.card-insane::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,0,170,0.2) 10%, transparent 60%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  opacity: 0;
  transition: all 1.2s ease-out;
  pointer-events: none;
}

.card-insane:hover::after {
  transform: translate(-50%, -50%) scale(1.8);
  opacity: 0.7;
}

/* כפתור מטורף במיוחד */
.btn-psycho {
  @apply chaos-hover relative overflow-hidden px-10 py-5 rounded-full font-black text-2xl uppercase tracking-widest;
  background: linear-gradient(45deg, #ff00aa, #00ffff, #aa00ff, #ff00aa);
  background-size: 400%;
  animation: gradientFlow 8s linear infinite;
}

.btn-psycho:hover {
  animation: gradientFlow 2s linear infinite;
  transform: scale(1.15) rotate(3deg);
  box-shadow: 0 0 80px rgba(255,0,170,0.7), 0 0 120px rgba(0,255,255,0.5);
}

@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}

/* שימוש ב-JS קטן כדי לעקוב אחרי מיקום העכבר (מאוד מומלץ!) */
.chaos-hover {
  --x: 50%;
  --y: 50%;
}

.chaos-hover.track-mouse {
  position: relative;
}

.track-mouse:hover {
  --x: calc(var(--mouse-x, 50%) * 100%);
  --y: calc(var(--mouse-y, 50%) * 100%);
}