/* ALXPCK v7.2 — interaction layer.
   Every interactive element resolves to the current page's signature colour
   through three variables published on the page root. Behaviour is written
   once here; the six pages differ only by the variable values.

   Set on the page root per route:
     --accent       the band colour (fills)
     --accent-ink   text that sits ON the accent
     --accent-deep  accent text on white
*/

@keyframes glyphWink {
  0%, 100% { opacity: .4 }
  50%      { opacity: .9 }
}

.ax-cta-dark,
.ax-cta-ghost,
.ax-nav,
.ax-footer-link,
.ax-row,
.ax-pill,
.ax-card {
  transition: transform .15s ease, background-color .15s ease, color .15s ease,
              border-color .15s ease, box-shadow .15s ease;
}

/* Primary CTA: ink fill becomes accent fill */
.ax-cta-dark:hover  { transform: translateY(-2px); background: var(--accent); color: var(--accent-ink) }
.ax-cta-dark:active { transform: translateY(0) }

/* Ghost CTA: fills with accent, border and text follow */
.ax-cta-ghost:hover  { transform: translateY(-2px); background: var(--accent); color: var(--accent-ink); border-color: var(--accent) }
.ax-cta-ghost:active { transform: translateY(0) }

.ax-nav:hover         { color: var(--accent-deep) }
.ax-footer-link:hover { color: var(--accent) }