@view-transition {
  navigation: auto;
}

.site-header {
  view-transition-name: site-header;
}

.site-footer {
  view-transition-name: site-footer;
}

::view-transition-old(site-header),
::view-transition-new(site-header),
::view-transition-old(site-footer),
::view-transition-new(site-footer) {
  animation: none;
}

::view-transition-old(root) {
  animation: page-out 240ms cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
  animation: page-in 420ms cubic-bezier(0, 0, 0.2, 1) both;
}

@keyframes page-out {
  to {
    opacity: 0;
    translate: 0 -20px;
  }
}

@keyframes page-in {
  from {
    opacity: 0;
    translate: 0 28px;
  }
}

.loader {
  display: none;
}

.sl-boot .loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-content: center;
  justify-items: center;
  background: var(--bg);
  transition: opacity 460ms var(--ease) 140ms;
}

.sl-boot.sl-ready .loader {
  opacity: 0;
  pointer-events: none;
}

.sl-done .loader {
  display: none;
}

.loader__inner {
  display: grid;
  justify-items: center;
  gap: 24px;
  transition:
    opacity 300ms var(--ease),
    translate 460ms var(--ease-out);
}

.sl-ready .loader__inner {
  opacity: 0;
  translate: 0 -14px;
}

.sl-loaded .loader__inner {
  display: none;
}

.sl-loaded .loader {
  transition-delay: 0ms;
  transition-duration: 200ms;
}

.loader__word {
  position: relative;
  color: var(--ink);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 1;
  opacity: 0;
  translate: 0 10px;
  transition:
    opacity 460ms var(--ease-out),
    translate 620ms var(--ease-out);
}

.fonts-ready .loader__word {
  opacity: 1;
  translate: 0 0;
}

.loader__word::after {
  content: '';
  position: absolute;
  left: calc(100% + 6px);
  bottom: 0.28em;
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  corner-shape: round;
  background: var(--accent);
  scale: 0.2;
  opacity: 0;
  transition:
    scale 520ms var(--ease-spring) 160ms,
    opacity 300ms var(--ease) 160ms;
}

.fonts-ready .loader__word::after {
  scale: 1;
  opacity: 1;
}

.loader__track {
  width: 132px;
  height: 3px;
  border-radius: var(--r-pill);
  corner-shape: round;
  background: var(--surface-muted);
  overflow: hidden;
}

.loader__fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transform-origin: left center;
  scale: 0.04 1;
  transition: scale 2000ms cubic-bezier(0.12, 0.86, 0.24, 1);
}

.sl-arm .loader__fill {
  scale: 0.72 1;
}

.fonts-ready .loader__fill {
  scale: 1 1;
  transition-duration: 340ms;
  transition-timing-function: var(--ease-out);
}

.sl-boot .site-header,
.sl-boot .site-footer {
  opacity: 0;
  translate: 0 -14px;
  transition:
    opacity 700ms var(--ease-out),
    translate 700ms var(--ease-out);
}

.sl-boot .site-header {
  transition-delay: 90ms;
}

.sl-boot.sl-ready .site-header,
.sl-boot.sl-ready .site-footer {
  opacity: 1;
  translate: 0 0;
}

.js-reveal main > section {
  opacity: 0;
  translate: 0 26px;
  scale: 0.992;
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    translate var(--dur-reveal) var(--ease-out),
    scale var(--dur-reveal) var(--ease-out);
}

.js-reveal main > section.is-revealed {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

.js-reveal main > section > * {
  opacity: 0;
  translate: 0 16px;
  transition:
    opacity 640ms var(--ease-out),
    translate 640ms var(--ease-out);
  transition-delay: calc(var(--fi, 0) * var(--step));
}

.js-reveal main > section.is-revealed > * {
  opacity: 1;
  translate: 0 0;
}

.js-reveal .line__inner {
  translate: 0 110%;
  transition: translate 900ms var(--ease-out);
  transition-delay: calc(var(--fi, 0) * var(--step));
}

.js-reveal .is-revealed .line__inner {
  translate: 0 0;
}

.js-reveal .line:nth-child(2) .line__inner {
  transition-delay: calc(var(--fi, 0) * var(--step) + 90ms);
}

.js-reveal .hero__title .line:nth-child(1) .line__inner {
  transition-delay: 130ms;
}

.js-reveal .hero__title .line:nth-child(2) .line__inner {
  transition-delay: 220ms;
}

.js-reveal .hero > * {
  opacity: 1;
  translate: 0 0;
  transition: none;
}

.js-reveal .hero__badge,
.js-reveal .hero__description,
.js-reveal .hero__side .btn,
.js-reveal .orbit__card {
  opacity: 0;
  translate: 0 20px;
  transition:
    opacity 760ms var(--ease-out),
    translate 760ms var(--ease-out);
}

.js-reveal .orbit {
  opacity: 0;
  scale: 0.985;
  transition:
    opacity 820ms var(--ease-out) 260ms,
    scale 820ms var(--ease-out) 260ms;
}

.js-reveal .hero.is-revealed .hero__badge,
.js-reveal .hero.is-revealed .hero__description,
.js-reveal .hero.is-revealed .hero__side .btn,
.js-reveal .hero.is-revealed .orbit__card {
  opacity: 1;
  translate: 0 0;
}

.js-reveal .hero.is-revealed .orbit {
  opacity: 1;
  scale: 1;
}

.js-reveal .hero__badge {
  transition-delay: 40ms;
}

.js-reveal .hero__description {
  transition-delay: 260ms;
}

.js-reveal .hero__side .btn {
  transition-delay: 340ms;
}

.js-reveal .orbit__card {
  transition-delay: 380ms;
}

.js-reveal .orbit__chip {
  opacity: 0;
  scale: 0.86;
  transition-property: opacity, scale, translate;
  transition-duration: 420ms, 620ms, 620ms;
  transition-timing-function: var(--ease-out), var(--ease-spring), var(--ease-out);
}

.js-reveal .hero.is-revealed .orbit__chip {
  opacity: 1;
  scale: 1;
}

.js-reveal .orbit__chip--a { transition-delay: 500ms, 500ms, 0ms; }
.js-reveal .orbit__chip--b { transition-delay: 570ms, 570ms, 0ms; }
.js-reveal .orbit__chip--c { transition-delay: 640ms, 640ms, 0ms; }
.js-reveal .orbit__chip--d { transition-delay: 710ms, 710ms, 0ms; }

.js-reveal
  :is(.trust__list, .popular, .app-list, .steps, .report__list, .bento, .featured__meta)
  > * {
  opacity: 0;
  translate: 0 14px;
  transition:
    opacity 560ms var(--ease-out),
    translate 560ms var(--ease-out);
}

.js-reveal
  .is-revealed
  :is(.trust__list, .popular, .app-list, .steps, .report__list, .bento, .featured__meta)
  > * {
  opacity: 1;
  translate: 0 0;
}

.js-reveal .is-revealed :is(.trust__list, .popular, .app-list, .steps, .report__list, .bento, .featured__meta) > *:nth-child(1) { transition-delay: 140ms; }
.js-reveal .is-revealed :is(.trust__list, .popular, .app-list, .steps, .report__list, .bento, .featured__meta) > *:nth-child(2) { transition-delay: 200ms; }
.js-reveal .is-revealed :is(.trust__list, .popular, .app-list, .steps, .report__list, .bento, .featured__meta) > *:nth-child(3) { transition-delay: 260ms; }
.js-reveal .is-revealed :is(.trust__list, .popular, .app-list, .steps, .report__list, .bento, .featured__meta) > *:nth-child(4) { transition-delay: 320ms; }
.js-reveal .is-revealed :is(.trust__list, .popular, .app-list, .steps, .report__list, .bento, .featured__meta) > *:nth-child(5) { transition-delay: 380ms; }

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-gradient));
  transform-origin: left center;
  scale: 0 1;
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: progress-fill linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes progress-fill {
  from {
    scale: 0 1;
  }
  to {
    scale: 1 1;
  }
}

.stagger-in {
  animation: stagger-in 520ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 34ms);
}

@keyframes stagger-in {
  from {
    opacity: 0;
    translate: 0 14px;
    scale: 0.97;
  }
}

.browse__count,
.browse__fallback-label {
  transition: opacity 220ms var(--ease);
}

.browse__notice {
  animation: notice-in 380ms var(--ease-out) both;
}

@keyframes notice-in {
  from {
    opacity: 0;
    translate: 0 10px;
    scale: 0.99;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }

  .loader__inner,
  .loader__word,
  .loader__word::after {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  .sl-ready .loader__inner {
    opacity: 0;
  }

  .sl-boot .site-header,
  .sl-boot .site-footer {
    opacity: 1;
    animation: none;
  }

  .js-reveal main > section,
  .js-reveal main > section > *,
  .js-reveal .line__inner {
    opacity: 1;
    translate: 0;
    scale: 1;
  }

  .stagger-in,
  .browse__notice,
  .orbit__chip .chip-app {
    animation: none;
  }

  .scroll-progress {
    display: none;
  }
}