/* ═══════════════════════════════════════════════════════════════
   ANIMATED LOGO — Modern Coin
   A coin with a light sweep that glides across like a mint finish.
   ═══════════════════════════════════════════════════════════════ */

.brand-logo {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  display: grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  cursor: default;
}

.logo-svg {
  width: 34px;
  height: 34px;
  display: block;
}

/* ── Ring — slow rotation ── */
@keyframes ring-rotate {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -107; }
}

.logo-ring {
  stroke-dasharray: 8 4;
  animation: ring-rotate 12s linear infinite;
}

/* ── Coin body — subtle breathe ── */
@keyframes coin-breathe {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; }
}

.logo-coin {
  animation: coin-breathe 3s ease-in-out infinite;
}

/* ── Symbol — subtle float ── */
@keyframes symbol-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.5px); }
}

.logo-symbol {
  animation: symbol-float 3s ease-in-out infinite;
}

/* ── Shine sweep — glides across periodically ── */
@keyframes shine-sweep {
  0% { transform: translateX(-30px) rotate(25deg); }
  40%, 100% { transform: translateX(45px) rotate(25deg); }
}

.logo-shine {
  animation: shine-sweep 4s ease-in-out infinite;
}

/* ── Hover — faster sweep ── */
.brand-logo:hover .logo-shine {
  animation-duration: 2s;
}
.brand-logo:hover .logo-ring {
  animation-duration: 6s;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .logo-ring,
  .logo-coin,
  .logo-symbol,
  .logo-shine {
    animation: none !important;
  }
}