/* ===== BASTION LOGO V2 — OPTICAL CENTER FIX ===== */

.brand-mark {
  --logo-optical-x: -7px;
  width: clamp(92px, 6.6vw, 126px);
  height: auto;
  object-fit: contain;
  background: transparent !important;
  border: 0;
  border-radius: 0;
  transform-origin: 50% 50%;
  filter:
    drop-shadow(0 0 10px rgba(255, 203, 0, .34))
    drop-shadow(0 0 24px rgba(255, 203, 0, .12))
    drop-shadow(0 0 38px rgba(255, 46, 77, .12));
  animation: bastionLogoFloat 6.8s ease-in-out infinite;
}

.ring-center::before {
  content: "";
  position: absolute;
  width: clamp(116px, 8vw, 156px);
  height: clamp(116px, 8vw, 156px);
  top: clamp(4px, 2.3vw, 22px);
  left: 50%;
  translate: calc(-50% - 7px) 0;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      rgba(255, 203, 0, .15) 0%,
      rgba(255, 203, 0, .06) 34%,
      rgba(255, 46, 77, .045) 56%,
      transparent 74%);
  filter: blur(9px);
  opacity: .92;
  pointer-events: none;
}

.ring-center::after {
  content: "";
  position: absolute;
  width: clamp(90px, 7vw, 132px);
  height: 1px;
  top: clamp(66px, 6.2vw, 92px);
  left: 50%;
  translate: calc(-50% - 7px) 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), rgba(255, 225, 122, .42), transparent);
  opacity: 0;
  filter:
    drop-shadow(0 0 8px rgba(255, 203, 0, .45))
    drop-shadow(0 0 14px rgba(255, 46, 77, .22));
  animation: bastionLogoShine 7.8s ease-in-out infinite;
  pointer-events: none;
}

.ring-center {
  gap: 12px;
}

.brand-name {
  margin-top: 2px;
}

@keyframes bastionLogoFloat {
  0%, 100% {
    transform: translateX(var(--logo-optical-x)) translateY(0) scale(1);
    filter:
      drop-shadow(0 0 10px rgba(255, 203, 0, .34))
      drop-shadow(0 0 24px rgba(255, 203, 0, .12))
      drop-shadow(0 0 38px rgba(255, 46, 77, .12));
  }

  50% {
    transform: translateX(var(--logo-optical-x)) translateY(-3px) scale(1.025);
    filter:
      drop-shadow(0 0 13px rgba(255, 203, 0, .46))
      drop-shadow(0 0 30px rgba(255, 203, 0, .18))
      drop-shadow(0 0 48px rgba(255, 46, 77, .16));
  }
}

@keyframes bastionLogoShine {
  0%, 18%, 100% {
    opacity: 0;
    transform: translateX(-44px);
  }

  25% {
    opacity: .85;
  }

  40% {
    opacity: 0;
    transform: translateX(44px);
  }
}