@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

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

/* BRUTALIST CINEMA - /seen/ 
   Aggressive. Unapologetic. Unforgettable.
*/
:root {
  color-scheme: dark;
  
  /* BRUTALIST PALETTE - Pure, Aggressive, Uncompromising */
  --color-surface-dim: 0 0 0;
  --color-surface: 0 0 0;
  --color-surface-bright: 18 18 18;
  --color-surface-container-lowest: 0 0 0;
  --color-surface-container-low: 10 10 10;
  --color-surface-container: 15 15 15;
  --color-surface-container-high: 25 25 25;
  --color-surface-container-highest: 35 35 35;
  
  /* Legacy mappings */
  --color-bg: var(--color-surface);
  --color-fg: 255 255 255;
  --color-muted: var(--color-surface-container-low);
  --color-muted-fg: 140 140 140;
  --color-card: var(--color-surface-container);
  --color-border: 40 40 40;
  
  /* Primary - HOT PINK (The Unforgettable Accent) */
  --color-primary: 255 0 110;
  --color-primary-container: 200 0 85;
  --color-primary-fixed: 255 102 170;
  --color-primary-fixed-dim: 255 51 140;
  --color-on-primary: 0 0 0;
  --color-on-primary-container: 255 255 255;
  
  /* Accent alias */
  --color-accent: var(--color-primary);
  
  /* Secondary - Pure White (High Contrast) */
  --color-secondary: 255 255 255;
  --color-secondary-container: 200 200 200;
  --color-secondary-fixed: 255 255 255;
  --color-secondary-fixed-dim: 230 230 230;
  --color-on-secondary: 0 0 0;
  --color-on-secondary-container: 0 0 0;
  
  /* Tertiary - Electric Yellow */
  --color-tertiary: 255 255 0;
  --color-tertiary-container: 200 200 0;
  
  /* Semantic Colors */
  --color-success: 0 255 0;
  --color-warning: 255 255 0;
  --color-danger: 255 0 0;
  --color-on-danger: 0 0 0;
  
  /* Outlines & Variants */
  --color-outline: 80 80 80;
  --color-outline-variant: 40 40 40;
  --color-on-surface-variant: 180 180 180;
  
  /* Inverse */
  --color-inverse-surface: 255 255 255;
  --color-inverse-on-surface: 0 0 0;
  --color-inverse-primary: 200 0 85;
  
  /* Surface Tint */
  --color-surface-tint: 255 0 110;
  
  /* Brutalist Effects */
  --noise-opacity: 0.08;
  --impact-scale: 1.0;
}

:root[data-theme='light'] {
  color-scheme: light;
  
  /* Surface Architecture */
  --color-surface-dim: 219 216 215;
  --color-surface: 246 246 244;
  --color-surface-bright: 246 245 244;
  --color-surface-container-lowest: 255 255 255;
  --color-surface-container-low: 240 239 238;
  --color-surface-container: 234 233 232;
  --color-surface-container-high: 228 227 226;
  --color-surface-container-highest: 221 220 219;
  
  /* Legacy mappings */
  --color-bg: var(--color-surface);
  --color-fg: 28 28 28;
  --color-muted: var(--color-surface-container-low);
  --color-muted-fg: 100 100 100;
  --color-card: var(--color-surface-container);
  --color-border: 200 199 198;
  
  /* Primary */
  --color-primary: 0 110 255;
  --color-primary-container: 0 110 255;
  --color-primary-fixed: 217 226 255;
  --color-primary-fixed-dim: 177 197 255;
  --color-on-primary: 255 255 255;
  --color-on-primary-container: 0 4 22;
  
  --color-accent: var(--color-primary-container);
  
  /* Secondary */
  --color-secondary: 99 26 179;
  --color-secondary-container: 233 220 255;
  --color-secondary-fixed: 233 220 255;
  --color-secondary-fixed-dim: 208 188 255;
  --color-on-secondary: 255 255 255;
  --color-on-secondary-container: 35 0 92;
  
  /* Tertiary */
  --color-tertiary: 0 136 93;
  --color-tertiary-container: 111 255 190;
  
  /* Semantic Colors */
  --color-success: 0 136 93;
  --color-warning: 167 119 0;
  --color-danger: 186 26 26;
  --color-on-danger: 255 218 214;
  
  /* Outlines */
  --color-outline: 113 117 128;
  --color-outline-variant: 196 199 208;
  --color-on-surface-variant: 113 117 128;
  
  /* Inverse */
  --color-inverse-surface: 49 48 48;
  --color-inverse-on-surface: 241 239 238;
  --color-inverse-primary: 177 197 255;
  
  --color-surface-tint: 177 197 255;
}

@layer base {
  * {
    @apply border-border;
  }

  html,
  body,
  #root {
    min-height: 100%;
  }

  body {
    @apply bg-surface text-fg font-sans;
    margin: 0;
    min-width: 320px;
    background: #000000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* BRUTAL NOISE TEXTURE */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='3.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    pointer-events: none;
    opacity: var(--noise-opacity);
    z-index: 9999;
    mix-blend-mode: overlay;
  }

  /* AGGRESSIVE TYPOGRAPHY */
  h1,
  h2,
  h3,
  h4 {
    @apply font-display;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.9;
    text-transform: uppercase;
  }

  h1 {
    font-size: clamp(3rem, 8vw, 7rem);
  }

  h2 {
    font-size: clamp(2rem, 5vw, 4rem);
  }

  h3 {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
  }

  p {
    line-height: 1.5;
    letter-spacing: -0.01em;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  /* HOT PINK SELECTION */
  ::selection {
    background-color: rgb(var(--color-primary));
    color: rgb(0 0 0);
  }

  /* HARD EDGES EVERYWHERE */
  * {
    border-radius: 0 !important;
  }
}

@layer components {
  /* BRUTALIST PANELS - Hard Edges, High Contrast */
  .panel {
    @apply bg-surface-container;
    border: 3px solid rgb(var(--color-outline));
    box-shadow: 8px 8px 0 rgb(var(--color-primary));
  }

  .panel-elevated {
    @apply bg-surface-high;
    border: 4px solid rgb(var(--color-primary));
    box-shadow: 12px 12px 0 rgb(var(--color-outline));
  }

  .panel-glass {
    @apply bg-surface-container;
    border: 2px solid rgb(var(--color-outline-variant));
  }

  /* AGGRESSIVE ACCENTS */
  .gradient-primary {
    background: rgb(var(--color-primary));
  }

  .gradient-secondary {
    background: rgb(var(--color-secondary));
  }

  .gradient-mesh {
    background: 
      repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgb(var(--color-primary) / 0.03) 10px,
        rgb(var(--color-primary) / 0.03) 20px
      );
  }

  /* BRUTAL BORDERS */
  .brutal-border {
    border: 3px solid rgb(var(--color-fg));
    position: relative;
  }

  .brutal-border::after {
    content: '';
    position: absolute;
    inset: -6px;
    border: 3px solid rgb(var(--color-primary));
    pointer-events: none;
  }

  /* IMPACT SHADOWS */
  .shadow-brutal {
    box-shadow: 8px 8px 0 rgb(var(--color-primary));
  }

  .shadow-brutal-lg {
    box-shadow: 12px 12px 0 rgb(var(--color-primary));
  }

  .shadow-brutal-hover {
    transition: all 0.1s ease;
  }

  .shadow-brutal-hover:hover {
    transform: translate(-4px, -4px);
    box-shadow: 12px 12px 0 rgb(var(--color-primary));
  }

  /* INSTANT ANIMATIONS - No Easing */
  .animate-stagger {
    animation: brutal-appear 0.1s steps(1) both;
  }

  .animate-scale {
    animation: brutal-scale 0.1s steps(2) both;
  }

  /* GLITCH EFFECT */
  .glitch {
    position: relative;
  }

  .glitch::before,
  .glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .glitch::before {
    left: 2px;
    text-shadow: -2px 0 rgb(var(--color-primary));
    clip: rect(24px, 550px, 90px, 0);
    animation: glitch-anim 3s infinite linear alternate-reverse;
  }

  .glitch::after {
    left: -2px;
    text-shadow: -2px 0 rgb(var(--color-tertiary));
    clip: rect(85px, 550px, 140px, 0);
    animation: glitch-anim 2s infinite linear alternate-reverse;
  }

  /* SCANLINES */
  .scanlines {
    position: relative;
    overflow: hidden;
  }

  .scanlines::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 2px,
      rgb(var(--color-fg) / 0.03) 2px,
      rgb(var(--color-fg) / 0.03) 4px
    );
    pointer-events: none;
    z-index: 10;
  }

  /* SCROLLBAR - BRUTAL STYLE */
  .scrollbar-brutal {
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-primary)) rgb(var(--color-surface-container));
  }

  .scrollbar-brutal::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }

  .scrollbar-brutal::-webkit-scrollbar-track {
    background: rgb(var(--color-surface-container));
    border: 2px solid rgb(var(--color-outline));
  }

  .scrollbar-brutal::-webkit-scrollbar-thumb {
    background: rgb(var(--color-primary));
    border: 2px solid rgb(var(--color-surface));
  }

  .scrollbar-brutal::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--color-primary-fixed));
  }
}

@layer utilities {
  /* Stagger Animation Delays */
  .stagger-1 { animation-delay: 50ms; }
  .stagger-2 { animation-delay: 100ms; }
  .stagger-3 { animation-delay: 150ms; }
  .stagger-4 { animation-delay: 200ms; }
  .stagger-5 { animation-delay: 250ms; }
  .stagger-6 { animation-delay: 300ms; }
}

/* BRUTAL ANIMATIONS - Hard Cuts, No Easing */
@keyframes brutal-appear {
  0% { 
    opacity: 0; 
  }
  100% { 
    opacity: 1; 
  }
}

@keyframes brutal-scale {
  0% { 
    transform: scale(0.9); 
  }
  50% {
    transform: scale(1.05);
  }
  100% { 
    transform: scale(1); 
  }
}

@keyframes glitch-anim {
  0% {
    clip: rect(42px, 9999px, 44px, 0);
  }
  5% {
    clip: rect(12px, 9999px, 59px, 0);
  }
  10% {
    clip: rect(48px, 9999px, 29px, 0);
  }
  15% {
    clip: rect(42px, 9999px, 73px, 0);
  }
  20% {
    clip: rect(63px, 9999px, 27px, 0);
  }
  25% {
    clip: rect(34px, 9999px, 55px, 0);
  }
  30% {
    clip: rect(86px, 9999px, 73px, 0);
  }
  35% {
    clip: rect(20px, 9999px, 20px, 0);
  }
  40% {
    clip: rect(26px, 9999px, 60px, 0);
  }
  45% {
    clip: rect(25px, 9999px, 66px, 0);
  }
  50% {
    clip: rect(57px, 9999px, 98px, 0);
  }
  55% {
    clip: rect(5px, 9999px, 46px, 0);
  }
  60% {
    clip: rect(82px, 9999px, 31px, 0);
  }
  65% {
    clip: rect(54px, 9999px, 27px, 0);
  }
  70% {
    clip: rect(28px, 9999px, 99px, 0);
  }
  75% {
    clip: rect(45px, 9999px, 69px, 0);
  }
  80% {
    clip: rect(23px, 9999px, 85px, 0);
  }
  85% {
    clip: rect(54px, 9999px, 84px, 0);
  }
  90% {
    clip: rect(45px, 9999px, 47px, 0);
  }
  95% {
    clip: rect(37px, 9999px, 20px, 0);
  }
  100% {
    clip: rect(4px, 9999px, 91px, 0);
  }
}

@keyframes flicker {
  0%, 100% {
    opacity: 1;
  }
  41.99% {
    opacity: 1;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  43.01% {
    opacity: 1;
  }
  47.99% {
    opacity: 1;
  }
  48% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  49.01% {
    opacity: 1;
  }
}

@keyframes slide-brutal {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}
