:root {
  --motion-fast: 180ms;
  --motion-medium: 360ms;
  --motion-reveal: 620ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Header: make the fixed navigation quieter once the visitor starts reading. */
.site-header,
.site-header__brand img,
.site-nav a {
  transition:
    min-height var(--motion-medium) var(--motion-ease),
    height var(--motion-medium) var(--motion-ease),
    padding var(--motion-medium) var(--motion-ease),
    gap var(--motion-medium) var(--motion-ease),
    box-shadow var(--motion-medium) ease,
    background-color var(--motion-medium) ease,
    color var(--motion-fast) ease,
    text-shadow var(--motion-fast) ease,
    transform var(--motion-fast) var(--motion-ease);
}

.site-header.is-compact {
  min-height: 64px;
  padding-block: 0.45rem;
  box-shadow: 0 7px 24px rgba(64, 0, 119, 0.34), 0 0 20px rgba(204, 54, 255, 0.13);
}

.site-header.is-compact .site-header__brand img {
  height: 34px;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="location"] {
  color: #fff;
  text-shadow: 0 0 12px rgba(255, 209, 233, 0.72), 0 1px 10px rgba(45, 0, 75, 0.42);
}

.site-nav a:hover,
.site-nav a:focus-visible {
  transform: translateY(-1px);
}

.site-nav a[aria-current="location"]::after {
  right: 0;
}

.site-nav a:focus-visible {
  outline: 2px solid var(--accent-pale);
  outline-offset: 5px;
  border-radius: 2px;
}

/* CTA: preserve the hero's resting offset while adding lift and press feedback. */
.button {
  --button-rest-y: 0px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform: translateY(var(--button-rest-y));
  transition:
    transform var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-medium) ease,
    filter var(--motion-fast) ease,
    background-position var(--motion-medium) var(--motion-ease);
}

.button::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -60%;
  bottom: -60%;
  left: -45%;
  width: 32%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent);
  transform: skewX(-18deg) translateX(-220%);
  transition: transform 520ms var(--motion-ease);
  pointer-events: none;
}

.button--steam {
  background-size: 170% 170%;
  background-position: 15% 50%;
}

.hero__content > .button--steam {
  --button-rest-y: -0.3rem;
  transform: translateY(var(--button-rest-y));
}

.button:hover,
.button:focus-visible {
  transform: translateY(calc(var(--button-rest-y) - 3px)) scale(1.012);
  filter: saturate(1.1) brightness(1.06);
  background-position: 82% 50%;
  box-shadow: 0 18px 46px rgba(255, 38, 126, 0.36), 0 0 38px rgba(188, 82, 241, 0.28);
}

.button:hover::after,
.button:focus-visible::after {
  transform: skewX(-18deg) translateX(520%);
}

.button:focus-visible {
  outline: 3px solid var(--accent-pale);
  outline-offset: 4px;
}

.button:active {
  transform: translateY(calc(var(--button-rest-y) + 1px)) scale(0.992);
  filter: saturate(1.04) brightness(0.98);
  box-shadow: 0 8px 22px rgba(255, 38, 126, 0.24), 0 0 18px rgba(155, 93, 229, 0.16);
  transition-duration: 80ms;
}

/* Reveal only when JavaScript is active; without it every section remains readable. */
@media (prefers-reduced-motion: no-preference) {
  html.is-enhanced [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity var(--motion-reveal) ease,
      transform var(--motion-reveal) var(--motion-ease);
    transition-delay: var(--reveal-delay, 0ms);
  }

  html.is-enhanced [data-reveal="left"] {
    transform: translate3d(-32px, 0, 0);
  }

  html.is-enhanced [data-reveal="right"] {
    transform: translate3d(32px, 0, 0);
  }

  html.is-enhanced [data-reveal].is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 900px) {
  .site-header.is-compact {
    min-height: 80px;
    padding-block: 0.35rem;
    gap: 0.12rem 1rem;
  }

  .site-header.is-compact .site-header__brand img {
    height: 29px;
  }
}

@media (max-width: 620px) {
  .site-header.is-compact {
    height: 68px;
    min-height: 68px;
    padding-block: 0.25rem;
    gap: 0.05rem 0.75rem;
  }

  .site-header.is-compact .site-header__brand img {
    height: 22px;
  }

  .hero__content > .button--steam {
    --button-rest-y: 0px;
  }

}

@media (max-width: 620px) and (prefers-reduced-motion: no-preference) {
  html.is-enhanced [data-reveal="left"],
  html.is-enhanced [data-reveal="right"] {
    transform: translate3d(0, 20px, 0);
  }

  html.is-enhanced [data-reveal="left"].is-revealed,
  html.is-enhanced [data-reveal="right"].is-revealed {
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .site-header,
  .site-header__brand img,
  .site-nav a,
  .site-nav a::after,
  .button,
  .button::after,
  [data-reveal] {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .button:hover,
  .button:focus-visible,
  .button:active {
    transform: translateY(var(--button-rest-y));
  }

  .button::after {
    display: none;
  }
}