@import "tailwindcss";

@import "plyr/dist/plyr.css";

.plyr video {
  object-fit: contain;
}

@theme {
  --font-display: "Poppins", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial,
    sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial,
    sans-serif;

  --color-night-900: #0a0f1a;
  --color-night-800: #0e1526;

  --color-primary-600: #6d28d9;
  --color-primary-700: #5b21b6;

  --color-accent-500: #06b6d4;

  --shadow-glow: 0 10px 30px rgba(109, 40, 217, 0.35);
}

.glass {
  --glass-bg1: rgba(255, 255, 255, 0.07);
  --glass-bg2: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.1);

  position: relative;
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  background: linear-gradient(180deg, var(--glass-bg1), var(--glass-bg2));
  border: 1px solid var(--glass-border);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease,
    opacity 0.2s ease;
}

.glass.glass--scrolled {
  --glass-bg1: rgba(15, 15, 20, 0.88);
  --glass-bg2: rgba(15, 15, 20, 0.88);
  --glass-border: rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.grad-text {
  background: linear-gradient(90deg, #a78bfa, #60a5fa, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}