.scan-text {
  display: inline-block;
  font-weight: 400;
}
.scan-text.play {
  animation: scanline 0.8s linear forwards;
}
@keyframes scanline {
  0% {
    opacity: 0.1;
    filter: contrast(150%) saturate(120%) blur(0.4px);
  }
  20% {
    opacity: 0.6;
  }
  40% {
    opacity: 0.2;
  }
  60% {
    opacity: 0.9;
  }
  80% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    filter: none;
  }
}
.glitch {
  display: inline-block;
  color: #fff;
  font-weight: 300;
}
.glitch.play {
  animation: glitch-resolve 0.95s steps(1, end) forwards;
}
@keyframes glitch-resolve {
  0%,
  80% {
    text-shadow: -2px 0 #ff004d, 2px 0 #00ffff;
  }
  100% {
    text-shadow: none;
  }
}
.dot {
  opacity: 0;
  font-weight: 400;
}
.dot.show {
  opacity: 1;
  transition: opacity 150ms linear;
}
.typewriter {
  font-weight: 300;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  max-width: 0;
  border-right: 2px solid var(--accent-electric);
}
.typewriter.play {
  animation: type var(--type-duration, 1.4s) steps(var(--chars), end) forwards,
    caret 1s steps(1, end) infinite;
}
@keyframes type {
  to {
    max-width: calc(var(--chars) * 1ch);
  }
}
@keyframes caret {
  0% {
    border-right-color: transparent;
  }
  50% {
    border-right-color: var(--accent-electric);
  }
  100% {
    border-right-color: transparent;
  }
}
.network.draw .link {
  animation: dash 1.2s ease forwards;
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
.security-visual.play .beam {
  animation: beam-sweep 0.6s ease forwards;
}
@keyframes beam-sweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.glitch-loop {
  animation: micro-glitch 1.2s ease-in-out infinite;
}
@keyframes micro-glitch {
  0% {
    text-shadow: none;
    opacity: 0.9;
  }
  25% {
    text-shadow: -1px 0 #ff004d, 1px 0 #00ffff;
    opacity: 0.95;
  }
  50% {
    text-shadow: none;
    opacity: 1;
  }
  75% {
    text-shadow: -1px 0 #ff004d, 1px 0 #00ffff;
    opacity: 0.95;
  }
  100% {
    text-shadow: none;
    opacity: 0.9;
  }
}
@media (prefers-reduced-motion: reduce) {
  .glitch-loop,
  .scan-text.play,
  .glitch.play,
  .typewriter.play,
  .security-visual.play .beam {
    animation: none;
  }
  .typewriter {
    max-width: 100%;
  }
}

.slide-out-left {
  animation: slideOutLeft 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.slide-in-right {
  animation: slideInRight 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes slideOutLeft {
  to {
    transform: translateX(-48px);
  }
}
@keyframes slideInRight {
  from {
    transform: translateX(48px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .slide-out-left,
  .slide-in-right {
    animation: none;
  }
}