/* ==========================================================================
   THE GLITCH GALLERY - CORE DESIGN SYSTEM & STYLES
   ========================================================================== */

:root {
  --color-void-black: #080808;
  --color-surface: #131313;
  --color-surface-dark: #121216;
  --color-surface-highlight: #1A1A22;
  --color-surface-container: #201f1f;
  --color-neon-cyan: #00D9FF;
  --color-neon-green: #00FF66;
  --color-neon-pink: #FF2DAA;
  --color-neon-purple: #9D00FF;
  --color-vibrant-yellow: #FFE600;
  --color-pure-white: #FFFFFF;
  --color-on-surface: #e5e2e1;
  --color-on-surface-variant: #bbc9ce;
  
  --font-headline: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Base Resets */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-void-black);
  color: var(--color-on-surface);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  selection-background-color: var(--color-neon-pink);
  selection-color: var(--color-void-black);
}

::selection {
  background: var(--color-neon-pink);
  color: var(--color-void-black);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #080808;
}
::-webkit-scrollbar-thumb {
  background: #201f1f;
  border-radius: 4px;
  border: 1px solid rgba(0, 217, 255, 0.2);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-neon-cyan);
}

/* Typography Utilities */
.font-headline {
  font-family: var(--font-headline);
}
.font-body {
  font-family: var(--font-body);
}

/* Glitch Title Keyframes & Effects */
@keyframes hero-glitch-anim {
  0%, 100% {
    transform: translate(0);
    text-shadow: -2px 0 #00f3ff, 2px 0 #ff007f;
  }
  12% {
    transform: translate(-3px, 1.5px);
    text-shadow: -4px -1px #00f3ff, 4px 1px #ff007f;
  }
  15% {
    transform: translate(3px, -1.5px);
    text-shadow: 3px 1px #00f3ff, -3px -1px #ff007f;
  }
  28% {
    transform: translate(0);
    text-shadow: -2px 0 #00f3ff, 2px 0 #ff007f;
  }
  45% {
    transform: translate(-2px, -1px);
    text-shadow: -3px 0 #00f3ff, 3px 0 #ff007f;
  }
  48% {
    transform: translate(2px, 1px);
    text-shadow: 3px 0 #00f3ff, -3px 0 #ff007f;
  }
  60% {
    transform: translate(0);
    text-shadow: -2px 0 #00f3ff, 2px 0 #ff007f;
  }
  78% {
    transform: translate(1px, -2px);
    text-shadow: 2px -1px #00f3ff, -2px 1px #ff007f;
  }
  82% {
    transform: translate(-1px, 2px);
    text-shadow: -2px 1px #00f3ff, 2px -1px #ff007f;
  }
}

@keyframes hero-slice-top {
  0%, 100% {
    clip-path: inset(0 0 65% 0);
    transform: translate(0);
    opacity: 0.9;
  }
  20% {
    clip-path: inset(10% 0 50% 0);
    transform: translate(-4px, -1px);
    opacity: 1;
  }
  35% {
    clip-path: inset(5% 0 70% 0);
    transform: translate(3px, 1px);
    opacity: 0.8;
  }
  55% {
    clip-path: inset(0 0 60% 0);
    transform: translate(-3px, 0);
    opacity: 1;
  }
  75% {
    clip-path: inset(15% 0 55% 0);
    transform: translate(4px, -1px);
    opacity: 0.9;
  }
}

@keyframes hero-slice-bottom {
  0%, 100% {
    clip-path: inset(55% 0 0 0);
    transform: translate(0);
    opacity: 0.9;
  }
  18% {
    clip-path: inset(45% 0 10% 0);
    transform: translate(4px, 1px);
    opacity: 1;
  }
  38% {
    clip-path: inset(60% 0 5% 0);
    transform: translate(-3px, -1px);
    opacity: 0.85;
  }
  65% {
    clip-path: inset(40% 0 15% 0);
    transform: translate(3px, 0);
    opacity: 1;
  }
  85% {
    clip-path: inset(50% 0 0 0);
    transform: translate(-4px, 1px);
    opacity: 0.9;
  }
}

.hero-glitch-main {
  animation: hero-glitch-anim 3.2s infinite steps(2, start);
}
.hero-glitch-layer-cyan {
  animation: hero-slice-top 2.4s infinite steps(1, start);
}
.hero-glitch-layer-pink {
  animation: hero-slice-bottom 2.8s infinite steps(1, start);
}

/* Card Glitch Animations */
@keyframes glitch-slice-anim {
  0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0, 0); }
  15% { clip-path: inset(20% 0 55% 0); transform: translate(-3px, 1px); }
  18% { clip-path: inset(60% 0 10% 0); transform: translate(3px, -1px); }
  30% { clip-path: inset(0 0 0 0); transform: translate(0, 0); }
  48% { clip-path: inset(40% 0 30% 0); transform: translate(2px, 1px); }
  50% { clip-path: inset(10% 0 70% 0); transform: translate(-3px, -1px); }
  52% { clip-path: inset(0 0 0 0); transform: translate(0, 0); }
  82% { clip-path: inset(75% 0 5% 0); transform: translate(-2px, 0); }
  85% { clip-path: inset(0 0 0 0); transform: translate(0, 0); }
}

@keyframes glitch-jitter-cyan {
  0%, 100% { transform: translate(0, 0); opacity: 0.85; }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(1px, -1px); }
  60% { transform: translate(-3px, 0); }
  80% { transform: translate(2px, 1px); }
}

@keyframes glitch-jitter-pink {
  0%, 100% { transform: translate(0, 0); opacity: 0.85; }
  25% { transform: translate(2px, -1px); }
  45% { transform: translate(-1px, 1px); }
  65% { transform: translate(3px, -1px); }
  85% { transform: translate(-2px, 0); }
}

.glitch-slice {
  animation: glitch-slice-anim 3.5s infinite steps(1, start);
}
.glitch-layer-cyan {
  animation: glitch-jitter-cyan 1.8s infinite steps(2, start);
}
.glitch-layer-pink {
  animation: glitch-jitter-pink 2.2s infinite steps(2, start);
}

/* Neon Glows & Borders */
.glow-cyan-pink {
  box-shadow: rgba(0, 217, 255, 0.45) -3px 0 20px -2px, rgba(255, 45, 170, 0.45) 3px 0 20px -2px;
}

.glow-green-purple {
  box-shadow: rgba(0, 255, 102, 0.75) -3px 0 22px -2px, rgba(157, 0, 255, 0.65) 3px 0 22px -2px;
}

.glow-subtle {
  box-shadow: 0 0 20px rgba(0, 217, 255, 0.15);
}

/* Cyber Scanning Line */
.cyber-scanline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00D9FF, #FF2DAA, transparent);
  opacity: 0.6;
  animation: scanline 4s linear infinite;
  pointer-events-none;
}

@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(1000%); }
}

/* Radar pulse animation */
@keyframes radar-pulse {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 0.3; }
  100% { transform: scale(0.9); opacity: 0.8; }
}
.radar-ring {
  animation: radar-pulse 3s ease-in-out infinite;
}

/* Holographic ticket shine effect */
.hologram-card {
  position: relative;
  background: linear-gradient(135deg, rgba(25, 25, 35, 0.95), rgba(10, 10, 15, 0.98));
  border: 1px solid rgba(0, 217, 255, 0.4);
  box-shadow: 0 0 35px rgba(0, 217, 255, 0.25), 0 0 50px rgba(255, 45, 170, 0.2);
  overflow: hidden;
}

.hologram-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 30%,
    rgba(0, 217, 255, 0.08) 45%,
    rgba(255, 45, 170, 0.12) 50%,
    rgba(0, 255, 102, 0.08) 55%,
    transparent 70%
  );
  transform: rotate(30deg);
  animation: holo-sweep 6s ease-in-out infinite;
  pointer-events-none;
}

@keyframes holo-sweep {
  0% { transform: translateX(-100%) rotate(30deg); }
  50% { transform: translateX(100%) rotate(30deg); }
  100% { transform: translateX(100%) rotate(30deg); }
}

/* Modal styles */
.modal-backdrop {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-backdrop.hidden-modal {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Reticle Target Crosshair animation */
.reticle-spin {
  animation: reticleRotate 20s linear infinite;
}

@keyframes reticleRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}