/*
 * The SLSBMB logo's "glitch in the Matrix" on every page of the public site; logo-glitch.js runs
 * it (packages/ui/src/styles/logo-glitch.css is the same effect in the product app). At rest the
 * logo is plain. For a 0.72-second burst (.hot) the word turns into falling-code glyphs that
 * re-form left to right, cyan and mint slices tear across it, and the mark flickers and turns 60°,
 * which leaves the six-armed mark as it was. Markup: a `.sls-logo` holding an `.sls-logo-mark` and
 * an `.sls-logo-word` with two `.sls-logo-ghost` slices and one `.sls-logo-code` layer.
 */
.sls-logo .sls-logo-word {
  position: relative;
}
.sls-logo .sls-logo-ghost,
.sls-logo .sls-logo-code {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.sls-logo .sls-logo-ghost {
  mix-blend-mode: screen;
  opacity: 0;
}
.sls-logo .sls-logo-ghost::before {
  content: "SLSBMB";
}
.sls-logo .sls-logo-cyan {
  color: #6fd9ff;
}
.sls-logo .sls-logo-mint {
  color: #a8e0c2;
}
.sls-logo .sls-logo-code {
  display: none;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  color: #7fe7a8;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(127, 231, 168, 0.85), -1px 0 rgba(111, 217, 255, 0.7), 1px 0
    rgba(255, 92, 140, 0.45);
}
.sls-logo .sls-logo-mark {
  transform-origin: 50% 50%;
}

.sls-logo.hot .sls-logo-word {
  color: transparent !important;
}
.sls-logo.hot .sls-logo-code {
  display: block;
  animation: slsLogoJitter 0.72s steps(1) 1;
}
.sls-logo.hot .sls-logo-cyan {
  animation: slsSliceCyan 0.36s linear 2;
}
.sls-logo.hot .sls-logo-mint {
  animation: slsSliceMint 0.36s linear 2;
}
.sls-logo.hot .sls-logo-mark {
  animation: slsMarkFlicker 0.72s steps(1) 1;
}

@keyframes slsSliceCyan {
  0%,
  100% {
    opacity: 0;
    transform: translate(0, 0);
    clip-path: inset(0 0 100% 0);
  }
  15% {
    opacity: 0.9;
    transform: translate(-3px, 0);
    clip-path: inset(6% 0 64% 0);
  }
  36% {
    opacity: 0.8;
    transform: translate(2px, 0);
    clip-path: inset(46% 0 30% 0);
  }
  57% {
    opacity: 0.85;
    transform: translate(-2px, 0);
    clip-path: inset(72% 0 8% 0);
  }
  79% {
    opacity: 0.7;
    transform: translate(2px, 0);
    clip-path: inset(22% 0 52% 0);
  }
}
@keyframes slsSliceMint {
  0%,
  100% {
    opacity: 0;
    transform: translate(0, 0);
    clip-path: inset(0 0 100% 0);
  }
  15% {
    opacity: 0.85;
    transform: translate(3px, 0);
    clip-path: inset(20% 0 54% 0);
  }
  36% {
    opacity: 0.75;
    transform: translate(-2px, 0);
    clip-path: inset(54% 0 22% 0);
  }
  57% {
    opacity: 0.8;
    transform: translate(2px, 0);
    clip-path: inset(4% 0 78% 0);
  }
  79% {
    opacity: 0.7;
    transform: translate(-2px, 0);
    clip-path: inset(62% 0 10% 0);
  }
}
@keyframes slsLogoJitter {
  0% {
    transform: translate(0, 0);
  }
  12% {
    transform: translate(-1px, 0);
  }
  30% {
    transform: translate(1px, 0);
    clip-path: inset(0 0 40% 0);
  }
  48% {
    transform: translate(0, 0);
    clip-path: none;
  }
  70% {
    transform: translate(1px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes slsMarkFlicker {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 0.35;
    transform: rotate(0deg);
  }
  22% {
    opacity: 1;
    transform: rotate(30deg);
  }
  40% {
    opacity: 0.5;
  }
  55% {
    opacity: 1;
    transform: rotate(60deg);
  }
  100% {
    opacity: 1;
    transform: rotate(60deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sls-logo.hot .sls-logo-code,
  .sls-logo.hot .sls-logo-ghost,
  .sls-logo.hot .sls-logo-mark {
    animation: none !important;
  }
}