@view-transition {
  navigation: none;
}

@keyframes s4a-page-out {
  to {
    opacity: 0;
    transform: translateY(-5px) scale(.998);
    filter: blur(1.5px);
  }
}

@keyframes s4a-page-in {
  from {
    opacity: 0;
    transform: translateY(7px) scale(.998);
    filter: blur(1.5px);
  }
}

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

main {
  view-transition-name: s4a-main;
}

::view-transition-old(s4a-main) {
  animation: 180ms cubic-bezier(.4,0,1,1) both s4a-page-out;
}

::view-transition-new(s4a-main) {
  animation: 280ms 35ms cubic-bezier(.2,.72,.2,1) both s4a-page-in;
}

::view-transition-old(s4a-header),
::view-transition-new(s4a-header) {
  animation-duration: 220ms;
  animation-timing-function: ease;
}


@media (min-width: 861px) {
  .site-header {
    height: 118px;
    transition: background-color .28s ease, box-shadow .28s ease, backdrop-filter .28s ease;
  }

  .site-header .navrow {
    position: relative;
    transition:
      width .18s ease-out,
      height .18s ease-out,
      margin-top .18s ease-out,
      padding .18s ease-out,
      border-radius .18s ease-out,
      background-color .28s ease,
      border-color .28s ease,
      box-shadow .28s ease;
  }

  .site-header .brand .brand-full {
    transition:
      height .18s ease-out,
      padding .18s ease-out,
      border-radius .18s ease-out,
      box-shadow .28s ease;
  }

  .site-header.is-scrolled {
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    pointer-events: none;
  }

  .site-header.is-scrolled .navrow {
    width: min(1080px, calc(100vw - 34px));
    height: 76px !important;
    margin-top: 10px;
    padding: 0 16px;
    border: 1px solid rgba(188,209,239,.17);
    border-radius: 20px;
    background: rgba(7,12,22,.82);
    box-shadow: 0 16px 42px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.055);
    backdrop-filter: blur(20px) saturate(150%);
    pointer-events: auto;
  }

  .site-header.is-scrolled .brand .brand-full {
    height: 50px !important;
    padding: 7px 10px !important;
    border-radius: 11px !important;
    box-shadow: 0 7px 20px rgba(0,0,0,.16);
  }

  .desktop-nav {
    position: relative;
  }

  .desktop-nav > a:not(.nav-cta) {
    position: relative;
    z-index: 2;
    transition: color .18s ease;
  }

  .desktop-nav .s4a-nav-indicator {
    position: absolute;
    left: 0;
    bottom: -9px;
    width: 24px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(142,162,255,.42), #a7b9ff, rgba(142,162,255,.42));
    box-shadow: 0 0 15px rgba(142,162,255,.42);
    opacity: 0;
    transform: translateX(0);
    transform-origin: left center;
    transition:
      transform .28s cubic-bezier(.2,.72,.2,1),
      width .28s cubic-bezier(.2,.72,.2,1),
      opacity .16s ease;
    pointer-events: none;
    z-index: 1;
  }
}


@media (hover: hover) and (pointer: fine) {
  .s4a-card-fx {
    position: relative;
    isolation: isolate;
    transform: translateZ(0);
    transition:
      transform .22s cubic-bezier(.2,.72,.2,1),
      border-color .22s ease,
      box-shadow .22s ease;
  }

  .s4a-card-fx:hover {
    transform: translateY(-3px);
    border-color: rgba(188,209,239,.31) !important;
    box-shadow: 0 22px 48px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.075) !important;
  }

}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header .navrow,
  .site-header .brand .brand-full,
  .desktop-nav .s4a-nav-indicator,
  .s4a-card-fx {
    transition: none !important;
  }

  .s4a-card-fx:hover {
    transform: none !important;
  }

  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}