/* Motion and light: progressive enhancement, with a complete still experience. */
.soundwave-form[data-ambient] { animation: none; }
.soundwave-canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.soundwave.has-live-wave .soundwave-form { opacity: 0; }
.hero > .soundwave { top: 220px; bottom: -100px; }
.hero > .soundwave::before { background: radial-gradient(ellipse 66% 52% at 50% 56%, rgba(89, 122, 105, .105), rgba(64, 85, 74, .04) 44%, rgba(40, 53, 46, .012) 70%, transparent); }
.hero > .soundwave .soundwave-canvas { translate: 0 var(--wave-scroll-y, 0px); }
.closing-section > .soundwave { opacity: .8; mask-image: linear-gradient(180deg, transparent, #000 18%, #000 80%, transparent); }
.closing-section .cta { background: radial-gradient(ellipse 47% 72% at 50% 46%, rgba(11,12,14,.97), rgba(11,12,14,.65) 56%, transparent); }
/* No per-section grain layer here. `.page-intro` is a width-limited block, so
   a grain pane pinned to its box painted a visibly lighter rectangle behind
   the page heading. The page-wide `.bg-grain` in site.css covers this. */

/* A physical press, a moving catchlight, and light that follows the pointer. */
.btn-primary, .btn-gold {
  --button-light: 156, 243, 196;
  overflow: hidden;
  isolation: isolate;
  border-color: rgba(219,255,235,.45);
  background: linear-gradient(155deg, #c0f9d9 0%, #9cf3c4 48%, #83ddb0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(15,64,35,.15), 0 5px 18px -10px rgba(var(--button-light), .4);
  transition: transform .32s var(--ease), box-shadow .35s ease, border-color .25s ease, background .25s ease;
}
.btn-primary::before, .btn-gold::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 105px 60px at var(--pointer-x, 50%) var(--pointer-y, 0%), rgba(255,255,255,.5), transparent);
  opacity: 0; transition: opacity .3s ease;
}
.btn-primary::after, .btn-gold::after {
  content: ''; position: absolute; inset: -80% auto -80% -70%; z-index: -1; width: 36%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.46), transparent);
  transform: skewX(-22deg) translateX(0); transition: transform .75s var(--ease), opacity .3s; opacity: 0;
}
.btn-primary svg, .btn-gold svg { transition: transform .35s var(--ease); }
.btn-primary:focus-visible, .btn-gold:focus-visible {
  outline-offset: 5px; border-color: rgba(236,255,244,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 10px 34px -9px rgba(var(--button-light), .42);
}
.btn-primary:focus-visible::before, .btn-gold:focus-visible::before { opacity: 1; }
.btn-gold {
  --button-light: 232, 193, 92;
  color: #30240b;
  border-color: #f6d98b;
  background: linear-gradient(135deg, #f9e4a2, #edc86b 48%, #dfb44d);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 25px -10px rgba(var(--gold-rgb), .5);
}
.btn-gold:focus-visible { outline-color: var(--gold-a); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover, .btn-gold:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 12px 34px -9px rgba(var(--button-light), .42);
    border-color: rgba(245,255,249,.85);
  }
  .btn-primary:hover { background: linear-gradient(155deg, #cefbe2, #a7f4cd 48%, #90e8ba); }
  .btn-gold:hover { background: linear-gradient(135deg, #ffeebb, #f7d57d 48%, #edc566); border-color: #ffe9ab; }
  .btn-primary:hover::before, .btn-gold:hover::before { opacity: 1; }
  .btn-primary:hover::after, .btn-gold:hover::after { opacity: 1; transform: skewX(-22deg) translateX(560%); }
  .btn-primary:hover svg, .btn-gold:hover svg { transform: translateY(-1px); }
  .btn-primary:active, .btn-gold:active { transform: translateY(0) scale(.985); transition-duration: .1s; }
}

@media (max-width: 768px) {
  .hero > .soundwave { top: 320px; bottom: -60px; opacity: .72; }
  .hero > .soundwave .soundwave-canvas { translate: none; }
}
@media (prefers-reduced-motion: reduce) {
  .soundwave-canvas, .btn-primary, .btn-gold, .btn-primary svg, .btn-gold svg,
  .btn-glyph, .btn-outline.nav-cta { transform: none !important; translate: none !important; transition: none !important; }
  .btn-primary::after, .btn-gold::after { display: none; }
}

/* ---------------------------------------------------------------------------
   Download buttons: the Windows mark, and a deeper primary surface
   ------------------------------------------------------------------------ */

/* The mark. Sized per button scale, painted with the label's own colour, and
   it rides the same 1px hover lift the filled buttons already give their svg. */
.btn-glyph {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin-inline-end: 1px;      /* a hair of air on top of the .btn gap */
  fill: currentColor;
  transition: transform .35s var(--ease);
}
.btn-lg .btn-glyph { width: 18px; height: 18px; }
.btn-sm .btn-glyph { width: 14px; height: 14px; }
.btn-label { letter-spacing: -.01em; }

/* A deeper, denser mint: a crisp 1px highlight along the top edge, a faint
   shade along the bottom, and a bloom kept tight so it reads as light coming
   off the pill rather than a smeared drop shadow. */
.btn-primary {
  border-color: rgba(211,252,229,.5);
  background: linear-gradient(168deg, #bdf8d8 0%, #97efc0 46%, #78d4a6 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(9,48,29,.24),
    0 1px 2px rgba(6,26,17,.35),
    0 4px 12px -6px rgba(var(--mint-rgb), .42);
}
.btn-primary .meta { color: rgba(11,18,16,.55); }
.btn-primary:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -1px 0 rgba(9,48,29,.22),
    0 4px 14px -6px rgba(var(--mint-rgb), .5);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    transform: translateY(-2px);
    border-color: rgba(233,255,243,.72);
    background: linear-gradient(168deg, #d0ffe6 0%, #a8f5cd 46%, #88e2b5 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.85),
      inset 0 -1px 0 rgba(9,48,29,.2),
      0 2px 4px rgba(6,26,17,.32),
      0 8px 18px -8px rgba(var(--mint-rgb), .5);
  }
  .btn:hover .btn-glyph { transform: translateY(-1px); }
  .btn-primary:active {
    transform: translateY(0) scale(.985);
    background: linear-gradient(168deg, #a8eec8 0%, #8ae3b2 46%, #6ec79a 100%);
    box-shadow:
      inset 0 2px 4px rgba(9,48,29,.3),
      inset 0 -1px 0 rgba(255,255,255,.18),
      0 1px 2px rgba(6,26,17,.3);
    transition-duration: .1s;
  }
  /* The nav pill stays an outline; hover just fills it faintly. */
  .btn-outline.nav-cta:hover {
    transform: translateY(-1px);
    background: rgba(var(--mint-rgb), .13);
    border-color: rgba(var(--mint-rgb), .58);
    box-shadow: 0 4px 12px -8px rgba(var(--mint-rgb), .45);
  }
}