/* ============================================================================
   MOQBridge — Premium 3D & motion layer
   Additive only: no existing selector is redefined, so nothing that currently
   works can break. Every effect is opt-in via a data attribute or class, and
   the whole file is neutralised by prefers-reduced-motion.
   ========================================================================== */

/* ── Scroll reveal ─────────────────────────────────────────────────────── */
/* Only hide when JS is confirmed running (html.js). Without JS everything
   stays visible, so a script failure can never blank the page. */
html.js .reveal-3d {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.23,1,.32,1), transform .6s cubic-bezier(.23,1,.32,1);
  will-change: opacity, transform;
}
html.js .reveal-3d.in { opacity: 1; transform: none; }

/* ── 3D tilt targets ───────────────────────────────────────────────────── */
[data-tilt] {
  transform-style: preserve-3d;
  transition: transform .25s cubic-bezier(.23,1,.32,1), box-shadow .25s ease;
  will-change: transform;
}
[data-tilt].tilt-active { transition: transform .08s linear, box-shadow .25s ease; }
[data-tilt] > * { transform: translateZ(0.01px); }

/* Cards lift with a hint of depth on hover */
[data-tilt]:hover {
  box-shadow: 0 26px 60px rgba(0,0,0,.45);
}

/* ── Animated gradient edge (tender cards + tiles) ─────────────────────── */
.mb-t-card { position: relative; overflow: hidden; }
.mb-t-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, rgba(34,211,238,.65), rgba(152,128,255,.55), rgba(236,72,153,.55), rgba(34,211,238,.65));
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  animation: moqbEdge 6s linear infinite;
}
.mb-t-card:hover::after { opacity: 1; }
@keyframes moqbEdge {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ── Section orbs (behind the tender board) ────────────────────────────── */
.mb-tenders { position: relative; overflow: hidden; }
.mb-tenders::before,
.mb-tenders::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .30;
  pointer-events: none;
  z-index: 0;
}
.mb-tenders::before {
  width: 380px; height: 380px; left: -110px; top: 40px;
  background: radial-gradient(circle, rgba(34,211,238,.75), transparent 65%);
  animation: moqbFloat 14s ease-in-out infinite;
}
.mb-tenders::after {
  width: 420px; height: 420px; right: -130px; bottom: 20px;
  background: radial-gradient(circle, rgba(236,72,153,.65), transparent 65%);
  animation: moqbFloat 18s ease-in-out infinite reverse;
}
.mb-t-wrap { position: relative; z-index: 1; }
@keyframes moqbFloat {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(24px,-26px,0) scale(1.08); }
}

/* ── Popup tiles: depth on hover ───────────────────────────────────────── */
.moqbReg-tile { transform-style: preserve-3d; }
.moqbReg-tile:hover .moqbReg-ic {
  transform: translateZ(18px) scale(1.06);
  transition: transform .25s cubic-bezier(.23,1,.32,1);
}
.moqbReg-ic { transition: transform .25s ease; }

/* ── Subtle pulse for the "free" badges ────────────────────────────────── */
@keyframes moqbPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.35); }
  50%     { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
}
.mb-t-stats strong { animation: moqbPulse 3.2s ease-in-out infinite; border-radius: 50%; }

/* ── Respect user motion preferences ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal-3d { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-tilt] { transform: none !important; }
  .mb-t-card::after,
  .mb-tenders::before,
  .mb-tenders::after,
  .mb-t-stats strong { animation: none !important; }
}