/* Grid pattern overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 70%);
}

body {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(0, 212, 255, 0.08), transparent 50%),
    radial-gradient(ellipse at 80% 0%, rgba(255, 107, 53, 0.06), transparent 50%),
    linear-gradient(180deg, #0a1220 0%, #0d1525 50%, #0a1220 100%);
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0a1220; }
::-webkit-scrollbar-thumb { background: rgba(0, 212, 255, 0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 212, 255, 0.35); }

/* Toast animation */
.toast.is-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) !important;
}

/* Selection */
::selection {
  background: rgba(0, 212, 255, 0.3);
  color: #fff;
}

/* Focus ring */
:focus-visible {
  outline: 2px solid rgba(0, 212, 255, 0.5);
  outline-offset: 2px;
}

/* Line clamp */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pulse glow effect for accent elements */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.2); }
  50% { box-shadow: 0 0 20px 4px rgba(0, 212, 255, 0.1); }
}

.glow-pulse { animation: pulse-glow 3s ease-in-out infinite; }

/* Fade in animation */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-up {
  animation: fade-up 0.5s ease-out both;
}

/* Stagger children */
.stagger-children > * {
  animation: fade-up 0.4s ease-out both;
}
.stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.3s; }