.slide.active {
  transition: opacity 320ms var(--ease-premium), transform 320ms var(--ease-premium);
}

.slide.exiting {
  transition: opacity 320ms var(--ease-premium), transform 320ms var(--ease-premium);
  opacity: 0;
}

.slide.enter-same {
  animation: same-palette-in 320ms var(--ease-premium) both;
}

.slide.exit-same {
  animation: same-palette-out 320ms var(--ease-premium) both;
}

.slide.enter-cross {
  animation: cross-palette-in 320ms var(--ease-premium) both;
}

.slide.exit-cross {
  animation: cross-palette-out 320ms var(--ease-premium) both;
}

@keyframes same-palette-in {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes same-palette-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-40px);
  }
}

@keyframes cross-palette-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cross-palette-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.slide-inner {
  opacity: 0;
  transform: translateY(12px);
}

.slide.active .slide-inner {
  animation: slide-inner-in 300ms ease-out both;
}

@keyframes slide-inner-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.headline .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 350ms ease-out, transform 350ms ease-out;
  will-change: opacity, transform;
}

.headline.number-headline .word.kw-word {
  display: block;
}

.headline .word.visible {
  opacity: 1;
  transform: translateY(0);
}

.headline .kw {
  color: var(--accent);
}

.reveal-after-headline {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 300ms ease, transform 300ms ease;
}

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

@keyframes ken-burns {
  from { transform: scale(1.0) translate(0, 0); }
  to { transform: scale(1.04) translate(-1%, -1%); }
}

.slide[data-slide="1"].active .slide-bg,
.slide[data-slide="31"].active .slide-bg {
  animation: ken-burns 30s ease-out forwards;
}

.lane-path,
.lane-green,
.pipeline-line,
.pipeline-ring,
.tower-flash {
  stroke-dasharray: var(--path-length, 1000);
  stroke-dashoffset: var(--path-length, 1000);
}

.slide.diagram-armed .lane-path,
.slide.diagram-armed .lane-green {
  animation: draw-path 900ms ease-out forwards;
}

.slide.diagram-armed .lane-path.short-33 {
  animation-duration: 540ms;
}

.slide.diagram-armed .lane-path.short-50 {
  animation-duration: 660ms;
}

.slide.diagram-armed .lane-green {
  animation-delay: 160ms;
}

@keyframes draw-path {
  to { stroke-dashoffset: 0; }
}

.pipeline-node {
  opacity: 0.22;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 220ms ease, fill 220ms ease, filter 220ms ease, transform 220ms ease;
}

.pipeline-node.lit {
  opacity: 1;
  fill: #F2F5F3;
  filter: drop-shadow(0 0 10px rgba(242, 245, 243, 0.35));
  transform: scale(1.04);
}

.pipeline-ring {
  opacity: 0;
}

.pipeline-line.drawn {
  animation: draw-path 900ms ease-out forwards;
}

.pipeline-ring.drawn {
  opacity: 1;
  animation: draw-path 520ms ease-out forwards;
}

.tower-column:hover .green-tower {
  filter: drop-shadow(0 0 12px rgba(var(--brand-green-rgb), 0.4));
}

.missing-floor.flash {
  animation: missing-flash 420ms ease-out;
}

@keyframes missing-flash {
  0% { stroke: transparent; }
  45% { stroke: var(--accent); }
  100% { stroke: transparent; }
}

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