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

@layer utilities {
  .animate-bg-roll {
    animation: bg-roll 3s linear infinite;
  }
  .animate-spin-slow {
    animation: spin 8s linear infinite;
  }
}

@keyframes bg-roll {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

.foil-holo {
  --space: 5%;
  --angle: 133deg;
  
  background-image: 
    repeating-linear-gradient(
      0deg, 
      rgb(255, 119, 115) calc(var(--space)*1), 
      rgba(255,237,95,1) calc(var(--space)*2), 
      rgba(168,255,95,1) calc(var(--space)*3), 
      rgba(131,255,247,1) calc(var(--space)*4), 
      rgba(120,148,255,1) calc(var(--space)*5), 
      rgb(216,117,255) calc(var(--space)*6), 
      rgb(255,119,115) calc(var(--space)*7)
    ),
    repeating-linear-gradient(
      var(--angle), 
      #0e152e 0%, 
      hsl(180, 10%, 60%) 3.8%, 
      hsl(180, 29%, 66%) 4.5%, 
      hsl(180, 10%, 60%) 5.2%, 
      #0e152e 10%, 
      #0e152e 12%
    );
  
  background-blend-mode: screen, hue;
  background-size: 200% 700%, 300% 200%;
  background-position: 0% 50%, 0% 50%;
  
  filter: brightness(0.8) contrast(1.5) saturate(0.8);
  mix-blend-mode: color-dodge;
  opacity: 0.35;
  
  animation: foil-shift 15s linear infinite;
}

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

/* Global interaction resets */
body {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

img {
  -webkit-user-drag: none;
  user-drag: none;
}

/* Allow selection in inputs and textareas */
input, textarea {
  user-select: text;
  -webkit-user-select: text;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #0f172a; /* slate-900 */
}

::-webkit-scrollbar-thumb {
  background: #334155; /* slate-700 */
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #475569; /* slate-600 */
}
