/* bust:1789155522 motion timing aligned to band ease */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.42s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-group(silo-spray-mark) {
  animation-duration: 0.5s;
}

.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 2px;
  pointer-events: none;
}

.progress i {
  display: block;
  height: 100%;
  width: 0;
  transform-origin: 0 50%;
  background: var(--gulf);
}

@supports (animation-timeline: scroll()) {
  .progress i {
    width: 100%;
    transform: scaleX(0);
    animation: silo-progress linear both;
    animation-timeline: scroll();
  }

  @keyframes silo-progress {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }
}

.room .kicker,
.room .display,
.room h2,
.room .lede {
  animation: silo-rise 0.65s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

@keyframes silo-rise {
  from {
    opacity: 0.28;
    translate: 0 0.5rem;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@supports (animation-timeline: view()) {
  .room .kicker,
  .room h2,
  .claim,
  .house-list li,
  .work-col {
    animation: silo-rise both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}