/* Hover guard — the `@media (hover: hover)` blocks below.
 *
 * A touch screen has no pointer to hover with, so the browser synthesises a
 * hover on the first tap. Every :hover rule then fires on that tap, the
 * browser counts it as "the page changed", and the click that would have
 * followed the link is swallowed: the button plays its animation and you have
 * to tap a second time to actually go anywhere. `hover: hover` matches only
 * devices with a real hovering pointer, so these rules are skipped entirely on
 * phones and tablets and one tap is enough. Desktop is unaffected — a
 * conditional group rule changes neither specificity nor source order.
 */

/*
 * tg-btn.css — the animated gold border for .tg-btn-gold / .tg-btn-ghost.
 *
 * Loaded LAST on the six paid pages only (home/splash, portfolio, service,
 * service detail, gallery, gallery detail). It replaces the per-page
 * `background: … border-box` + `@property --tg-angle` implementation that
 * lived in home.css / service.css / gallery.css / portfolio.css and in the
 * splash page's inline <style>.
 *
 * Why it was replaced: that version animated a registered custom property, so
 * every frame repainted the conic gradient on the main thread (never on the
 * compositor). On these pages — background video, AOS scroll observers,
 * lightboxes — the repaint gets starved and the border reads as a flat, static
 * gold ring. The 90deg repeating gradient made it worse: on a wide pill the
 * four highlights sit almost symmetrically, so even when it does advance there
 * is little to see.
 *
 * This version puts the gradient on a ::before sheet and spins it with
 * `transform: rotate()`, which the compositor animates on its own thread — it
 * keeps running smoothly no matter what the main thread is doing. The button
 * clips it (overflow:hidden + border-radius), and ::after paints the interior,
 * leaving a 2px ring of moving gold.
 *
 * Selectors are doubled (.tg-btn.tg-btn-ghost) to match the specificity of the
 * scoped page rules (.tg-sv .tg-btn-ghost, .tg-gal .tg-btn-ghost, …); load
 * order then decides, which is why the <link> goes last.
 */

.tg-btn.tg-btn-gold,
.tg-btn.tg-btn-ghost {
  position: relative;
  z-index: 0;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: transparent;
  /* the old custom-property spin is gone; ::before carries the motion now */
  animation: none;
}

/* Rotating gradient sheet. Square, 1.5x the button width and centred, so it
   still covers the pill at every angle (its inscribed radius, .75w, clears the
   pill's half-diagonal, ~.53w for these proportions). */
.tg-btn.tg-btn-gold::before,
.tg-btn.tg-btn-ghost::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  aspect-ratio: 1;
  z-index: -2;
  transform: translate(-50%, -50%) rotate(0turn);
  animation: tg-btn-sweep 2.8s linear infinite;
  pointer-events: none;
}

/* Interior fill, inset by the ring thickness. */
.tg-btn.tg-btn-gold::after,
.tg-btn.tg-btn-ghost::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  transition: background 0.2s ease;
}

/* Ghost: two bright gold highlights chasing each other round a dark edge. */
.tg-btn.tg-btn-ghost {
  color: var(--tg-fg, #f5f5f5);
  box-shadow: 0 0 18px 1px rgba(255, 204, 1, 0.4),
    0 0 40px 6px rgba(255, 204, 1, 0.18);
}
.tg-btn.tg-btn-ghost::before {
  background: conic-gradient(
    #3d2b00 0%,
    #ffcc01 12%,
    #fff6c4 20%,
    #ffcc01 28%,
    #3d2b00 45%,
    #3d2b00 55%,
    #ffcc01 62%,
    #fff6c4 70%,
    #ffcc01 78%,
    #3d2b00 95%,
    #3d2b00 100%
  );
}
.tg-btn.tg-btn-ghost::after {
  background: #0a0a0a;
}
@media (hover: hover) {
  .tg-btn.tg-btn-ghost:hover {
    color: var(--tg-fg, #f5f5f5);
    text-decoration: none;
  }
}

/* Gold: same sweep, white highlight on a gold edge, solid gold interior. */
.tg-btn.tg-btn-gold {
  color: #0a0a0a;
  box-shadow: 0 0 18px 1px rgba(255, 255, 255, 0.45),
    0 0 40px 7px rgba(255, 204, 1, 0.28);
}
.tg-btn.tg-btn-gold::before {
  background: conic-gradient(
    #b37e00 0%,
    #ffffff 15%,
    #b37e00 35%,
    #b37e00 65%,
    #ffffff 80%,
    #b37e00 100%
  );
}
.tg-btn.tg-btn-gold::after {
  background: var(--tg-gold, #ffcc01);
}
@media (hover: hover) {
  .tg-btn.tg-btn-gold:hover {
    color: #0a0a0a;
    text-decoration: none;
  }
}
@media (hover: hover) {
  .tg-btn.tg-btn-gold:hover::after {
    background: #ffffff;
  }
}

@keyframes tg-btn-sweep {
  to {
    transform: translate(-50%, -50%) rotate(1turn);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tg-btn.tg-btn-gold::before,
  .tg-btn.tg-btn-ghost::before {
    animation: none;
  }
}