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

/* Go Productions - Premium Black & White Design System */

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 0%;

    --card: 0 0% 100%;
    --card-foreground: 0 0% 0%;

    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 0%;

    --primary: 0 0% 0%;
    --primary-foreground: 0 0% 100%;

    --secondary: 0 0% 96%;
    --secondary-foreground: 0 0% 0%;

    --muted: 0 0% 96%;
    --muted-foreground: 0 0% 45%;

    --accent: 0 0% 96%;
    --accent-foreground: 0 0% 0%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;

    --border: 0 0% 90%;
    --input: 0 0% 90%;
    --ring: 0 0% 0%;

    --radius: 0rem;

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 0 0% 20%;
    --sidebar-primary: 0 0% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 0 0% 95%;
    --sidebar-accent-foreground: 0 0% 10%;
    --sidebar-border: 0 0% 91%;
    --sidebar-ring: 0 0% 0%;
  }

  .dark {
    --background: 0 0% 0%;
    --foreground: 0 0% 100%;

    --card: 0 0% 5%;
    --card-foreground: 0 0% 100%;

    --popover: 0 0% 5%;
    --popover-foreground: 0 0% 100%;

    --primary: 0 0% 100%;
    --primary-foreground: 0 0% 0%;

    --secondary: 0 0% 15%;
    --secondary-foreground: 0 0% 100%;

    --muted: 0 0% 15%;
    --muted-foreground: 0 0% 65%;

    --accent: 0 0% 15%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 100%;

    --border: 0 0% 20%;
    --input: 0 0% 20%;
    --ring: 0 0% 100%;

    --sidebar-background: 0 0% 5%;
    --sidebar-foreground: 0 0% 95%;
    --sidebar-primary: 0 0% 100%;
    --sidebar-primary-foreground: 0 0% 0%;
    --sidebar-accent: 0 0% 15%;
    --sidebar-accent-foreground: 0 0% 95%;
    --sidebar-border: 0 0% 15%;
    --sidebar-ring: 0 0% 100%;
  }
}

@layer base {
  * {
    @apply border-border;
    cursor: none;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-family: 'Inter', system-ui, sans-serif;
  }

  ::selection {
    @apply bg-foreground text-background;
  }
}

@layer components {
  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-foreground to-muted-foreground;
  }

  .hover-lift {
    @apply transition-transform duration-500 ease-out hover:-translate-y-2;
  }

  .image-reveal {
    @apply overflow-hidden;
  }

  .image-reveal img {
    @apply transition-transform duration-700 ease-out hover:scale-110;
  }
}

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

::-webkit-scrollbar-track {
  background: hsl(var(--background));
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--foreground));
}

/* Marquee animation */
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  animation: marquee 30s linear infinite;
}

/* Page transitions */
@keyframes page-enter {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-enter {
  animation: page-enter 0.6s ease-out forwards;
}

/* Stagger children animation */
@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-up {
  animation: fade-up 0.8s ease-out forwards;
}

.fade-up-delay-1 {
  animation: fade-up 0.8s ease-out 0.1s forwards;
  opacity: 0;
}

.fade-up-delay-2 {
  animation: fade-up 0.8s ease-out 0.2s forwards;
  opacity: 0;
}

.fade-up-delay-3 {
  animation: fade-up 0.8s ease-out 0.3s forwards;
  opacity: 0;
}

.fade-up-delay-4 {
  animation: fade-up 0.8s ease-out 0.4s forwards;
  opacity: 0;
}

/* Logo reveal animation */
@keyframes logo-reveal {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  100% {
    clip-path: inset(0 0% 0 0);
    opacity: 1;
  }
}

.logo-reveal {
  animation: logo-reveal 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* Text reveal animation */
@keyframes text-reveal {
  0% {
    clip-path: inset(0 0 100% 0);
    transform: translateY(100%);
  }
  100% {
    clip-path: inset(0 0 0% 0);
    transform: translateY(0%);
  }
}

.text-reveal {
  animation: text-reveal 0.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* Scale in animation */
@keyframes scale-in {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.scale-in {
  animation: scale-in 0.6s ease-out forwards;
}

/* Line draw animation */
@keyframes line-draw {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

.line-draw {
  animation: line-draw 1s ease-out forwards;
}
