/* ─────────────────────────────────────────
   DuesBee — Page Transitions & Reveal System
───────────────────────────────────────── */

/* ══ 1. Loading Overlay ══════════════════ */
#db-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #0d0d0d;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  pointer-events: all;
  will-change: opacity;
}
#db-loader.db-exit {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Logo */
.db-loader-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(10px);
  animation: db-logo-in 0.48s cubic-bezier(0.16, 1, 0.3, 1) 0.07s forwards;
}
@keyframes db-logo-in {
  to { opacity: 1; transform: none; }
}
.db-loader-mark {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
  /* Render the orange logo cleanly on the dark overlay */
  filter: brightness(0) saturate(1) invert(71%) sepia(60%) saturate(800%) hue-rotate(345deg) brightness(105%);
}
.db-loader-name {
  font-family: 'Inter', ui-sans-serif, sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: white;
}

/* Progress bar track */
.db-loader-bar {
  width: 160px;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  border-radius: 1px;
  opacity: 0;
  animation: db-fadein 0.3s ease 0.18s forwards;
}
@keyframes db-fadein { to { opacity: 1; } }

/* Progress bar fill */
#db-progress {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, #8a05ff, #d67f2e);
  border-radius: 1px;
  transition: width 0.92s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ══ 2. Cross-page exit fade ═════════════ */
body.db-page-exit {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.24s ease !important;
}

/* ══ 3. Nav entry ════════════════════════ */
/* JS adds db-anim to body after loader exits */
body.db-anim .nav {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
body.db-anim .nav.db-in {
  opacity: 1;
  transform: none;
}

/* ══ 4. Reveal variants ══════════════════ */

/* Standard: fade + rise */
.db-reveal {
  opacity: 0;
  transform: translateY(30px);
}
.db-reveal.db-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fast: above-fold hero elements */
.db-fast {
  opacity: 0;
  transform: translateY(18px);
}
.db-fast.db-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.52s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.52s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Scale: card grids (subtle zoom-in) */
.db-scale {
  opacity: 0;
  transform: translateY(22px) scale(0.974);
}
.db-scale.db-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Slide from left */
.db-from-left {
  opacity: 0;
  transform: translateX(-24px);
}
.db-from-left.db-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Slide from right */
.db-from-right {
  opacity: 0;
  transform: translateX(24px);
}
.db-from-right.db-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ══ 5. Stagger helpers (inline-style wins, but fallback classes) ══ */
.db-d1 { transition-delay: 0.05s !important; }
.db-d2 { transition-delay: 0.10s !important; }
.db-d3 { transition-delay: 0.15s !important; }
.db-d4 { transition-delay: 0.20s !important; }
.db-d5 { transition-delay: 0.25s !important; }
.db-d6 { transition-delay: 0.30s !important; }
.db-d7 { transition-delay: 0.35s !important; }
.db-d8 { transition-delay: 0.40s !important; }