/* ══════════════════════════════════════════════
   STAGGER ANIMATIONS
   ══════════════════════════════════════════════ */
.stagger > * {
  opacity: 0; transform: translateY(20px);
  transition: all 0.5s cubic-bezier(0.4,0,0.2,1);
}
.stagger.visible > *:nth-child(1) { transition-delay: 0.05s; }
.stagger.visible > *:nth-child(2) { transition-delay: 0.1s; }
.stagger.visible > *:nth-child(3) { transition-delay: 0.15s; }
.stagger.visible > *:nth-child(4) { transition-delay: 0.2s; }
.stagger.visible > *:nth-child(5) { transition-delay: 0.25s; }
.stagger.visible > *:nth-child(6) { transition-delay: 0.3s; }
.stagger.visible > *:nth-child(7) { transition-delay: 0.35s; }
.stagger.visible > *:nth-child(8) { transition-delay: 0.4s; }
.stagger.visible > *:nth-child(9) { transition-delay: 0.45s; }
.stagger.visible > *:nth-child(10) { transition-delay: 0.5s; }
.stagger.visible > *:nth-child(11) { transition-delay: 0.55s; }
.stagger.visible > *:nth-child(12) { transition-delay: 0.6s; }
.stagger.visible > * { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════════════════
   SHINE EFFECT ON BUTTONS
   ══════════════════════════════════════════════ */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: ''; position: absolute; top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
  transform: rotate(30deg) translateX(-150%); transition: transform 0.6s ease;
}
.btn-shine:hover::after { transform: rotate(30deg) translateX(150%); }

/* ══════════════════════════════════════════════
   NOISE TEXTURE OVERLAY
   ══════════════════════════════════════════════ */
.noise-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════
   GLOW PULSE ON CARDS
   ══════════════════════════════════════════════ */
.glow-pulse { animation: glow 3s ease-in-out infinite; }

/* ══════════════════════════════════════════════
   GRADIENT BORDER
   ══════════════════════════════════════════════ */
.gradient-border {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
}
.gradient-border::before {
  content: ''; position: absolute; inset: -1px;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, var(--accent), var(--cyan));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: 0;
  transition: opacity var(--transition-smooth);
}
.gradient-border:hover::before { opacity: 1; }