/* BRUTALIST OUTLAW - MAIN STYLES */
@import url('reset.css');
@import url('variables.css');
@import url('typography.css');
@import url('layout.css');
@import url('components.css');

/* CUSTOM OUTLAW ANIMATIONS */
@keyframes pulse-outlaw {
  0%, 100% { 
    opacity: 1; 
    transform: scale(1);
  }
  50% { 
    opacity: 0.8; 
    transform: scale(1.05);
  }
}

@keyframes shake-brutal {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
  20%, 40%, 60%, 80% { transform: translateX(2px); }
}

@keyframes flicker-neon {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes brutal-entrance {
  0% { 
    transform: translateY(30px) scale(0.9);
    opacity: 0;
  }
  100% { 
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes digital-chaos {
  0%, 100% { filter: hue-rotate(0deg) contrast(1); }
  25% { filter: hue-rotate(90deg) contrast(1.2); }
  50% { filter: hue-rotate(180deg) contrast(1.5); }
  75% { filter: hue-rotate(270deg) contrast(1.2); }
}

/* CLEAN BRUTALIST STYLING */

/* OUTLAW SPECIFIC UTILITIES */
.pulse-outlaw {
  animation: pulse-outlaw 2s ease-in-out infinite;
}

.shake-brutal {
  animation: shake-brutal 0.5s ease-in-out;
}

.flicker-neon {
  animation: flicker-neon 0.8s ease-in-out infinite;
}

/* BRUTALIST FOCUS STYLES */
*:focus {
  outline: var(--border-width) solid var(--color-primary);
  outline-offset: 2px;
}

/* SELECTION STYLES */
::selection {
  background-color: var(--color-primary);
  color: var(--color-bg);
}

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

/* SCROLLBAR STYLING */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background-color: var(--color-bg-secondary);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-primary);
  border: 2px solid var(--color-bg-secondary);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-secondary);
}

/* PERFORMANCE OPTIMIZATIONS */
.chaos-mode {
  will-change: filter;
  transform: translateZ(0); /* Force GPU acceleration */
}

.text-glitch {
  will-change: transform;
}

.btn {
  will-change: transform, box-shadow;
}

/* REDUCE ANIMATIONS ON MOBILE FOR PERFORMANCE */
@media (max-width: 47.9rem) {
  .chaos-mode {
    animation-duration: 12s; /* Slower on mobile */
  }
  
  .pulse-outlaw {
    animation-duration: 3s;
  }
}

/* PRINT STYLES */
@media print {
  * {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
    animation: none !important;
  }
  
  .btn,
  .hero,
  nav,
  .section-divider,
  .disruption-bg::before {
    display: none;
  }
  
  .container {
    max-width: none;
    padding: 0;
  }
}