/* The heart hunt (Jordan, 2026-10-09): small hearts hidden across the site.
   Each one found adds a point to the score in the corner. hearts.js keeps the
   score in localStorage; without script the hearts and the score never show. */

/* Each heart's spot comes from scripts/site/build_pages.py (HUNT) as custom
   properties: a percentage spot from 1280px up, and below that a spot in its
   section's padding, clear of the text and screenshots a percentage would
   land on at a narrower width. The button is a 44px target; the heart in it
   stays the size it was (1.4rem). */
.hh {
  position: absolute; z-index: 5;
  top: var(--hh-t, auto); right: var(--hh-r, auto); bottom: var(--hh-b, auto); left: var(--hh-l, auto);
  width: 44px; height: 44px; padding: calc((44px - 1.4rem) / 2);
  border: 0; border-radius: 50%; background: none; cursor: pointer;
  color: var(--glg-heart);
  opacity: 0.82;
}
/* One bob, 3.2s, the first time a heart comes into view (hearts.js adds
   .bob), then it rests: a bob that looped forever was motion that started on
   its own, ran past five seconds, and could not be stopped (WCAG 2.2.2;
   review of 2026-10-15). */
.hh.bob { animation: hh-bob 3.2s ease-in-out 1; }
.hh[hidden] { display: none; }
@media (max-width: 79.99em) {
  .hh { top: var(--hh-ct, auto); right: var(--hh-cr, auto); bottom: var(--hh-cb, auto); left: var(--hh-cl, auto); }
}
.hh svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hh svg path { fill: currentColor; stroke: #c57150; stroke-width: 18; stroke-linejoin: round; }
.hh:hover, .hh:focus-visible { opacity: 1; transform: scale(1.15); animation: none; }
.hh:focus-visible { outline: 3px solid var(--glg-navy); outline-offset: 2px; }
@keyframes hh-bob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-4px) rotate(6deg); } }

/* The score: a pill under the header's right end. */
.hh-score {
  position: fixed; z-index: 190; right: 1rem; top: calc(var(--hdr-h, 4.5rem) + 0.6rem);
  display: flex; align-items: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0 0.95rem 0 0.75rem;
  border: 2px solid #f2b590; border-radius: 999px;
  background: var(--glg-surface); color: var(--glg-ink);
  box-shadow: 0 10px 24px -14px rgba(34, 54, 78, 0.45);
  font: 600 0.95rem/1 var(--glg-font-display);
  cursor: pointer; transform-origin: 80% 50%;
}
.hh-score[hidden] { display: none; }
.hh-score svg { width: 1.45rem; height: 1.3rem; overflow: visible; }
/* The heart's stroke runs past its drawing box; let it show whole. */
.hh svg, .hh-flyer svg, .hh-burst svg, .hh-win-heart svg { overflow: visible; }
.hh-score svg path { fill: #e48c65; stroke: #c57150; stroke-width: 20; stroke-linejoin: round; }
.hh-score b { font-weight: 700; font-size: 1.15rem; min-width: 1ch; text-align: center; }
.hh-score small { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--glg-muted); }
.hh-score.bump { animation: hh-bump 0.5s ease-out; }
@keyframes hh-bump { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.22); } }
.hh-score:focus-visible { outline: 3px solid var(--glg-navy); outline-offset: 2px; }

/* Under the score pill; hearts.js sets top and right from the pill. */
.hh-tip {
  position: fixed; z-index: 190; right: 1rem; top: calc(var(--hdr-h, 4.5rem) + 0.6rem);
  width: min(20rem, calc(100vw - 2rem)); padding: 0.9rem 1rem;
  border: 1px solid var(--glg-border); border-radius: var(--glg-radius-card);
  background: var(--glg-surface); color: var(--glg-body);
  box-shadow: 0 16px 34px -14px rgba(34, 54, 78, 0.35);
  font: 400 0.95rem/1.5 var(--glg-font-body);
}
.hh-tip[hidden] { display: none; }
.hh-tip strong { color: var(--glg-ink); font-family: var(--glg-font-display); }

/* A found heart flies to the score; a +1 lands beside it. */
.hh-flyer {
  position: fixed; z-index: 400; left: 0; top: 0; width: 2.6rem; height: 2.4rem; pointer-events: none;
  transition: transform 0.9s cubic-bezier(0.45, 0, 0.25, 1), opacity 0.2s ease-in 0.75s;
}
.hh-flyer svg { width: 100%; height: 100%; }
.hh-flyer svg path { fill: #e48c65; stroke: #c57150; stroke-width: 20; stroke-linejoin: round; }
.hh-plus {
  position: fixed; z-index: 400; pointer-events: none;
  font: 700 1.6rem/1 var(--glg-font-display); color: #c57150;
  animation: hh-plus 1s ease-out forwards;
}
@keyframes hh-plus {
  0% { transform: translateY(8px) scale(0.5); opacity: 0; }
  25% { transform: translateY(0) scale(1.15); opacity: 1; }
  70% { transform: translateY(-5px) scale(1); opacity: 1; }
  100% { transform: translateY(-20px) scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hh, .hh-score.bump, .hh-plus { animation: none; }
  .hh-flyer { transition: none; }
}
@media (max-width: 600px) {
  .hh-score { right: .6rem; min-height: 2.4rem; padding: 0 .7rem 0 .55rem; }
  .hh-score small { display: none; }
}
@media print { .hh, .hh-score, .hh-tip { display: none !important; } }

/* In the header, to the right of Start the conversation (Jordan, 2026-10-15). */
.hh-score.in-hdr { position: static; min-height: 2.6rem; box-shadow: none; flex: none; }
@media (max-width: 40em) { .hh-score.in-hdr { min-height: 2.4rem; padding: 0 0.6rem 0 0.5rem; } }

/* All twelve: hearts burst from the score, then the card. */
.hh-burst { position: fixed; inset: 0; z-index: 420; pointer-events: none; overflow: hidden; }
.hh-burst span {
  position: absolute; width: 2rem; height: 1.8rem; margin: -0.9rem 0 0 -1rem;
  animation: hh-fly 2.1s cubic-bezier(.15,.7,.3,1) both;
}
.hh-burst svg { width: 100%; height: 100%; display: block; }
.hh-burst svg path { fill: #e48c65; stroke: #c57150; stroke-width: 20; stroke-linejoin: round; }
@keyframes hh-fly {
  0% { transform: translate(0, 0) scale(0.2) rotate(0); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(var(--sc)) rotate(var(--rot)); opacity: 0; }
}
.hh-win {
  width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--glg-ink); overflow: hidden;
  display: grid; place-items: center;
}
.hh-win::backdrop { background: rgb(247 246 241 / 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hh-win-card {
  position: relative; width: min(30rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto;
  padding: 2rem 1.8rem 1.6rem; border-radius: 24px; text-align: center;
  background: var(--glg-surface); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.55);
}
.hh-win[open] .hh-win-card { animation: hh-win-in 0.6s cubic-bezier(.2,.8,.2,1); }
/* The party: confetti falls in the brand's colours while hearts rise. */
.hh-party { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hh-party i { position: absolute; top: -4vh; width: var(--w); height: var(--h); background: var(--c); border-radius: 2px; opacity: 0.95; animation: hh-confetti var(--d) linear infinite; }
.hh-party span { position: absolute; bottom: -8vh; width: 2.2rem; height: 2rem; animation: hh-rise var(--d) ease-out infinite; }
.hh-party span svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hh-party span svg path { fill: #e48c65; stroke: #c57150; stroke-width: 20; stroke-linejoin: round; }
@keyframes hh-confetti {
  0% { transform: translate(0, 0) rotate(0); }
  100% { transform: translate(var(--x), 112vh) rotate(var(--r)); }
}
@keyframes hh-rise {
  0% { transform: translate(0, 0) scale(var(--sc)); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(var(--x), -118vh) scale(var(--sc)) rotate(14deg); opacity: 0; }
}
.hh-win-heart { position: relative; width: 6rem; height: 5.4rem; margin: 0 auto 0.8rem; animation: hh-beat 1.2s ease-in-out 0.6s 2; }
.hh-win-heart svg { width: 100%; height: 100%; display: block; }
.hh-win-heart svg path { fill: #e48c65; stroke: #c57150; stroke-width: 14; stroke-linejoin: round; }
.hh-win-heart b { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 0.5rem; color: #fff; font: 800 1.9rem/1 var(--glg-font-display); }
.hh-win h2 { margin: 0 0 0.5rem; font-size: 1.9rem; line-height: 1.15; }
.hh-win p { margin: 0 0 1.1rem; color: var(--glg-body); }
/* The code, big enough to read across the room, with a copy button. */
.hh-code { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0.8rem; margin: 0.2rem 0 0.6rem; padding: 0.8rem 1rem; border: 1.5px dashed var(--glg-ember); border-radius: 14px; background: var(--glg-ember-tint, #f9ede6); }
.hh-code-k { font-family: var(--glg-font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--glg-ember); }
.hh-code code { font: 700 1.5rem/1 var(--glg-font-display); letter-spacing: 0.08em; color: var(--glg-ink); }
.hh-copy { padding: 0.35rem 0.7rem; border: 1px solid var(--glg-navy); border-radius: 3px; background: var(--glg-surface); color: var(--glg-ink); font: 600 0.8rem var(--glg-font-display); cursor: pointer; }
.hh-copy:hover { background: var(--glg-navy); color: #fff; }
.hh-code-m { font-size: 0.9rem; }
.hh-win-go { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
@keyframes hh-win-in { from { opacity: 0; transform: scale(0.6) rotate(-4deg); } }
@keyframes hh-beat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.14); } 60% { transform: scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .hh-win[open] .hh-win-card, .hh-win-heart, .hh-party i, .hh-party span { animation: none; } }