/* shimmer.css — the signature "lighthouse beam" affordance + gold sheen.
 *
 * A registered custom property lets us animate a real <angle>, driving a conic
 * gradient that orbits a single bright glint around an element's border while the
 * forest green never disappears. Built with the double background-clip trick: a
 * solid fill clipped to padding-box, the conic ring clipped to border-box.
 *
 * USE SPARINGLY. Allow-list: the featured pricing card, ONE primary CTA per band,
 * the dashboard's active pipeline step, and the magic-link "send" button. Never
 * more than one shimmering element in view at a time. */

@property --shimmer-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes shimmerRotate { to { --shimmer-angle: 360deg; } }

.shimmer {
  position: relative;
  border: 1.5px solid transparent;
  border-radius: var(--r-lg);
  /* Layer 1 (padding-box): the element's own surface. Override --shimmer-fill to
   * match the card/button background so only the border ring shows the glint. */
  background-image:
    linear-gradient(var(--shimmer-fill, var(--surface)), var(--shimmer-fill, var(--surface))),
    conic-gradient(from var(--shimmer-angle),
      var(--shimmer-base) 0deg,
      var(--shimmer-base) 72deg,
      var(--shimmer-glint) 96deg,
      var(--shimmer-peak) 110deg,
      var(--shimmer-glint) 124deg,
      var(--shimmer-base) 150deg,
      var(--shimmer-base) 360deg);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: var(--glow-shimmer);
  animation: shimmerRotate var(--shimmer-speed) linear infinite;
}

.shimmer--pill { border-radius: var(--r-pill); }
.shimmer--sm   { border-radius: var(--r-sm); }
/* stronger glow for a single hero focal element */
.shimmer--strong { box-shadow: 0 0 22px rgba(44, 130, 85, .30); }

/* Reduced motion: stop the rotation but KEEP the green ring (angle frozen at 0). */
@media (prefers-reduced-motion: reduce) {
  .shimmer { animation: none; }
}

/* ---- Gold sheen text ----
 * A slow gold gradient with a near-white glint sweeping through clipped glyphs.
 * MUST sit on a dark band (hero / CTA / footer) — gold-on-paper fails contrast.
 * Reserve for ONE word/short phrase per page. */
@keyframes goldSheen { to { background-position: 200% center; } }

.gold-sheen {
  background-image: linear-gradient(100deg,
    var(--gold-dark) 0%, var(--gold) 28%, var(--shimmer-peak) 50%, var(--gold) 72%, var(--gold-dark) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: goldSheen 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .gold-sheen { animation: none; background-position: 0 center; }
}

/* ---- Gold shimmer text for LIGHT surfaces ----
 * gold-dark anchors keep the glyphs legible on paper while a bright glint sweeps
 * through (same gradient proven on the light scrolled header's nav-hover). Use for
 * ONE short phrase per page on a light band (e.g. the checkout / thank-you H1). */
.gold-shimmer-text {
  /* Subtle sweep: a soft light-gold glint (not the near-white --shimmer-peak) over a
   * narrow band, moving slowly, so the shimmer reads as a gentle sheen not a flash. */
  background-image: linear-gradient(100deg,
    var(--gold-dark) 0%, var(--gold) 42%, #ead6a0 50%, var(--gold) 58%, var(--gold-dark) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: goldSheen 7.5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .gold-shimmer-text { animation: none; background-position: 0 center; }
}

/* ============================================================
 * Hover affordances (console parity, §2.7)
 * Buttons/CTAs reveal a GREEN shimmer ring on hover/focus; nav links reveal
 * GOLD shimmering text on hover/focus. Exposed only on hover/focus.
 * ============================================================ */

/* 1.5px transparent border at rest so the ring appears on hover with NO layout
 * shift. --shimmer-fill is the button's own surface so only the ring shows. */
.btn { border-width: 1.5px; }
.btn-primary   { --shimmer-fill: #e2c777; }   /* the hover gold */
.btn-secondary { --shimmer-fill: var(--surface); }
.btn-ghost     { --shimmer-fill: transparent; }
.hero .btn-secondary, .band-deep .btn-secondary, .on-dark .btn-secondary { --shimmer-fill: rgba(9, 35, 29, .6); }

.btn:hover, .btn:focus-visible {
  border-color: transparent;
  background-image:
    linear-gradient(var(--shimmer-fill), var(--shimmer-fill)),
    conic-gradient(from var(--shimmer-angle),
      var(--shimmer-base) 0deg, var(--shimmer-base) 72deg,
      var(--shimmer-glint) 96deg, var(--shimmer-peak) 110deg, var(--shimmer-glint) 124deg,
      var(--shimmer-base) 150deg, var(--shimmer-base) 360deg);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: var(--sh-2), var(--glow-shimmer);
  animation: shimmerRotate var(--shimmer-speed) linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:focus-visible { animation: none; }
}

/* Ghost buttons keep a TRANSPARENT interior, so the double-clip trick above would
 * let the conic paint the whole face on hover. Instead the rotating glint lives on
 * a masked ::after ring: the conic fills the pseudo-element, and the content-box /
 * full-box mask pair XORs the center away so only the 1.5px border band remains.
 * The button itself keeps the subtle glass fill (components.css) for label
 * legibility, and its own background animation is switched off. */
.btn-ghost { position: relative; }
.btn-ghost:hover, .btn-ghost:focus-visible {
  border-color: transparent;
  background-image: none;
  background-color: rgba(255, 255, 255, .08);
  animation: none;
}
.btn-ghost:hover::after, .btn-ghost:focus-visible::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  background: conic-gradient(from var(--shimmer-angle),
    var(--shimmer-base) 0deg, var(--shimmer-base) 72deg,
    var(--shimmer-glint) 96deg, var(--shimmer-peak) 110deg, var(--shimmer-glint) 124deg,
    var(--shimmer-base) 150deg, var(--shimmer-base) 360deg);
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: shimmerRotate var(--shimmer-speed) linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .btn-ghost:hover::after, .btn-ghost:focus-visible::after { animation: none; }
}

/* Nav links: gold shimmering text on hover/focus. The gold-dark anchors keep the
 * glyphs legible on both the dark hero header and the light scrolled header while a
 * bright glint sweeps through. */
@keyframes goldNavSheen { to { background-position: 200% center; } }
.nav a:hover, .nav a:focus-visible {
  background-image: linear-gradient(100deg,
    var(--gold-dark) 0%, var(--gold) 25%, var(--shimmer-peak) 50%, var(--gold) 75%, var(--gold-dark) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: goldNavSheen 2.5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .nav a:hover, .nav a:focus-visible { animation: none; background-position: 0 center; }
}

/* ---- Active-nav dot ----
 * A small gold, gently shimmering "you are here" dot under the current nav link.
 * script.js positions it and replays the slide on each page load: it starts under
 * the link for the page you came from and slides to the current page, overshooting
 * then settling (back-out ease), stretched along its travel (velocity stretch) and
 * softly blurred (motion blur). */
.nav-dot {
  position: absolute; bottom: -5px; left: 0; width: 7px; height: 7px;
  border-radius: var(--r-pill);
  background: radial-gradient(circle at 50% 35%, var(--shimmer-peak), var(--gold) 55%, var(--gold-dark));
  box-shadow: 0 0 8px 1px rgba(215, 182, 93, .65);
  transform: translateX(-50%);
  opacity: 0; pointer-events: none;
  transition:
    left 430ms cubic-bezier(.34, 1.55, .54, 1),
    transform var(--dur-2) var(--ease),
    filter var(--dur-2) linear,
    opacity var(--dur-2) var(--ease);
  animation: navDotShimmer 2.4s ease-in-out infinite;
}
.nav-dot.is-visible { opacity: 1; }
.nav-dot.is-moving { transform: translateX(-50%) scaleX(1.6); filter: blur(0.5px); }
.nav-dot--instant { transition: none !important; }

@keyframes navDotShimmer {
  0%, 100% { box-shadow: 0 0 6px 1px rgba(215, 182, 93, .5); }
  50%      { box-shadow: 0 0 12px 2px rgba(215, 182, 93, .95); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-dot { animation: none; }
  .nav-dot.is-moving { transform: translateX(-50%); filter: none; }
}

/* ---- Footer version label ----
 * Deliberately low-contrast at rest on the deep footer; reveals a gold shimmer on hover. */
.footer-version {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, .3);
  width: max-content;
  cursor: default;
}
.footer-version:hover, .footer-version:focus-visible {
  background-image: linear-gradient(100deg,
    var(--gold-dark) 0%, var(--gold) 28%, var(--shimmer-peak) 50%, var(--gold) 72%, var(--gold-dark) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: goldSheen 2.5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .footer-version:hover, .footer-version:focus-visible { animation: none; background-position: 0 center; }
}