/* ─── Canonical Pique wordmark ─────────────────────────────────────────
 *
 * Single source of truth for the "pique" wordmark + dot across every
 * HTML page served on playpique.com and its subpaths. Mirrors the React
 * `<Logo>` component (src/components/Logo.tsx) and the mobile
 * `PiqueLogo.tsx` component so the mark renders identically everywhere.
 *
 * Usage:
 *   <span class="pique-wordmark" style="font-size: 24px; color: #fff;">
 *     pique<span class="pique-dot"></span>
 *   </span>
 *
 * Size is controlled by `font-size` on the outer span. Dot geometry,
 * pulse timing, and opacity are fixed so the dot sits at the same
 * 63.4° angle above the baseline of the "e" at every size.
 *
 * Dot positioning rule:
 *   margin-top  = 0.08em  (drop from top of the text)
 *   margin-left = 0.04em  (gap from the "e")
 *   → ratio 2:1  →  arctan(2) = 63.4° below horizontal
 *
 * Pulse animation (heartbeat — brightens at peak):
 *   duration   2200ms
 *   easing     ease-in-out
 *   scale      1.0 → 1.3 → 1.0
 *   opacity    0.8 → 1.0 → 0.8
 *   box-shadow 4px glow → 16px glow → 4px glow
 */

.pique-wordmark {
  display: inline-flex;
  align-items: flex-start;
  font-family: 'Unbounded', sans-serif;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
}

.pique-wordmark .pique-dot {
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  background: #FF6B35;
  margin-top: 0.08em;
  margin-left: 0.04em;
  display: inline-block;
  animation: pique-pulse 2200ms ease-in-out infinite;
}

@keyframes pique-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 4px rgba(255, 107, 53, 0.4);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.3);
    box-shadow: 0 0 16px rgba(255, 107, 53, 1);
    opacity: 1;
  }
}