.logo {
  width: 100%;
  max-width: var(--w, 400px);
  aspect-ratio: 1 / 1;
  position: relative;
  user-select: none;
  margin: 0 auto;
}

.logo .layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}


/* Logo Animations */
.logo {
  animation: flicker 3.5s infinite;
}

.logo .heart {
  opacity: 0;
  transform: translateY(6px) scale(0.92);
  filter: blur(10px) brightness(0.85);
  animation:
    fadeIn 0.55s cubic-bezier(0.2, 0.9, 0.2, 1) forwards,
    breathe 5s ease-in-out infinite;
  animation-delay: 0.5s, 1.20s;
  will-change: transform, filter;
}

.logo .eyes {
  animation:
    blink 5.8s linear infinite;
  animation-delay: 0.95s, 1.55s;
  transform-origin: 50% 50%;
  will-change: transform;
}

@keyframes fadeIn {
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) brightness(1); }
}

@keyframes breathe {
  0%   { transform: translateY(0) scale(1);    filter: blur(0) brightness(1); }
  50%  { transform: translateY(0) scale(1.05); filter: blur(0) brightness(1.06); }
  100% { transform: translateY(0) scale(1);    filter: blur(0) brightness(1); }
}

@keyframes blink {
  0%, 5%    { transform: translateY(0%) scaleY(1); }
  6%        { transform: translateY(-14%) scaleY(0.10); }
  7%, 35%   { transform: translateY(0%) scaleY(1); }
  36%       { transform: translateY(-14%) scaleY(0.10); }
  37%, 100% { transform: translateY(0%) scaleY(1); }
}

/*@keyframes flicker {
  0%,93% { opacity: 1; }
  94% { opacity: 0.6; }
  96% { opacity: 1; }
  98% { opacity: 0.7; }
  100% { opacity: 1; }
}*/

@media (prefers-reduced-motion: reduce) {
  .logo .layer {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}