/* MEDUSA button family. One source of truth for every button, built on the faceted hexagon of the
   "back to top" button (css/medusa-hexnav.css uses these same --hx-* variables).
   js/buttons.js adds the classes and the decorative, aria-hidden layers to the site's existing buttons;
   links, labels and listeners are left untouched.
   Variants: .hx-icon (faceted hexagon, 64/48/40, dir-l/r/u/d) for carousel arrows only; .hx-btn--primary and
   .hx-btn--secondary (frosted glass pills); .hx-round (round glass icon buttons); .hx-link (focus ring only).
   States: hover, :focus-visible, pressed, disabled, loading (.is-loading / aria-busy). */
:root {
  --hx-glow: #00e5ff;
  --hx-violet: #8f5cff;
  --hx-ink: #eafdff;
  --hx-ink-dark: #04161e;
  --hx-obsidian: #0b1120;
  --hx-obsidian-2: #151d30;
  --hx-edge: linear-gradient(135deg, #00e5ff, #8f5cff);
  --hx-crystal: linear-gradient(115deg, transparent 0 31%, #ffffff1f 31% 32%, transparent 32% 68%, #00000014 68% 69%, transparent 69%),
                linear-gradient(180deg, #c9fcff 0%, #6eefff 46%, #14c9e6 46.5%, #0a97b8 100%);
  --hx-ease: cubic-bezier(.65, 0, .25, 1);
  --hx-spring: cubic-bezier(.34, 1.56, .64, 1);
  --hx-dur: .35s;
  --hx-stagger: 45ms;
  --hx-burst: .6s;
  --hx-burst-reach: 7px;
  --hx-clip: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
  --hx-clip-in: polygon(13.4px 0, calc(100% - 13.4px) 0, 100% 50%, calc(100% - 13.4px) 100%, 13.4px 100%, 0 50%);
  --hx-hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  --hx-focus: 2px solid var(--hx-glow);
}
@keyframes hx-burst { 0% { transform: translate(0, 0); } 35% { transform: translate(var(--tx), var(--ty)); } 100% { transform: translate(0, 0); } }
@keyframes hx-loading { 0%, 100% { opacity: .15; } 30% { opacity: .95; } }
@keyframes hx-flash { from { opacity: .9; } to { opacity: 0; } }

/* ---------- 1. Icon button: the faceted hexagon ---------- */
.hx-icon.hx-icon {
  --hx-size: 48px;
  display: inline-grid; place-items: center; flex: none;
  width: var(--hx-size) !important; height: calc(var(--hx-size) * 68 / 60) !important; min-width: 0 !important; min-height: 0 !important;
  padding: 0 !important; margin: 0; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  color: var(--hx-ink) !important; cursor: pointer; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 6px 14px #00000080); transition: transform var(--hx-dur) var(--hx-ease);
}
.hx-icon--64.hx-icon { --hx-size: 64px; }
.hx-icon--40.hx-icon { --hx-size: 40px; }
.hx-icon--40.hx-icon::after { content: ''; position: absolute; inset: -2px; } /* 44px tap target */
/* Buttons keep their own positioning (absolute, fixed...); otherwise they become the facets' containing block. */
:where(.hx-icon) { position: relative; }
.hx-icon.hx-icon > svg.hx-icon__facets { position: absolute; inset: 0; width: 100% !important; height: 100% !important; overflow: visible; pointer-events: none; }
.hx-icon.hx-icon > svg.hx-icon__chev { width: 42% !important; height: 42% !important; }
.hx-icon .hx-w { transform-box: view-box; }
.hx-icon .hx-base { stroke: var(--hx-glow); stroke-opacity: .3; stroke-width: .7; }
.hx-icon .hx-lit { opacity: 0; transition: opacity .25s ease calc(var(--i) * var(--hx-stagger)); }
.hx-icon > :not(.hx-icon__facets) { position: relative; z-index: 1; }
.hx-icon:hover .hx-lit, .hx-icon.is-hover .hx-lit, .hx-icon:focus-visible .hx-lit, .hx-icon[aria-expanded="true"] .hx-lit { opacity: .9; }
.hx-icon:hover .hx-base, .hx-icon.is-hover .hx-base { stroke-opacity: .9; }
.hx-icon:hover > :not(.hx-icon__facets), .hx-icon.is-hover > :not(.hx-icon__facets) { color: var(--hx-ink-dark); }
.hx-icon:focus-visible, .hx-icon.is-focus { outline: var(--hx-focus) !important; outline-offset: 5px; }
.hx-icon:active, .hx-icon.is-active { transform: scale(.94); }
.hx-icon.is-burst .hx-w { animation: hx-burst var(--hx-burst) var(--hx-spring); animation-delay: calc(var(--i) * 40ms); }
/* Direction: the icon's own glyph is replaced by the shared chevron. */
.hx-icon[class*="dir-"] > :not(.hx-icon__facets):not(.hx-icon__chev) { display: none !important; }
.hx-icon__chev { width: 42%; height: 42%; transition: transform var(--hx-dur) var(--hx-ease); filter: drop-shadow(0 1px 2px #000b); }
.hx-icon__chev path { fill: currentColor; }
.dir-r .hx-icon__chev { transform: rotate(0deg); }
.dir-l .hx-icon__chev { transform: rotate(180deg); }
.dir-u .hx-icon__chev { transform: rotate(-90deg); }
.dir-d .hx-icon__chev { transform: rotate(90deg); }
.dir-r:hover .hx-icon__chev { transform: translateX(2px); }
.dir-l:hover .hx-icon__chev { transform: rotate(180deg) translateX(2px); }
/* Social icons and other glyphs sit a little smaller inside the hexagon. */
.hx-icon > svg:not(.hx-icon__facets):not(.hx-icon__chev), .hx-icon > i { width: 42%; height: auto; font-size: calc(var(--hx-size) * .38); }

/* ---------- 2 + 3. Text buttons: frosted glass pills ---------- */
.hx-btn.hx-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 48px; padding: 13px 30px !important; border: 0 !important; border-radius: 999px !important;
  background: linear-gradient(145deg, #2a3459a6, #0c122280) !important;
  -webkit-backdrop-filter: blur(16px) saturate(130%) !important; backdrop-filter: blur(16px) saturate(130%) !important;
  box-shadow: inset 1px 1px 0 #ffffff1f, inset -1px -1px 0 #00000040, 0 14px 40px #03060e66 !important;
  color: #f4f6fb !important; font: 600 12px/1.2 var(--mono, "JetBrains Mono", ui-monospace, monospace); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .18s var(--hx-ease), box-shadow var(--hx-dur), color var(--hx-dur);
}
.hx-btn::before, .hx-btn::after { content: none !important; }
.hx-btn .hx-btn__shell { display: none; }
.hx-btn i, .hx-btn > span { background: none !important; box-shadow: none !important; border: 0 !important; }
.hx-btn i { width: auto !important; height: auto !important; }
.hx-btn svg { width: 16px; height: 16px; flex: none; transition: transform var(--hx-dur) var(--hx-ease); }
.hx-btn:hover, .hx-btn.is-hover, .hx-btn:focus-visible { color: var(--hx-glow) !important; background: linear-gradient(145deg, #34407099, #121a3399) !important; }
.hx-btn:hover svg, .hx-btn.is-hover svg { transform: translate(2px, -2px); }
.hx-btn:active, .hx-btn.is-active { transform: scale(.97); }
.hx-btn:focus-visible, .hx-btn.is-focus { outline: var(--hx-focus) !important; outline-offset: 4px; }
/* The main action of a block: a size larger, with a soft cyan glow. */
.hx-btn--primary.hx-btn {
  min-height: 56px; padding: 16px 40px !important; font-size: 13px;
  background: linear-gradient(145deg, #2f3c66b3, #0e1630a6) !important;
  box-shadow: inset 1px 1px 0 #ffffff26, inset -1px -1px 0 #00000040, 0 0 0 1px #7ff3ff1f, 0 0 32px #00e5ff26, 0 16px 44px #03060e80 !important;
}
.hx-btn--primary.hx-btn:hover, .hx-btn--primary.hx-btn:focus-visible { box-shadow: inset 1px 1px 0 #ffffff33, inset -1px -1px 0 #00000040, 0 0 0 1px #7ff3ff40, 0 0 44px #00e5ff40, 0 18px 50px #03060e99 !important; }
.hx-btn--small.hx-btn { min-height: 38px; padding: 9px 20px !important; font-size: 10px; }
.hx-btn:is(.is-loading, [aria-busy="true"]) { animation: hx-pulse 1.4s ease-in-out infinite; }
@keyframes hx-pulse { 50% { opacity: .65; } }

/* ---------- small icon buttons (social, newsletter, pagination): round frosted glass ---------- */
.hx-round.hx-round {
  display: inline-grid; place-items: center; width: 44px !important; height: 44px !important; min-width: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 50% !important; color: #e8ecf6 !important;
  background: linear-gradient(145deg, #2a3459a6, #0c122280) !important;
  -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important;
  box-shadow: inset 1px 1px 0 #ffffff1f, 0 8px 24px #03060e55 !important; transition: color var(--hx-dur), transform .18s var(--hx-ease);
}
.hx-round:hover, .hx-round:focus-visible, .hx-round.active { color: var(--hx-glow) !important; }
.hx-round:active { transform: scale(.94); }
.hx-round:focus-visible { outline: var(--hx-focus) !important; outline-offset: 3px; }

/* ---------- 4. Text links and tabs: no underline decoration, only the shared focus ring ---------- */
.hx-link:focus-visible { outline: var(--hx-focus); outline-offset: 6px; }

/* ---------- states shared by every variant ---------- */
:is(.hx-icon, .hx-btn, .hx-link):is([disabled], [aria-disabled="true"], .is-disabled) { opacity: .4; pointer-events: none; filter: grayscale(.4); }
:is(.hx-icon, .hx-btn, .hx-round):is([disabled], [aria-disabled="true"], .is-disabled) { opacity: .4; pointer-events: none; }
:is(.hx-icon, .hx-btn):is([disabled], [aria-disabled="true"], .is-disabled) * { animation: none !important; transition: none !important; }
.hx-icon:is(.is-loading, [aria-busy="true"]) .hx-lit { animation: hx-loading 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * 120ms); transition: none; }

@media (prefers-reduced-motion: reduce) {
  .hx-icon, .hx-icon *, .hx-btn, .hx-btn *, .hx-round { transition: none !important; animation: none !important; }
  .hx-icon.is-burst .hx-w { animation: none !important; }
  .hx-icon:is(.is-loading, [aria-busy="true"]) .hx-lit { opacity: .6; }
}