.page-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background: var(--color-blue);
  animation: page-exit 750ms var(--ease-premium) forwards;
}

.animated-grid {
  background-image:
    linear-gradient(rgba(47, 57, 133, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 57, 133, 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  animation: grid-drift 18s linear infinite;
}

.route-path {
  stroke-dasharray: 10 10;
  animation: route-flow 3.8s linear infinite;
}

.marquee-track {
  animation: marquee 26s linear infinite;
}

.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity var(--duration-slow) var(--ease-premium),
    transform var(--duration-slow) var(--ease-premium);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.horizontal-drift {
  transform: translateX(var(--drift-x, 0));
  transition: transform 120ms linear;
}

.stage-copy strong {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 550ms var(--ease-premium);
}

.quality-stage.is-visible .stage-copy strong,
.quality-stage.is-active .stage-copy strong {
  clip-path: inset(0 0 0 0);
}

@keyframes page-exit {
  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}

@keyframes grid-drift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 96px 48px;
  }
}

@keyframes route-flow {
  to {
    stroke-dashoffset: -120;
  }
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .page-loader,
  .animated-grid,
  .route-path,
  .marquee-track {
    animation: none !important;
  }

  .page-loader {
    opacity: 0;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .stage-copy strong {
    clip-path: none;
  }
}