/* =========================================================================
   Buttons
   .button--glass  the primary call to action (HAAVN BLACK Atrium style)
   .button--solid  form submit
   ========================================================================= */

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 3rem;
  padding: 0 var(--space-5);
  overflow: hidden;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;     /* the hero's is an <a>, not a <button> */
  color: var(--c-white);
  border: 1px solid var(--c-border);
  /* The same cut corner as the swatches, so the whole interface agrees on
     one shape. The clip takes the border away along that diagonal, so the
     edge is drawn in as a background layer instead — see tokens.css. */
  --notch-edge: var(--c-border);
  border-radius: var(--notch-corners);
  clip-path: var(--notch-clip);
  transition:
    border-color 0.45s,
    box-shadow 0.45s,
    transform 0.45s,
    opacity var(--dur-base);
}

.button:disabled {
  cursor: progress;
  opacity: 0.55;
}

.button__arrow {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--c-led);
  opacity: 0.85;
  transition: transform 0.45s, opacity 0.45s;
}

/* ---- Glass ---- */
.button--glass {
  width: 100%;
  justify-content: space-between;
  box-shadow: var(--glass-highlight), 0 24px 56px -30px var(--c-black);
  background: var(--notch-line), rgb(8 12 16 / 0.25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* the light that sweeps across on hover */
.button--glass::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 38%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.06), transparent);
  transition: left 0.85s cubic-bezier(0.2, 0.7, 0.3, 1);
  pointer-events: none;
}

/* Full width on phones, sized to its label once there is room */
@media (min-width: 40rem) {
  .button--glass {
    width: auto;
  }
}

/* ---- Small ----
   For sitting alongside form fields, where the full-height call to action
   overpowers a column of hairline underlines. */
.button--sm {
  min-height: 2.5rem;
  padding: 0 var(--space-4);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
}

.button--sm .button__arrow {
  font-size: 0.78rem;
}

/* ---- Solid ---- */
.button--solid {
  width: 100%;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-mono);
  --notch-edge: rgb(220 240 255 / 0.35);
  border-color: rgb(220 240 255 / 0.35);
  background: var(--notch-line), transparent;
}

/* Hover only where there's a real pointer, so taps don't stick */
@media (hover: hover) {
  .button:hover:not(:disabled) {
    --notch-edge: var(--c-border-hover);
    border-color: var(--c-border-hover);
  }

  .button--glass:hover {
    background: var(--notch-line), rgb(8 12 16 / 0.25);
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 1.5px rgb(255 255 255 / 0.16),
      0 28px 66px -28px var(--c-black);
  }

  .button--glass:hover::after {
    left: 115%;
  }

  .button--glass:hover .button__arrow {
    transform: translateX(5px);
    opacity: 1;
  }

  /* The arrow on a link that moves down the page moves down with it. */
  .button--down:hover .button__arrow {
    transform: translateY(4px);
  }

  .button--solid:hover:not(:disabled) {
    box-shadow: 0 0 30px -10px rgb(180 210 255 / 0.35);
  }
}

/* =========================================================================
   The glint

   A soft band of light crosses a button as it arrives on screen, so a
   reader who has scrolled past the label still catches the movement. It
   travels the way the page is travelling: down the button on the way down
   the page, up it on the way back.

   It rides ::before because ::after is already carrying the hover sweep,
   and the two are free to overlap. The notch clips both.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  .button::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(
      180deg,
      transparent,
      rgb(255 255 255 / 0.025) 30%,
      rgb(255 255 255 / 0.07) 50%,
      rgb(255 255 255 / 0.025) 70%,
      transparent);
    opacity: 0;
    pointer-events: none;
  }

  /* Linear, unlike everything else here. An eased sweep whips across and
     then crawls, which reads as a wipe; a reflection travels evenly. The
     fade at each end does the softening instead. */
  .button.is-glinting-down::before {
    animation: glint-down 0.72s linear;
  }

  .button.is-glinting-up::before {
    animation: glint-up 0.72s linear;
  }
}

/* Off the top, across, and off the bottom. The band is the height of the
   button, so it is never wholly inside it and the light never sits still. */
@keyframes glint-down {
  0%   { opacity: 0; transform: translateY(-115%); }
  22%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(115%); }
}

@keyframes glint-up {
  0%   { opacity: 0; transform: translateY(115%); }
  22%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-115%); }
}