:root {
  --motion-ease: cubic-bezier(.2, .8, .2, 1);
  --motion-soft: cubic-bezier(.22, 1, .36, 1);
}

.topbar {
  --scroll-progress: 0;
  transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.topbar::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #234f70, #4f91c1);
  transform: scaleX(var(--scroll-progress));
  transform-origin: left center;
  transition: transform .12s linear;
}

.topbar.is-scrolled {
  background: rgba(245, 245, 247, .96);
  border-color: rgba(0, 0, 0, .09);
  box-shadow: 0 10px 32px rgba(15, 23, 42, .08);
}

.reveal {
  opacity: 0;
  transform: translate3d(0, 52px, 0) scale(.97);
  transition: opacity .82s ease, transform .98s var(--motion-soft), box-shadow .32s var(--motion-ease), border-color .32s ease, background-color .32s ease;
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

.habro-motion-ready .reveal h1,
.habro-motion-ready .reveal h2 {
  opacity: 0;
  transform: translate3d(-42px, 0, 0);
  transition: opacity .72s ease, transform .92s var(--motion-soft);
  will-change: opacity, transform;
}

.habro-motion-ready .reveal.is-visible h1,
.habro-motion-ready .reveal.is-visible h2 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

.hero-media.reveal {
  transform: translate3d(0, 28px, 0) scale(.94);
  transition-duration: 1.15s;
}

.hero-media.reveal.is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

.hero-caption.reveal {
  transition-delay: .14s;
}

.hero-copy.reveal {
  transition-delay: .24s;
}

.hero-media img,
.story-media img,
.voice-photo img {
  transition: transform 1.25s var(--motion-soft);
}

.hero-media.reveal:not(.is-visible) img,
.story-media.reveal:not(.is-visible) img,
.voice-photo.reveal:not(.is-visible) img {
  transform: scale(1.075);
}

.hero-media.reveal.is-visible img,
.story-media.reveal.is-visible img,
.voice-photo.reveal.is-visible img {
  transform: scale(1);
}

.screen-card.reveal,
.voice-card.reveal,
.app-card.reveal,
.maint-panel.reveal,
.status-card.reveal {
  transform: translate3d(0, 58px, 0) scale(.94);
}

.screen-card.reveal.is-visible,
.voice-card.reveal.is-visible,
.app-card.reveal.is-visible,
.maint-panel.reveal.is-visible,
.status-card.reveal.is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

.screen-card:nth-child(2),
.voice-card:nth-child(2),
.app-card:nth-child(2),
.maint-panel:nth-child(2),
.status-card:nth-child(2) {
  transition-delay: .12s;
}

.screen-card:nth-child(3),
.voice-card:nth-child(3),
.app-card:nth-child(3),
.status-card:nth-child(3) {
  transition-delay: .24s;
}

.app-card:nth-child(4) {
  transition-delay: .12s;
}

.app-card:nth-child(5) {
  transition-delay: .24s;
}

.phone-product {
  transition: transform .95s var(--motion-soft), filter .45s ease !important;
}

.reveal:not(.is-visible) .phone-product {
  transform: scaleX(1.05) translate3d(0, 46px, 0) scale(.91);
}

.reveal.is-visible .phone-product {
  transform: scaleX(1.05) translate3d(0, 0, 0) scale(1);
}

.button-primary,
.button-secondary,
.smart-card,
.metric {
  transition-property: transform, box-shadow, border-color, background-color;
  transition-duration: .32s;
  transition-timing-function: var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) {
  .button-primary:hover,
  .button-secondary:hover {
    transform: translateY(-2px);
  }

  .reveal.is-visible.voice-card:hover,
  .reveal.is-visible.app-card:hover,
  .reveal.is-visible.status-card:hover,
  .smart-card:hover,
  .metric:hover {
    transform: translateY(-5px);
    border-color: rgba(35, 79, 112, .18);
    box-shadow: 0 20px 48px rgba(15, 23, 42, .09);
  }
}

@media (max-width: 780px) {
  .reveal {
    transform: translate3d(0, 44px, 0) scale(.96);
    transition-duration: .84s;
  }

  .screen-card.reveal,
  .maint-panel.reveal {
    transform: translate3d(58px, 0, 0) scale(.94);
  }

  .screen-card.reveal.is-visible,
  .maint-panel.reveal.is-visible {
    transform: translate3d(0, 0, 0) scale(1);
  }

  .screen-card:nth-child(2),
  .voice-card:nth-child(2),
  .app-card:nth-child(2),
  .maint-panel:nth-child(2),
  .status-card:nth-child(2) {
    transition-delay: .08s;
  }

  .screen-card:nth-child(3),
  .voice-card:nth-child(3),
  .app-card:nth-child(3),
  .status-card:nth-child(3) {
    transition-delay: .16s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar,
  .reveal,
  .reveal h1,
  .reveal h2,
  .phone-product,
  .hero-media img,
  .story-media img,
  .voice-photo img,
  .button-primary,
  .button-secondary,
  .voice-card,
  .app-card,
  .status-card,
  .smart-card,
  .metric {
    animation: none !important;
    transition: none !important;
  }

  .topbar::after {
    display: none;
  }

  .reveal,
  .reveal.is-visible,
  .reveal h1,
  .reveal h2,
  .reveal .phone-product,
  .hero-media img,
  .story-media img,
  .voice-photo img {
    opacity: 1 !important;
    transform: none !important;
  }

  .phone-product,
  .reveal .phone-product {
    transform: scaleX(1.05) !important;
  }
}