/* Schaf & Grimm · Liquid glass for the sticky header CTA only.
   Load after buttons.css. The normal solid, outline and soft buttons stay intact.
   Neutral transparent surface, amethyst rim, one shine per pointer hover. */
@property --sg-glass-shine-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: -45deg;
}
@property --sg-glass-shine-alpha {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@keyframes sg-amethyst-edge-shine {
  0% { --sg-glass-shine-angle: -45deg; --sg-glass-shine-alpha: 0; }
  15% { --sg-glass-shine-alpha: 1; }
  76% { --sg-glass-shine-alpha: 1; }
  100% { --sg-glass-shine-angle: 315deg; --sg-glass-shine-alpha: 0; }
}
:root .header .button.nav-cta {
  --glass-x: 30%;
  --glass-y: 0%;
  --glass-rim-opacity: .82;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #c5adee47;
  background: linear-gradient(165deg,#ffffff04,#ffffff00 52%,#ffffff02);
  color: #f4f4f7;
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  backdrop-filter: blur(8px) saturate(1.1);
  box-shadow: inset 0 1px 1px #e2d5f63d, inset 0 -1px 1px #7953a624,
    0 1px 2px #08091112, 0 4px 12px #0809111f;
  text-shadow: 0 1px 3px #15171c66;
  transition: box-shadow .24s, border-color .24s, translate .24s cubic-bezier(.2,.7,.2,1);
}
/* The faint moving reflection is neutral white, never a purple fill. */
:root .header .button.nav-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(90px 50px at var(--glass-x) var(--glass-y), #ffffff20, transparent 72%);
  opacity: .18;
  transform: none;
  transition: opacity .25s;
}
/* Both the static amethyst edge and moving highlight stay inside the rim.
   Animate the gradient angle, never rotate the pill's masked outline. */
:root .header .button.nav-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    conic-gradient(from var(--sg-glass-shine-angle),
      transparent 0deg 230deg,
      rgb(121 83 166 / calc(var(--sg-glass-shine-alpha) * .65)) 262deg,
      rgb(197 173 238 / var(--sg-glass-shine-alpha)) 290deg,
      rgb(244 238 252 / var(--sg-glass-shine-alpha)) 309deg,
      rgb(197 173 238 / var(--sg-glass-shine-alpha)) 324deg,
      transparent 349deg 360deg),
    linear-gradient(132deg,#e2d5f6e6 0%,#c5adeed9 18%,#7953a6b8 40%,#c5adee47 53%,#7953a6b3 65%,#c5adeed9 83%,#e2d5f6e6 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: var(--glass-rim-opacity);
  transition: opacity .24s;
}
:root .header .button.nav-cta .button-label { position: relative; z-index: 1; }
@media (hover:hover) and (pointer:fine) {
  :root .header .button.nav-cta:hover {
    --glass-rim-opacity: 1;
    border-color: #c5adee99;
    translate: 0 -1px;
    box-shadow: inset 0 1px 1px #e2d5f673, inset 0 -1px 1px #c5adee47,
      0 0 12px #7953a626, 0 2px 3px #08091112, 0 6px 16px #08091126;
  }
  :root .header .button.nav-cta:hover::before { opacity: .4; }
  :root .header .button.nav-cta:not(:disabled):not([aria-disabled="true"]):hover::after {
    animation: sg-amethyst-edge-shine 1.25s cubic-bezier(.25,.5,.25,1) 1 both;
  }
}
:root .header .button.nav-cta:active {
  translate: 0 1px;
  box-shadow: inset 0 1px 3px #15171c22,inset 0 -1px 1px #ffffff26;
}

:root .header .button.nav-cta:focus-visible {
  outline: 3px solid #e2d5f6;
  outline-offset: 4px;
}
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  :root .header .button.nav-cta { background: #252732; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root .header .button.nav-cta {
    background: #252732;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  :root .header .button.nav-cta::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  :root .header .button.nav-cta,
  :root .header .button.nav-cta::before,
  :root .header .button.nav-cta::after {
    transition: none !important;
    translate: none !important;
    animation: none !important;
  }
  :root .header .button.nav-cta::before { display: none; }
}
:root.motion-paused .header .button.nav-cta { translate: none !important; }
:root.motion-paused .header .button.nav-cta::before { display: none; }
:root.motion-paused .header .button.nav-cta::after { animation: none !important; }
@media (forced-colors: active) {
  :root .header .button.nav-cta { border-color: ButtonText; box-shadow: none; text-shadow: none; }
  :root .header .button.nav-cta::before,
  :root .header .button.nav-cta::after { display: none; }
}