/* Chrome buttons.
   Solid buttons are bright blue-tinted chrome, the metal of the logo:
   the reflection bands drift slowly, slide under the cursor, and a glossy
   streak follows the pointer. Outline buttons keep their dark glass with a
   thin chrome rim streaked with brand blue. A small star
   rides the edge of every button, gliding to the point nearest the cursor.
   Shared by every page; buttons-holo.js drives the cursor and the star. */

/* registered so they animate and transition smoothly */
@property --holo-drift {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --holo-shift {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --holo-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -30%;
}

@property --rim-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  /* bright highlights against deep blue-steel shadows, like chrome
     reflecting a blue sky; every band keeps the dark label above 6:1 */
  --chrome-foil: linear-gradient(
    105deg,
    #ffffff 0%,
    #cfdcff 10%,
    #7c9cf0 20%,
    #f2f6ff 30%,
    #ffffff 36%,
    #8fb0ff 46%,
    #e3ebff 56%,
    #6f8ad6 66%,
    #d6e2ff 78%,
    #ffffff 88%,
    #cfdcff 100%
  );
  --chrome-rim: conic-gradient(
    from var(--rim-angle),
    #ffffff,
    #4b72ff 16%,
    #cfdcff 30%,
    #79a3ff 44%,
    #ffffff 56%,
    #2f56e8 72%,
    #a9c2ff 86%,
    #ffffff
  );
}

/* ---------- chrome foil: solid buttons ---------- */
.primary-action,
.community-action,
.client-send:not(:disabled) {
  position: relative;
  isolation: isolate;
  background: var(--chrome-foil);
  background-size: 260% 100%;
  background-position: calc(var(--holo-drift) + var(--holo-shift)) 50%;
  color: #06070a;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(30, 50, 110, 0.35),
    0 8px 30px rgba(75, 114, 255, 0.32);
  transition:
    transform 220ms var(--ease-out, ease),
    --holo-shift 900ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 300ms ease;
  animation: holo-drift 10s ease-in-out infinite alternate;
}

/* the white Discord mark turns dark so it reads on the silver */
.primary-action img,
.community-action img { filter: brightness(0); }

/* the glossy streak, drawn inside the button's own shape so the star on
   the edge is never clipped */
.primary-action::after,
.community-action::after,
.client-send:not(:disabled)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(
    100deg,
    transparent calc(var(--holo-x) - 16%),
    rgba(255, 255, 255, 0.95) var(--holo-x),
    transparent calc(var(--holo-x) + 16%)
  );
  opacity: 0;
  transition:
    --holo-x 600ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 300ms ease;
  pointer-events: none;
}

.primary-action:hover,
.community-action:hover,
.client-send:not(:disabled):hover,
.primary-action:focus-visible,
.community-action:focus-visible,
.client-send:not(:disabled):focus-visible {
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(30, 50, 110, 0.35),
    0 14px 48px rgba(75, 114, 255, 0.55),
    0 4px 18px rgba(207, 220, 255, 0.35);
}

.primary-action:hover::after,
.community-action:hover::after,
.client-send:not(:disabled):hover::after,
.primary-action:focus-visible::after,
.community-action:focus-visible::after,
.client-send:not(:disabled):focus-visible::after {
  opacity: 1;
}

/* keyboard focus gets a full sweep since there is no cursor to follow */
.primary-action:focus-visible::after,
.community-action:focus-visible::after,
.client-send:not(:disabled):focus-visible::after {
  animation: holo-sweep 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes holo-drift {
  to { --holo-drift: 34%; }
}

@keyframes holo-sweep {
  from { --holo-x: -20%; }
  to { --holo-x: 120%; }
}

/* ---------- chrome rim: outline / glass buttons ---------- */
.secondary-action,
.discord-pill,
.service-cta,
.motion-toggle {
  position: relative;
  isolation: isolate;
}

.secondary-action::before,
.discord-pill::before,
.service-cta::before,
.motion-toggle::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  padding: 1px;
  border-radius: inherit;
  background: var(--chrome-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0.55;
  transition: opacity 300ms ease;
  pointer-events: none;
}

.secondary-action:hover::before,
.discord-pill:hover::before,
.service-cta:hover::before,
.motion-toggle:hover::before,
.secondary-action:focus-visible::before,
.discord-pill:focus-visible::before,
.service-cta:focus-visible::before,
.motion-toggle:focus-visible::before {
  opacity: 1;
  animation: rim-turn 4s linear infinite;
}

.secondary-action:hover,
.discord-pill:hover,
.service-cta:hover {
  border-color: transparent;
  box-shadow: 0 8px 32px rgba(75, 114, 255, 0.34), 0 2px 12px rgba(207, 220, 255, 0.16);
}

/* Join Discord is the header's main action, so it gets solid
   electric-blue glass rather than the plain dark glass */
.discord-pill {
  border-color: rgba(160, 190, 255, 0.5);
  background:
    radial-gradient(120px 60px at var(--btn-x, 50%) var(--btn-y, 50%), rgba(255, 255, 255, 0.24), transparent 70%),
    linear-gradient(135deg, #5a80ff 0%, #3a5ff0 50%, #2445cc 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(10, 25, 90, 0.35),
    0 6px 24px rgba(75, 114, 255, 0.38);
}
.discord-pill:hover,
.discord-pill:focus-visible {
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(10, 25, 90, 0.35),
    0 10px 36px rgba(75, 114, 255, 0.62);
}

@keyframes rim-turn {
  to { --rim-angle: 360deg; }
}

/* ---------- the star on the edge ---------- */
/* a sharp four-point sparkle with a soft halo and a thin lens flare;
   buttons-holo.js moves, spins and twinkles it */
.holo-star {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0, rgba(160, 190, 255, 0.3) 20%, rgba(75, 114, 255, 0.12) 38%, transparent 60%);
  transform: translate(var(--star-x, 0px), var(--star-y, 0px)) scale(var(--star-scale, 0.8));
  opacity: var(--star-alpha, 0);
  pointer-events: none;
  mix-blend-mode: screen;
}

/* the sparkle itself: long thin rays, pinched in the middle */
.holo-star::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, #fff 0 30%, #d6e3ff 58%, #79a3ff);
  clip-path: polygon(50% 0%, 55.5% 44.5%, 100% 50%, 55.5% 55.5%, 50% 100%, 44.5% 55.5%, 0% 50%, 44.5% 44.5%);
  transform: rotate(var(--star-spin, 0deg));
}

/* a faint horizontal flare, like light catching a lens */
.holo-star::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 1px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(150, 185, 255, 0.95) 50%, transparent);
  transform: translate(-50%, -50%) scaleX(var(--flare, 0.6));
}

/* the small sparkle that trails behind it */
.holo-star.is-trail {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0, rgba(121, 163, 255, 0.3) 24%, transparent 55%);
}
.holo-star.is-trail::after { display: none; }

/* ---------- motion off ---------- */
/* the chrome stays; only the movement stops */
html[data-motion="off"] .primary-action,
html[data-motion="off"] .community-action,
html[data-motion="off"] .client-send,
html[data-motion="off"] .primary-action::after,
html[data-motion="off"] .community-action::after,
html[data-motion="off"] .client-send::after,
html[data-motion="off"] .secondary-action::before,
html[data-motion="off"] .discord-pill::before,
html[data-motion="off"] .service-cta::before,
html[data-motion="off"] .motion-toggle::before {
  animation: none;
}
html[data-motion="off"] .holo-star { display: none; }

@media (prefers-reduced-motion: reduce) {
  .primary-action,
  .community-action,
  .client-send,
  .primary-action::after,
  .community-action::after,
  .client-send::after,
  .secondary-action::before,
  .discord-pill::before,
  .service-cta::before,
  .motion-toggle::before {
    animation: none;
    transition: none;
  }
  .holo-star { display: none; }
}