/* ================================================================
   CraftBoarding CMS — animations.css
   Keyframes, transitions, AOS overrides, particles
   ================================================================ */

/* ── Keyframes ─────────────────────────────────────────────────── */

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 6px rgba(34, 197, 94, 0.8); }
  50%       { box-shadow: 0 0 14px rgba(34, 197, 94, 1), 0 0 0 4px rgba(34, 197, 94, 0.15); }
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes slideInDown {
  from { transform: translateY(-20px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

@keyframes fadeInUp {
  from { transform: translateY(28px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

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

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 24px rgba(56, 189, 248, 0.3), 0 0 48px rgba(245, 158, 11, 0.12); }
  50%       { box-shadow: 0 0 48px rgba(56, 189, 248, 0.55), 0 0 80px rgba(245, 158, 11, 0.22); }
}

@keyframes glow-pulse-gold {
  0%, 100% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.3); }
  50%       { box-shadow: 0 0 45px rgba(245, 158, 11, 0.65); }
}

@keyframes particle-float {
  0%   { transform: translateY(100vh) scale(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}

@keyframes orb-drift {
  0%, 100% { transform: translateX(-50%) translateY(0px) scale(1); }
  50%       { transform: translateX(-50%) translateY(-20px) scale(1.04); }
}

@keyframes title-glow-in {
  from { opacity: 0; filter: blur(10px) drop-shadow(0 0 0 transparent); transform: translateY(12px); }
  to   { opacity: 1; filter: blur(0)   drop-shadow(0 0 40px rgba(56,189,248,0.4));  transform: translateY(0); }
}

/* ── Hero Particles ────────────────────────────────────────────── */
.hero-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.22);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
  animation: particle-float linear infinite;
  pointer-events: none;
}

/* ── Hero orb animation ─────────────────────────────────────────── */
.hero-orb--1 { animation: orb-drift 8s ease-in-out infinite; }

/* ── Page transitions ──────────────────────────────────────────── */
main {
  animation: fadeInUp 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Navbar scroll effect ──────────────────────────────────────── */
.cb-navbar {
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.cb-navbar.scrolled {
  background: rgba(4, 7, 14, 0.97) !important;
  border-bottom-color: rgba(56, 189, 248, 0.18) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.8) !important;
}

/* ── Button ripple effect ──────────────────────────────────────── */
.btn-ripple {
  position: relative;
  overflow: hidden;
}
.btn-ripple::after {
  content: '';
  position: absolute;
  inset: 50%;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: scale(0);
  transition: width 0.4s ease, height 0.4s ease, inset 0.4s ease, opacity 0.4s ease;
  opacity: 0;
}
.btn-ripple:active::after {
  inset: -20%;
  width: 140%;
  height: 140%;
  transform: scale(1);
  opacity: 1;
  transition: none;
}

/* ── Hero title glow-in ──────────────────────────────────────────── */
.hero-title-accent {
  animation: title-glow-in 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}

/* ── Card hover glow ────────────────────────────────────────────── */
.feature-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 28px rgba(56, 189, 248, 0.14);
}
.shop-card-featured:hover {
  animation: glow-pulse 2.5s infinite;
}
.podium-item:nth-child(1) .podium-block {
  animation: glow-pulse-gold 2.5s infinite;
}

/* ── Auth modal slide-in ────────────────────────────────────────── */
.cb-auth-modal .modal-dialog {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cb-auth-modal.fade .modal-dialog  { transform: translateY(-30px) scale(0.97); }
.cb-auth-modal.show .modal-dialog  { transform: translateY(0) scale(1); }