.reveal {
  opacity: 0;
  transform: translateY(28px);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .85s cubic-bezier(.22, 1, .36, 1), transform .85s cubic-bezier(.22, 1, .36, 1);
}

.hero-video {
  animation: heroZoom 18s ease-in-out infinite alternate;
}

.hero-grid {
  animation: gridDrift 26s linear infinite;
}

.hero-line {
  transform-origin: left;
  animation: bronzeLine 1.2s cubic-bezier(.22, 1, .36, 1) .3s both;
}

.hero-bronze {
  animation: bronzeMotion 9s ease-in-out infinite alternate;
}

.project-layer span:nth-child(1),
.project-layer span:nth-child(2) {
  animation: panelFloat 7s ease-in-out infinite alternate;
}

.route-lines {
  animation: routeMove 18s linear infinite;
}

.hero-route-lines span {
  animation: routePulse 4.8s ease-in-out infinite alternate;
}

.hero-route-lines span:nth-child(2),
.hero-route-lines span:nth-child(4) {
  animation-delay: .8s;
}

.hero-brand-plate {
  animation: brandPlateIn 1.1s cubic-bezier(.22, 1, .36, 1) .4s both;
}

.timeline-step.is-active {
  border-color: rgba(176, 122, 42, .8);
  box-shadow: 0 26px 90px rgba(176, 122, 42, .18);
}

@keyframes heroZoom {
  from { transform: scale(1.04); }
  to { transform: scale(1.12); }
}

@keyframes gridDrift {
  from { background-position: 0 0; }
  to { background-position: 136px 68px; }
}

@keyframes bronzeLine {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

@keyframes bronzeMotion {
  from { opacity: .48; transform: translateX(-2%); }
  to { opacity: .86; transform: translateX(2%); }
}

@keyframes panelFloat {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(18px, -18px, 0); }
}

@keyframes routeMove {
  from { background-position: 0 0; }
  to { background-position: 320px 240px; }
}

@keyframes routePulse {
  from { opacity: .28; transform: translate3d(-12px, 0, 0) scaleX(.72); }
  to { opacity: .9; transform: translate3d(12px, 0, 0) scaleX(1); }
}

@keyframes brandPlateIn {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: translateY(0); }
}

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

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