/* BidQueue logo entrance — orbs → pin pop → magnifier (inline SVG only) */

.brand-mark-slot {
  display: block;
  flex-shrink: 0;
  line-height: 0;
}

.brand-mark-slot .brand-mark.logo-animated {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.brand-mark-slot--hero {
  width: 56px;
}

.brand-mark-slot--bar {
  width: 36px;
}

/* No boxy halo in light mode — subtle depth only on the mark itself */
body:not(.theme-dark) .brand-mark-slot .brand-mark.logo-animated {
  filter: drop-shadow(0 2px 5px rgba(15, 23, 42, 0.1));
}

body.theme-dark .brand-mark-slot .brand-mark.logo-animated {
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}

/* Animate inner layers only — SVG translate() stays on parent <g> */
.bq-anim-orb,
.bq-anim-glow,
.bq-anim-network,
.bq-anim-pin,
.bq-anim-pro {
  transform-box: fill-box;
  transform-origin: center;
}

.bq-anim-orb--far-l { --bq-r0: -16deg; }
.bq-anim-orb--far-r { --bq-r0: 16deg; }
.bq-anim-orb--center { --bq-r0: 0deg; transform-origin: 50% 70%; }
.bq-anim-orb--mid-r { --bq-r0: 12deg; }
.bq-anim-orb--near-l { --bq-r0: -12deg; }

.logo-animated.logo-anim-play .bq-anim-glow {
  animation: bqGlowIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.logo-animated.logo-anim-play .bq-anim-network {
  animation: bqNetworkIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

.logo-animated.logo-anim-play .bq-anim-orb {
  animation: bqOrbIn 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.logo-animated.logo-anim-play .bq-anim-orb--far-l { animation-delay: 0s; }
.logo-animated.logo-anim-play .bq-anim-orb--far-r { animation-delay: 0.04s; }
.logo-animated.logo-anim-play .bq-anim-orb--mid-r { animation-delay: 0.1s; }
.logo-animated.logo-anim-play .bq-anim-orb--near-l { animation-delay: 0.08s; }

.logo-animated.logo-anim-play .bq-anim-pin {
  /* Pivot at teardrop tip — rises from center orb (subtle spin only) */
  transform-origin: 50% 118%;
  animation: bqPinPop 0.72s cubic-bezier(0.34, 1.45, 0.64, 1) 0.32s both;
}

.logo-animated.logo-anim-play .bq-anim-orb--center {
  animation: bqOrbIn 0.52s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both,
    bqOrbPulse 0.38s cubic-bezier(0.22, 1, 0.36, 1) 0.36s both;
}

.logo-animated.logo-anim-play .bq-anim-pro {
  transform-origin: center;
  animation: bqProIn 0.58s cubic-bezier(0.22, 1, 0.36, 1) 0.64s both;
}

@keyframes bqGlowIn {
  from {
    opacity: 0;
    transform: scale(0.75) rotate(-4deg);
  }
  to {
    opacity: 0.5;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes bqNetworkIn {
  from {
    opacity: 0;
    transform: scale(0.92) rotate(-2deg);
  }
  to {
    opacity: 0.5;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes bqOrbIn {
  from {
    opacity: 0;
    transform: scale(0.55) rotate(var(--bq-r0, -10deg));
  }
  68% {
    opacity: 1;
    transform: scale(1.07) rotate(calc(var(--bq-r0, -10deg) * -0.15));
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes bqOrbPulse {
  0% { transform: scale(1); }
  45% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes bqPinPop {
  from {
    opacity: 0;
    transform: translateY(46px) scale(0.48) rotate(-5deg);
  }
  55% {
    opacity: 1;
    transform: translateY(-8px) scale(1.05) rotate(2deg);
  }
  78% {
    transform: translateY(3px) scale(0.99) rotate(-1deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

@keyframes bqProIn {
  from {
    opacity: 0;
    transform: translate(32px, -24px) scale(0.3) rotate(22deg);
  }
  62% {
    opacity: 1;
    transform: translate(-3px, 2px) scale(1.05) rotate(-9deg);
  }
  to {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-animated.logo-anim-play .bq-anim-glow,
  .logo-animated.logo-anim-play .bq-anim-network,
  .logo-animated.logo-anim-play .bq-anim-orb,
  .logo-animated.logo-anim-play .bq-anim-orb--center,
  .logo-animated.logo-anim-play .bq-anim-pin,
  .logo-animated.logo-anim-play .bq-anim-pro {
    animation: none !important;
    opacity: inherit;
    transform: none;
  }
}