/* --------------------------------------------------------------------------
   Motion and blur budgets for a phone
   --------------------------------------------------------------------------
   THE MOST EXPENSIVE THING IN THIS FILE IS THE FIRST RULE.

   `backdrop-filter: blur()` on a sticky header means the browser re-samples
   and re-blurs everything passing underneath it, every frame, for as long as
   the header is on screen. On a laptop that is invisible. On a phone it is the
   single largest cost on the page, and it is paid continuously while the
   visitor scrolls.

   The demo header keeps a blur at every scroll position:

       .d-head { position: sticky; backdrop-filter: blur(10px); }

   That is the right choice on a desktop, where the frosted strip over a moving
   page looks deliberate. On a phone it is a phone rendering a whole website
   inside a frame, and the blur is the first thing that should go.

   The replacement is an opaque background at the same colour, so the header
   still reads as a solid bar and the text on it is still legible. What is lost
   is the translucent effect, which nobody notices; what is gained is the frame
   budget.

   The Northbound template adds a second sticky bar under the header, so it
   gets the same treatment.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {

  .d-head,
  .app-subnav,
  .app-buy-sticky {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* opaque, because a translucent bar with nothing behind it to blur just
     shows the page through the text */
  .d-head {
    background: var(--d-bg) !important;
  }

  .app-subnav {
    background: var(--d-bg) !important;
  }
}

}

/* --------------------------------------------------------------------------
   A smaller shadow on the sticky header.
   A large soft shadow is re-rasterised along with the header on every frame.
   The tight one reads almost identically at this size.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .d-head.is-stuck {
    box-shadow: 0 1px 0 var(--d-line);
  }
}

/* --------------------------------------------------------------------------
   If the visitor has asked their system for less motion, the frames honour it
   too rather than only the page around them.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}