/* a11y.css — the things the source never needed because it never shipped.
   Loaded last on every page so it wins on equal specificity. */

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100000;
  padding: 0.75rem 1.25rem;
  background: var(--base-500);
  color: var(--base-100);
  font-family: "Geist Mono", monospace;
  font-size: 0.8rem;
  text-transform: uppercase;
  transform: translateY(-150%);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

:focus-visible {
  outline: 3px solid var(--base-500);
  outline-offset: 3px;
}

/* The overlay is clipped shut rather than hidden, so its five links stay in the
   tab order while it is closed unless they are taken out of the tree. */
.menu-overlay[aria-hidden="true"] {
  visibility: hidden;
}

.menu-overlay:not([aria-hidden="true"]) {
  visibility: visible;
}

/* The volume control and the menu toggle are divs acting as buttons in the
   source; they are keyboard-reachable here, so they need a pointer and the
   page's own type. */
.nav-toggle,
.showreel .volume-icon {
  font-family: inherit;
  cursor: pointer;
}

/* The pinned desktop team section is a duplicate of the mobile list, so it is
   hidden from assistive tech; that also means its images must not be announced
   twice. */
.team-desktop[aria-hidden="true"] {
  /* still painted — aria-hidden only removes it from the accessibility tree */
  visibility: visible;
}

/* Headings that hold a link keep their own colour rather than the UA blue. */
.stories .link a,
.featured-work-item-link,
.folders a {
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .page-transition-overlay,
  .preloader,
  .preloader-header {
    display: none !important;
  }

  .button:hover .button-icon,
  .button:not(:hover) .button-icon {
    animation: none !important;
  }

  /* Nothing pins, so the sections that relied on a pin collapse to their own
     height and simply show what they hold. */
  .showreel .showreel-container {
    transform: none;
  }

  .client-reviews .review-card {
    height: auto;
    padding-block: 4rem;
  }

  .sticky.team-desktop {
    display: none;
  }

  .team-mobile {
    display: block;
    padding: 2rem 1.25rem;
  }

  .team-mobile .card {
    position: static;
    width: 100%;
    max-width: 680px;
    height: auto;
    margin: 0 auto 1.25rem;
    transform: none !important;
    opacity: 1 !important;
  }

  .team-mobile .card-content {
    height: auto;
    gap: 2rem;
  }

  .spotlight .marquees {
    height: auto;
    padding-block: 4rem;
  }

  .spotlight .marquee-container {
    width: 100%;
  }

  .spotlight .marquee,
  .spotlight #marquee-1 .marquee,
  .spotlight #marquee-3 .marquee {
    position: static;
    transform: none;
  }

  footer .explosion-container {
    display: none;
  }
}