.logo {
  position: relative;
}

.logo-echo {
  position: absolute;
  inset: 0;
  background: url("fenexus-logo.svg") center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
}

.logo-echo--cyan {
  filter: drop-shadow(-3px 0 #2ee6e6);
}

.logo-echo--pink {
  filter: drop-shadow(3px 0 #ff2e8b) hue-rotate(125deg);
}

.screen-interference {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(transparent 44%, #2ee6e612 44.2%, #ff2e8b0a 46%, transparent 46.2%),
    repeating-linear-gradient(0deg, #0005 0 1px, transparent 1px 4px);
}

/* Only animate during short, irregular bursts. */
@media (prefers-reduced-motion: no-preference) {
  .logo-glitch .logo > img {
    animation: logo-jitter 420ms steps(1, end);
  }

  .logo-glitch .logo-echo--cyan {
    animation: cyan-tear 420ms steps(1, end);
  }

  .logo-glitch .logo-echo--pink {
    animation: pink-tear 420ms steps(1, end);
  }

  .screen-glitch .logo {
    animation: screen-slip 300ms steps(1, end);
  }

  .screen-glitch .screen-interference {
    animation: screen-noise 300ms steps(1, end);
  }
}

@keyframes logo-jitter {
  0%, 100% { transform: none; }
  18% { transform: translateX(-2px) skewX(-0.4deg); }
  36% { transform: translateX(2px); }
  55% { transform: none; }
  72% { transform: skewX(0.5deg); }
  85% { transform: none; }
}

@keyframes cyan-tear {
  0%, 100% { opacity: 0; }
  12% { opacity: 0.85; clip-path: inset(22% 0 66%); transform: translateX(-9px); }
  30% { clip-path: inset(57% 0 36%); transform: translateX(7px); }
  48% { opacity: 0; }
  66% { opacity: 0.7; clip-path: inset(73% 0 19%); transform: translateX(-5px); }
  84% { opacity: 0; }
}

@keyframes pink-tear {
  0%, 100% { opacity: 0; }
  18% { opacity: 0.7; clip-path: inset(46% 0 48%); transform: translateX(8px); }
  36% { clip-path: inset(78% 0 16%); transform: translateX(-7px); }
  52% { opacity: 0; }
  70% { opacity: 0.6; clip-path: inset(30% 0 65%); transform: translateX(6px); }
  88% { opacity: 0; }
}

@keyframes screen-slip {
  0%, 100% { transform: none; }
  20% { transform: translateY(2px); }
  42% { transform: translateY(-1px) skewX(0.15deg); }
  64% { transform: none; }
}

@keyframes screen-noise {
  0%, 100% { opacity: 0; }
  10% { opacity: 0.65; background-position: 0 0; }
  35% { opacity: 0.4; background-position: 0 17vh; }
  60% { opacity: 0.55; background-position: 0 -11vh; }
  82% { opacity: 0; }
}