/* ==========================================================================
   Enhanced states

   Every rule here is gated on a `data-enhanced` / `data-*` attribute that
   only JavaScript sets. With scripting off none of it applies and the
   no-JS behaviour in sections.css stands, so this file can never leave the
   page in a broken or invisible state.
   ========================================================================== */

:root {
  /* Where an anchor target should come to rest, below the sticky bar. */
  --scroll-offset: 104px;
}

/* --------------------------------------------------------------------------
   Sticky header
   -------------------------------------------------------------------------- */

.site-header[data-enhanced] {
  position: fixed;
  transition: transform var(--duration-slow) var(--ease-out);
  will-change: transform;
}

/* Past the hero the translucent pill no longer has a dark band behind it. */
.site-header[data-enhanced][data-stuck] .site-header__bar {
  background-color: rgb(0 53 19 / 0.92);
  box-shadow: var(--shadow-lg);
}

/* Give the bar back to the reader as soon as they scroll up. */
.site-header[data-enhanced][data-hidden] {
  transform: translateY(calc(-100% - var(--header-inset)));
}

.site-nav__link[aria-current="true"] {
  color: var(--gm-lime-500);
}

/* Collapsed menu, now driven by the disclosure button rather than a
   checkbox. Mirrors the :checked rules in sections.css. */
@media (max-width: 1200px) {
  .site-header[data-enhanced] .site-nav {
    display: none;
  }

  .site-header__bar[data-menu-open] .site-nav {
    display: block;
  }

  .site-header__bar[data-menu-open] {
    background-color: var(--gm-green-900);
    border-radius: var(--radius-lg);
  }
}

/* --------------------------------------------------------------------------
   Carousel
   Static: prev is drawn faded and next filled. Enhanced: both are live and
   fade only when there is nothing further to scroll to.
   -------------------------------------------------------------------------- */

.workers[data-enhanced] .workers__arrow {
  color: var(--gm-green-700);
}

.workers[data-enhanced] .workers__arrow:disabled {
  color: rgb(2 64 60 / 0.2);
  cursor: not-allowed;
}

.workers[data-enhanced] .workers__arrow:not(:disabled):hover {
  color: var(--gm-green-900);
}

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */

[data-reveal="out"] {
  opacity: 0;
  transform: translateY(18px);
}

[data-reveal="in"] {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

/* Stagger items that arrive as a row. */
.steps__item[data-reveal="in"]:nth-child(2),
.testimonial[data-reveal="in"]:nth-child(2),
.feature-chip[data-reveal="in"]:nth-child(2) {
  transition-delay: 80ms;
}

.steps__item[data-reveal="in"]:nth-child(3),
.feature-chip[data-reveal="in"]:nth-child(3) {
  transition-delay: 160ms;
}

.feature-chip[data-reveal="in"]:nth-child(4) {
  transition-delay: 240ms;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .site-header[data-enhanced] {
    transition: none;
  }
}