@keyframes pulse{
  0%,100%{transform:scale(.98);opacity:.72}
  50%{transform:scale(1.05);opacity:1}
}
@keyframes float{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-14px) rotate(1deg)}
}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(50%)}
}
@keyframes scan{
  0%{transform:translateY(-100%);opacity:0}
  20%,70%{opacity:.5}
  100%{transform:translateY(100%);opacity:0}
}
.hero__image{animation:float 5.5s ease-in-out infinite}
.hero__image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, transparent, rgba(57,245,200,.22), transparent);
  transform:translateY(-100%);
  animation:scan 4.6s ease-in-out infinite;
}
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .65s ease, transform .65s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
.glitch{
  position:relative;
}
.glitch::before,
.glitch::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
}
.glitch::before{transform:translate(2px,-1px);color:var(--primary)}
.glitch::after{transform:translate(-2px,1px);color:var(--violet)}
.glitch:hover::before,
.glitch:hover::after{opacity:.42}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.001ms!important;
  }
}