.lc-logo {
  --lc-size: 64px;
  --lc-bg: transparent;
  --lc-fg: var(--text-primary);
  position: relative;
  width: var(--lc-size);
  height: var(--lc-size);
  display: grid;
  place-items: center;
  color: var(--lc-fg);
  cursor: pointer;
  user-select: none;
  isolation: isolate;
  overflow: visible;
  outline: none;
  transition: transform 0.4s var(--ease-spring);
}

.lc-logo:hover {
  transform: scale(1.06);
}

.lc-logo:active {
  transform: scale(0.95);
}

.lc-logo-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.lc-mark,
.lc-chevron,
.lc-core,
.lc-ring,
.lc-ripple {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}

.lc-shape {
  fill: currentColor;
}

.lc-mark {
  transition: transform 0.45s var(--ease-spring), filter 0.3s ease;
}

.lc-chevron {
  transition: transform 0.45s var(--ease-spring), opacity 0.2s ease;
}

.lc-core {
  transition: transform 0.45s var(--ease-spring), opacity 0.2s ease;
}

.lc-ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  opacity: 0;
  transform: scale(0.86);
  transition: transform 0.4s var(--ease-spring), opacity 0.3s ease;
}

.lc-ripple {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  opacity: 0;
  transform: scale(0.78);
}

.lc-logo:hover .lc-mark {
  transform: rotate(3deg);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
}

.lc-logo:hover .lc-chevron-left {
  transform: translateX(-2px) rotate(-3deg);
}

.lc-logo:hover .lc-chevron-right {
  transform: translateX(2px) rotate(3deg);
}

.lc-logo:hover .lc-core {
  transform: scale(1.06) rotate(6deg);
}

.lc-logo:hover .lc-ring {
  opacity: 0.12;
  transform: scale(1);
}

.lc-logo.is-bursting .lc-mark {
  transform: scale(1.04) rotate(6deg);
}

.lc-logo.is-bursting .lc-core {
  animation: lcCorePulse 0.5s var(--ease-spring);
}

.lc-logo.is-bursting .lc-ripple {
  animation: lcRipple 0.6s var(--ease-spring) forwards;
}

.lc-particles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.lc-particle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  margin-top: -3px;
  background: currentColor;
  border-radius: 999px;
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(0.6);
  will-change: transform, opacity;
  animation: lcParticleBurst 0.6s cubic-bezier(0.16, 0.84, 0.32, 1) forwards;
}

.lc-particle.bar {
  width: 8px;
  height: 3px;
  border-radius: 999px;
}

@keyframes lcRipple {
  0% { opacity: 0.5; transform: scale(0.78); }
  100% { opacity: 0; transform: scale(1.3); }
}

@keyframes lcCorePulse {
  0% { transform: scale(1) rotate(0deg); }
  45% { transform: scale(1.18) rotate(14deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes lcParticleBurst {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.6) rotate(0deg); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) scale(1) rotate(var(--rot)); }
}

.nav-lc-logo {
  --lc-size: 32px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav-lc-logo .lc-logo:hover {
  transform: scale(1.1);
}

.lc-logo-hero {
  --lc-size: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 768px) {
  .lc-logo-hero {
    --lc-size: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lc-logo, .lc-logo *, .lc-particle {
    transition: none !important;
    animation: none !important;
  }
  .lc-logo:hover { transform: none; }
}