.line {
  display: block;
}

.float {
  animation: bob var(--t, 7s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes bob {
  0%,
  100% {
    transform: translateY(0) rotate(var(--r, 0deg));
  }
  50% {
    transform: translateY(-16px) rotate(calc(var(--r, 0deg) + 2deg));
  }
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  animation: drift 18s ease-in-out infinite;
  pointer-events: none;
}
@keyframes drift {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(60px, -40px) scale(1.15);
  }
  66% {
    transform: translate(-50px, 50px) scale(0.92);
  }
}

.scanline {
  animation: scan 2.4s ease-in-out infinite;
}
@keyframes scan {
  0%,
  100% {
    top: 14%;
  }
  50% {
    top: 84%;
  }
}

.swap {
  display: inline-block;
  position: relative;
}
.swap span {
  display: inline-block;
  transition:
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.4s;
}
.swap span.out {
  transform: translateY(-60%);
  opacity: 0;
}
.swap span.pre {
  transform: translateY(60%);
  opacity: 0;
}

.pulse {
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(95, 209, 204, 0.5);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(95, 209, 204, 0);
  }
}

.dome {
  animation:
    rise 2.2s 0.2s cubic-bezier(0.16, 0.8, 0.2, 1) both,
    breathe 9s 2.4s ease-in-out infinite alternate;
}
@keyframes rise {
  from {
    translate: -50% 75vh;
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  to {
    translate: -50% 0;
    opacity: 1;
  }
}
@keyframes breathe {
  from {
    scale: 1;
  }
  to {
    scale: 1.025;
  }
}

.nav-inner {
  animation: navin 0.9s 0.05s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes navin {
  from {
    opacity: 0;
    translate: 0 -18px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.floating-note {
  animation: pop 0.9s cubic-bezier(0.2, 1.2, 0.3, 1) both;
}
.floating-note-1 {
  animation-delay: 1.3s;
}
.floating-note-2 {
  animation-delay: 1.45s;
}
@keyframes pop {
  from {
    opacity: 0;
    scale: 0.3;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dome,
  .nav-inner,
  .floating-note {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
  .float,
  .blob,
  .scanline,
  .pulse {
    animation: none;
  }
}