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

@layer base {

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

  body {
    font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    background-color: #f2f0e9;
    color: #1a1a1a;
    /* cursor: url('/demi_cursor.png'), pointer !important; */
  }
}

@layer components {
  .glitch-text {
    position: relative;
    display: inline-block;
    color: #1a1a1a;
    letter-spacing: 0.15em;
  }

  .glitch-text::before,
  .glitch-text::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
  }

  .glitch-text::before {
    color: rgba(234, 88, 12, 0.7);
    transform: translate(2px, 0);
  }

  .glitch-text::after {
    color: rgba(99, 102, 241, 0.6);
    transform: translate(-2px, 0);
  }

  .glitch-active::before,
  .glitch-active::after {
    opacity: 1;
    animation: glitch-shift 0.6s steps(2, end) infinite;
  }
}

@keyframes glitch-shift {
  0% {
    transform: translate(-1px, 0);
  }

  50% {
    transform: translate(1px, 0);
  }

  100% {
    transform: translate(-1px, 0);
  }
}

@layer utilities {
  .bg-noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
  }

  .perspective-grid {
    position: fixed;
    inset: -20% 0 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.2;
    background-image:
      linear-gradient(rgba(26, 26, 26, 0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(26, 26, 26, 0.08) 1px, transparent 1px);
    background-size: 60px 60px;
    transform: perspective(800px) rotateX(65deg);
    transform-origin: top;
  }

  .bg-grid-pattern {
    background-image:
      linear-gradient(rgba(26, 26, 26, 0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(26, 26, 26, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
  }

  .shadow-hard {
    box-shadow: 4px 4px 0 0 #1a1a1a;
  }

  .shadow-hard-sm {
    box-shadow: 2px 2px 0 0 #1a1a1a;
  }

  .shadow-hard-lg {
    box-shadow: 6px 6px 0 0 #1a1a1a;
  }

  .perspective-1000 {
    perspective: 1000px;
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (max-width: 768px) {

  .bg-noise,
  .perspective-grid {
    display: none;
  }

  .shadow-hard-lg {
    box-shadow: 3px 3px 0 0 #1a1a1a;
  }

  .shadow-hard-lg {
    box-shadow: 8px 8px 0 0 #1a1a1a;
  }

  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(26, 26, 26, 0.1);
    border-radius: 10px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #f97316;
  }
}