@import "tailwindcss";

@theme {
  --color-background: 0 0% 5%;
  --color-foreground: 0 0% 98%;
  --color-card: 0 0% 10%;
  --color-card-foreground: 0 0% 98%;
  --color-popover: 0 0% 10%;
  --color-popover-foreground: 0 0% 98%;
  --color-primary: 220 100% 60%;
  --color-primary-foreground: 0 0% 100%;
  --color-secondary: 0 0% 15%;
  --color-secondary-foreground: 0 0% 98%;
  --color-muted: 0 0% 15%;
  --color-muted-foreground: 0 0% 60%;
  --color-accent: 0 0% 15%;
  --color-accent-foreground: 0 0% 98%;
  --color-destructive: 0 84% 60%;
  --color-destructive-foreground: 0 0% 98%;
  --color-border: 0 0% 20%;
  --color-input: 0 0% 20%;
  --color-ring: 220 100% 60%;
  --radius: 0.5rem;
}

/* Logo marquee animation */
@keyframes scroll-right {
  0% {
    transform: translateX(-33.333%);
  }
  100% {
    transform: translateX(0%);
  }
}

.animate-scroll-right {
  animation: scroll-right 45s linear infinite;
}

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

* {
  border-color: hsl(var(--color-border) / 0.1);
}

body {
  background-color: hsl(var(--color-background));
  color: hsl(var(--color-foreground));
  font-feature-settings: "rlig" 1, "calt" 1;
  font-family: var(--font-geist-sans), system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Glass Morphism Effects - Swiplay Style */
.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.glass-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.glass-button {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.glass-button:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}