/* Version 2: only the two selected effects. Original layout is in style.css. */
.hero__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hero__counter {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

/* The final text reserves exactly its original width, even while counting. */
.hero__counter-reserve { visibility: hidden; }
.hero__counter-value { position: absolute; inset: 0; white-space: nowrap; }

.hero__button { isolation: isolate; overflow: hidden; }
.hero__actions .hero__button { position: relative; }
.hero__button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(200 170 125 / 16%);
  opacity: 0;
  pointer-events: none;
}
.hero__button--primary::before { background: rgb(255 227 181 / 15%); }

.hero__nav a { position: relative; }
.hero__nav a::after {
  content: "";
  position: absolute;
  bottom: calc(-7 * var(--u));
  inset-inline: 0;
  height: 1px;
  background: var(--warm);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* Visual hover previews also apply to currently disabled actions. */
@media (hover: hover) and (pointer: fine) {
  .hero__button { transition: border-color 220ms ease, color 220ms ease; }
  .hero__button::before { transition: opacity 220ms ease; }
  .hero__button .hero__arrow { transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1); }
  .hero__button:hover::before,
  .hero__button:focus-visible::before { opacity: 1; }
  .hero__button--secondary:hover,
  .hero__button--header:hover { border-color: #c7ab87; }
  .hero__button--primary:hover .hero__arrow,
  .hero__button--primary:focus-visible .hero__arrow { transform: translateX(calc(4 * var(--u))); }

  .hero__nav a { transition: color 200ms ease; }
  .hero__nav a::after { transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease; }
  .hero__nav a:hover,
  .hero__nav a:focus-visible { color: var(--text); }
  .hero__nav a:hover::after,
  .hero__nav a:focus-visible::after { opacity: 1; transform: scaleX(1); }

  .hero__menu span { transition: transform 220ms ease, background-color 220ms ease; }
  .hero__menu:hover span { background-color: #c7ab87; }
  .hero__menu:hover span:nth-child(2) { transform: scaleX(0.7); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__button,
  .hero__button::before,
  .hero__button .hero__arrow,
  .hero__nav a,
  .hero__nav a::after,
  .hero__menu span { transition: none; }
  .hero__button--primary:hover .hero__arrow,
  .hero__button--primary:focus-visible .hero__arrow,
  .hero__menu:hover span:nth-child(2) { transform: none; }
}