:root {
  --background: 240 18% 4%;
  --foreground: 45 30% 94%;
  --primary: 265 100% 64%;
  --primary-bright: 282 100% 72%;
  --secondary: 240 12% 16%;
  --muted: 245 9% 66%;
  --destructive: 355 84% 58%;
  --border: 250 18% 24%;
  --card: 240 15% 9%;
  --accent-gold: 42 96% 62%;
  --shadow-sm: 0 10px 30px hsl(260 100% 5% / 0.25);
  --shadow-md: 0 20px 70px hsl(260 100% 5% / 0.42);
  --shadow-lg: 0 30px 110px hsl(260 100% 5% / 0.58);
  --transition-fast: 160ms ease;
  --transition-smooth: 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --radius-sm: 0.75rem;
  --radius-md: 1.25rem;
  --radius-lg: 1.75rem;
}

.dark {
  --background: 240 18% 4%;
  --foreground: 45 30% 94%;
  --primary: 265 100% 64%;
  --primary-bright: 282 100% 72%;
  --secondary: 240 12% 16%;
  --muted: 245 9% 66%;
  --destructive: 355 84% 58%;
  --border: 250 18% 24%;
  --card: 240 15% 9%;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

button {
  cursor: pointer;
}

button:focus-visible {
  outline: 2px solid hsl(var(--accent-gold));
  outline-offset: 3px;
}

.orb {
  position: absolute;
  width: 34rem;
  height: 34rem;
  border-radius: 999px;
  filter: blur(72px);
  opacity: 0.34;
  animation: drift 16s ease-in-out infinite alternate;
}

.orb-one {
  left: -12rem;
  top: 4rem;
  background: radial-gradient(circle, hsl(var(--primary)) 0%, transparent 68%);
}

.orb-two {
  right: -14rem;
  top: 18rem;
  background: radial-gradient(circle, hsl(var(--accent-gold)) 0%, transparent 66%);
  animation-delay: -5s;
}

.grain {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image: linear-gradient(115deg, transparent 0%, hsl(var(--primary) / 0.12) 35%, transparent 70%), radial-gradient(circle at 20% 20%, hsl(var(--foreground) / 0.08) 0 1px, transparent 1px);
  background-size: auto, 18px 18px;
}

.shadow-violet-glow {
  box-shadow: 0 0 34px hsl(var(--primary) / 0.34);
}

.progress-glow {
  box-shadow: 0 0 25px hsl(var(--primary) / 0.75), 0 0 48px hsl(var(--accent-gold) / 0.25);
}

.cinema-card {
  position: relative;
  overflow: hidden;
}

.cinema-card::before,
.opportunity-card::before,
.quiz-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, hsl(var(--foreground) / 0.13), transparent 26%, transparent 72%, hsl(var(--primary) / 0.12));
  opacity: 0.7;
}

.quiz-card,
.opportunity-card {
  position: relative;
  overflow: hidden;
}

.quiz-card > *,
.opportunity-card > *,
.cinema-card > * {
  position: relative;
  z-index: 1;
}

.option-card {
  transform: translateZ(0);
}

.slide-in {
  animation: slideIn 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.slide-back {
  animation: slideBack 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pulse-dot {
  animation: pulseDot 1.6s ease-in-out infinite;
}

.skeleton {
  background: linear-gradient(90deg, hsl(var(--secondary)) 0%, hsl(var(--border)) 45%, hsl(var(--secondary)) 90%);
  background-size: 220% 100%;
  animation: skeleton 1.25s ease-in-out infinite;
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(3rem, -2rem, 0) scale(1.1); }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(28px) scale(0.985); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes slideBack {
  from { opacity: 0; transform: translateX(-24px) scale(0.985); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.55); opacity: 1; }
}

@keyframes skeleton {
  from { background-position: 220% 0; }
  to { background-position: -220% 0; }
}

@media (max-width: 420px) {
  .orb {
    width: 22rem;
    height: 22rem;
  }
}