:root {
  --background: 268 32% 8%;
  --foreground: 210 40% 96%;
  --primary: 194 100% 67%;
  --primary-foreground: 222 47% 10%;
  --secondary: 145 100% 62%;
  --muted: 265 18% 17%;
  --muted-foreground: 214 18% 72%;
  --destructive: 0 78% 62%;
  --border: 264 20% 24%;
  --card: 266 24% 12%;
  --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 18px 48px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 30px 90px rgba(2, 10, 26, 0.45);
  --transition-fast: 180ms ease;
  --transition-smooth: 320ms cubic-bezier(0.22, 1, 0.36, 1);
  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.75rem;
}

.dark {
  --background: 268 32% 8%;
  --foreground: 210 40% 96%;
  --primary: 194 100% 67%;
  --primary-foreground: 222 47% 10%;
  --secondary: 145 100% 62%;
  --muted: 265 18% 17%;
  --muted-foreground: 214 18% 72%;
  --destructive: 0 78% 62%;
  --border: 264 20% 24%;
  --card: 266 24% 12%;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:
    radial-gradient(circle at top, rgba(168, 85, 247, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(20, 12, 34, 1), rgba(12, 8, 22, 1));
  color: hsl(var(--foreground));
}

::selection {
  background: rgba(88, 214, 255, 0.28);
}

a,
button {
  transition: transform var(--transition-fast), box-shadow var(--transition-smooth), background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}

.glow-dot {
  box-shadow: 0 0 16px rgba(88, 214, 255, 0.8), 0 0 30px rgba(88, 214, 255, 0.45);
}

.umbrella-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 20%, transparent 80%, rgba(0, 0, 0, 0.14));
  pointer-events: none;
}

.rain-layer {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.14) 0 10%, transparent 10% 100%),
    linear-gradient(180deg, rgba(255,255,255,0.08) 0 10%, transparent 10% 100%),
    linear-gradient(180deg, rgba(255,255,255,0.05) 0 10%, transparent 10% 100%);
  background-size: 2px 26px, 2px 34px, 2px 42px;
  background-position: 8% -20%, 45% 0%, 82% -10%;
  opacity: 0.38;
  animation: rainfall 12s linear infinite;
  pointer-events: none;
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.1), rgba(255,255,255,0.06));
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}

@keyframes rainfall {
  0% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(28px);
  }
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Animation Utilities */
.animate-in {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: both;
}

.fade-in {
  animation-name: fadeIn;
}

.zoom-in {
  animation-name: zoomIn;
}

.slide-in-from-bottom-10 {
  animation-name: slideInFromBottom;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideInFromBottom {
  from { opacity: 0; transform: translateY(2.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}