/* ============================================================
   Sparkle CTA Button
   Usage: <a class="sparkle-btn" href="...">
            [5 sparkle SVGs]
            <span class="sparkle-btn__text">Label</span>
            <span class="sparkle-btn__glare" aria-hidden="true">Label</span>
          </a>
   Works for both <a> and <button> elements.
   ============================================================ */

.sparkle-btn {
  --color:  #FAF4EC /*var(--color-accent, #f5c800)*/;
  --shadow: var(--color-text-secondary, #666666);
  --glare:  hsla(52, 100%, 69%, 0.9);
  --size:   0.75rem;
  --hover:  0.4;
  --pos:    0;
  --pad:    0.25rem;
  --font-weight: 600;
  --letter-spacing: 1px;
  --border-radius: 5rem;
  --background: #304737;

  display: inline-block;
  position: relative;
  padding: var(--pad) calc(var(--pad) * 4);
  border-radius: var(--border-radius);
  text-decoration: none;
  text-align: center;
  color: transparent;
  background: var(--background);
  border: none;
  cursor: pointer;
  /* font-family: 'Playfair Display', serif;
  font-style: italic; */
  transition: background 0.2s;
}

.sparkle-btn:hover {
  background: var(--background);
  --hover: 1;
  --pos: 1;
}

.sparkle-btn:active {
  --hover: 0;
}

.sparkle-btn:active .sparkle-btn__glare {
  --hover: 0;
  --pos: 1;
}

/* Base text — drives layout dimensions */
.sparkle-btn__text {
  display: inline-block;
  font-size: calc(var(--size) * 1.5);
  font-weight: var(--font-weight);
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  color: var(--color);
  text-shadow:
    calc(var(--hover) * (var(--size) * -0.02)) calc(var(--hover) * (var(--size) *  0.02)) var(--shadow),
    calc(var(--hover) * (var(--size) * -0.04)) calc(var(--hover) * (var(--size) *  0.04)) var(--shadow),
    calc(var(--hover) * (var(--size) * -0.06)) calc(var(--hover) * (var(--size) *  0.06)) var(--shadow),
    calc(var(--hover) * (var(--size) * -0.08)) calc(var(--hover) * (var(--size) *  0.08)) var(--shadow),
    calc(var(--hover) * (var(--size) * -0.10)) calc(var(--hover) * (var(--size) *  0.10)) var(--shadow);
  transform: translate(
    calc(var(--hover) * (var(--size) *  0.10)),
    calc(var(--hover) * (var(--size) * -0.10))
  );
  transition: transform 0.2s, text-shadow 0.2s;
}

/* Glare overlay — sweeps across text on hover */
.sparkle-btn__glare {
  position: absolute;
  inset: var(--pad);
  display: inline-block;
  font-size: calc(var(--size) * 1.5);
  font-weight: var(--font-weight);
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  z-index: 2;
  color: transparent;
  text-shadow: none;
  -webkit-background-clip: text;
  background-clip: text;
  background-image:
    linear-gradient(
      108deg,
      transparent 0 55%,
      var(--glare) 55% 60%,
      transparent 60% 70%,
      var(--glare) 70% 85%,
      transparent 85%
    ),
    linear-gradient(var(--color), var(--color));
  background-size: 200% 100%, 100% 100%;
  background-position: calc(var(--pos) * -200%) 0%, 0% 0%;
  transform: translate(
    calc(var(--hover) * (var(--size) *  0.10)),
    calc(var(--hover) * (var(--size) * -0.10))
  );
  transition: transform 0.2s, background-position 0s;
}

.sparkle-btn:hover .sparkle-btn__glare {
  transition: transform 0.2s, background-position 1.5s 0.25s;
}

/* Sparkle star SVGs */
.sparkle-btn svg {
  position: absolute;
  z-index: 3;
  width: calc(var(--size) * 0.8);
  aspect-ratio: 1;
  top:  calc(var(--y, 50) * 1%);
  left: calc(var(--x, 50) * 1%);
  transform: translate(-50%, -50%) scale(0);
}

.sparkle-btn svg path {
  fill: #ffffff;
}

.sparkle-btn:hover svg {
  animation: sparkle-pop 0.75s calc(0.15s * var(--d, 1)) infinite;
}

@keyframes sparkle-pop {
  50% { transform: translate(-50%, -50%) scale(var(--s, 1)); }
}

.sparkle-btn svg:nth-of-type(1) { --x: 0;   --y: 20; --s: 1.1;  --d: 1; }
.sparkle-btn svg:nth-of-type(2) { --x: 15;  --y: 80; --s: 1.25; --d: 2; }
.sparkle-btn svg:nth-of-type(3) { --x: 45;  --y: 40; --s: 1.1;  --d: 3; }
.sparkle-btn svg:nth-of-type(4) { --x: 75;  --y: 60; --s: 0.9;  --d: 2; }
.sparkle-btn svg:nth-of-type(5) { --x: 100; --y: 30; --s: 0.8;  --d: 4; }

/* ============================================================
   Sparkle Logo — looping sparkle + glare on navbar logo image
   Toggle: set SPARKLE_NAV_LOGO in js/main.js
   ============================================================ */

.sparkle-logo {
  position: relative;
  display: inline-block;
}


.sparkle-logo svg {
  position: absolute;
  z-index: 3;
  width: 0.55rem;
  aspect-ratio: 1;
  top:  calc(var(--y, 50) * 1%);
  left: calc(var(--x, 50) * 1%);
  animation: logo-sparkle 3s calc(var(--d) * 0.35s) infinite;
}

.sparkle-logo svg path { fill: #D9A441; }

@keyframes logo-sparkle {
  0%, 33%, 100% { transform: translate(-50%, -50%) scale(0); }
  17%           { transform: translate(-50%, -50%) scale(var(--s, 1)); }
}

.sparkle-logo--lg svg { width: 1rem; }

.sparkle-logo svg:nth-of-type(1) { --x: 2;  --y: 25; --s: 1.0; --d: 1; }
.sparkle-logo svg:nth-of-type(2) { --x: 98; --y: 65; --s: 0.9; --d: 2; }
.sparkle-logo svg:nth-of-type(3) { --x: 50; --y: 5;  --s: 0.8; --d: 3; }
.sparkle-logo svg:nth-of-type(4) { --x: 18; --y: 90; --s: 1.1; --d: 4; }
.sparkle-logo svg:nth-of-type(5) { --x: 85; --y: 10; --s: 0.9; --d: 5; }