/* ══════════════════════════════════════════════════════════════
   bs_motion.css — Blockstards Motion Layer
   Additive interaction/animation upgrade. Does not override
   existing bs_flat.css rules — only adds new classes/behaviors.
   Include AFTER bs_flat.css in header.php.
   ══════════════════════════════════════════════════════════════ */

/* ── Shared easing tokens (fallback if not already defined) ── */
:root{
  --bs-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --bs-ease-spring: cubic-bezier(0.34, 1.15, 0.64, 1);
  --bs-dur-1: 0.18s;
  --bs-dur-2: 0.32s;
  --bs-dur-3: 0.5s;
}

/* ── Card image (no zoom — kept static per OpenSea-style plain lift) ── */
.mcard-img{ overflow:hidden; }

/* ── Card title micro-shift on hover (adds life without motion sickness) ── */
.mcard-name span{
  display:inline-block;
  transition: transform var(--bs-dur-2) var(--bs-ease-out);
}
.mcard:hover .mcard-name span{
  transform: translateX(2px);
}

/* ── Sidebar hover-expand cascade ──────────────────────────────
   Assumes structure: .bs-sidebar > .nav-item > .nav-icon + .nav-label */
.bs-sidebar{
  transition: width var(--bs-dur-3) var(--bs-ease-spring),
              box-shadow var(--bs-dur-3) var(--bs-ease-out);
}
.bs-sidebar:hover{
  box-shadow: 8px 0 30px rgba(0,0,0,.35);
}
.bs-sidebar .nav-label{
  opacity:0;
  transform: translateX(-8px);
  transition: opacity var(--bs-dur-2) ease, transform var(--bs-dur-2) ease;
}
.bs-sidebar:hover .nav-label{
  opacity:1;
  transform: translateX(0);
}
.bs-sidebar .nav-item:nth-child(1) .nav-label{ transition-delay:.04s; }
.bs-sidebar .nav-item:nth-child(2) .nav-label{ transition-delay:.07s; }
.bs-sidebar .nav-item:nth-child(3) .nav-label{ transition-delay:.10s; }
.bs-sidebar .nav-item:nth-child(4) .nav-label{ transition-delay:.13s; }
.bs-sidebar .nav-item:nth-child(5) .nav-label{ transition-delay:.16s; }
.bs-sidebar .nav-item:nth-child(6) .nav-label{ transition-delay:.19s; }
.bs-sidebar:hover .nav-icon{
  transform: scale(1.05);
  transition: transform var(--bs-dur-2) var(--bs-ease-out);
}

/* ── Scroll-reveal (apply .reveal to any section wrapper) ──────
   JS toggles .is-visible via IntersectionObserver (see bs_motion.js) */
.reveal{
  opacity:0;
  transform: translateY(18px);
  transition: opacity var(--bs-dur-3) var(--bs-ease-out),
              transform var(--bs-dur-3) var(--bs-ease-out);
}
.reveal.is-visible{
  opacity:1;
  transform: translateY(0);
}
/* stagger children of a revealed row */
.reveal .mcard{
  transition: transform var(--bs-dur-3) var(--bs-ease-out),
              box-shadow var(--bs-dur-1) var(--bs-ease-out),
              border-color var(--bs-dur-1) var(--bs-ease-out),
              opacity var(--bs-dur-3) var(--bs-ease-out);
}

/* ── Button press feedback ─────────────────────────────────────
   Add .btn-press to any clickable (btn, foil-btn, pill-tab, carousel-nav) */
.btn:active,
.bs-foil-btn:active,
.pill-tab:active,
.carousel-nav:active,
.bs-discord-btn:active{
  transform: scale(0.96);
}
.btn, .bs-foil-btn, .pill-tab, .carousel-nav, .bs-discord-btn{
  transition-property: transform, background, border-color, opacity;
  transition-duration: var(--bs-dur-1);
  transition-timing-function: var(--bs-ease-out);
}

/* ── Nav link underline slide-in ────────────────────────────────
   Apply .nav-underline to top-nav / footer links */
.nav-underline{
  position:relative;
  text-decoration:none;
}
.nav-underline::after{
  content:'';
  position:absolute;
  left:0; bottom:-2px;
  width:100%; height:1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--bs-dur-2) var(--bs-ease-out);
}
.nav-underline:hover::after{
  transform: scaleX(1);
}

/* ── Stat counter (paired with bs_motion.js data-count-to) ────── */
.stat-cell b[data-count-to]{
  font-variant-numeric: tabular-nums;
}

/* ── Toast / notification slide-in (if you add toasts later) ─── */
@keyframes bsToastIn{
  from{ opacity:0; transform: translateY(10px) scale(.98); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
.bs-toast{ animation: bsToastIn .3s var(--bs-ease-out); }

/* ── Respect reduced motion (accessibility, keep last) ─────────── */
@media (prefers-reduced-motion: reduce){
  .reveal, .mcard-img-fg, .mcard-img-bg, .bs-sidebar, .nav-label,
  .nav-underline::after, .stat-cell b{
    transition: none !important;
    animation: none !important;
  }
  .reveal{ opacity:1; transform:none; }
}