/* Hawaiʻi Passport — "I've Been Here" stamp button on collection-member
   detail pages (beaches, waterfalls, …). Loaded by
   _includes/passport-stamp.html on member pages only
   (_data/passport_collections.yml defines membership).
   Button base look comes from the site's .btn .btn-3d .btn-<island>
   classes so it sits naturally beside the back + Navigate Here chips;
   this file only adds the stamped state, the stamp-press animation, and
   the small Passport link. px font sizes per site rules. */

.hg-bp-wrap {
  /* Own row, spaced on BOTH sides. The Add to Trip button is injected by
     a separate script (itinerary.js) racing this one to append into the
     same action bar, so the stamp can land either above or below it —
     a top-only margin left them touching whenever the stamp won the race.
     Block display + symmetric margins separate the rows in either order
     (the bar's text-right alignment keeps the contents right-aligned).
     clear:both matters: the bar's back button is floated (pull-left), and
     without the clear this block slides up BESIDE the float — on phones
     that jammed "Stamped + Passport" against the back button instead of
     giving the pair its own line. */
  display: block;
  clear: both;
  margin: 16px 0;
  white-space: nowrap;
}

.hg-bp-btn .hg-bp-ico {
  display: inline-block;
  margin-right: 3px;
}

/* Pressed-in look once stamped — mirrors .btn-3d's active inset shadow */
.hg-bp-btn[aria-pressed="true"] {
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.25);
}

/* Rubber-stamp press: the icon slams down from above, overshoots a touch,
   and settles. Runs once per stamping (class added/removed by JS). */
@keyframes hg-bp-stamp {
  0%   { transform: scale(2.4) rotate(-14deg); opacity: 0; }
  55%  { transform: scale(0.88) rotate(3deg);  opacity: 1; }
  75%  { transform: scale(1.08) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes hg-bp-press {
  0%   { transform: scale(1); }
  45%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.hg-bp-btn.hg-bp-anim {
  animation: hg-bp-press 0.35s ease-out both;
}
.hg-bp-btn.hg-bp-anim .hg-bp-ico {
  animation: hg-bp-stamp 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
@media (prefers-reduced-motion: reduce) {
  .hg-bp-btn.hg-bp-anim,
  .hg-bp-btn.hg-bp-anim .hg-bp-ico {
    animation: none;
  }
}

/* "Stamped at the spot" — gold GPS pin appended once the on-device
   location check confirms the reader is at the beach. Warm gold reads
   clearly on all four island button colors. */
.hg-bp-btn .hg-bp-pin {
  display: inline-block;
  margin-left: 4px;
  color: #ffd34d;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

/* The verified upgrade lands a few seconds after the stamp (GPS fix is
   async) — a small pop draws the eye to the new pin without re-running
   the whole stamp animation. */
@keyframes hg-bp-pin-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.5); opacity: 1; }
  100% { transform: scale(1); }
}
.hg-bp-btn.hg-bp-verified-anim .hg-bp-pin {
  animation: hg-bp-pin-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
@media (prefers-reduced-motion: reduce) {
  .hg-bp-btn.hg-bp-verified-anim .hg-bp-pin {
    animation: none;
  }
}

/* Small "Passport →" link revealed after stamping */
.hg-bp-link {
  display: inline-block;
  margin-left: 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  vertical-align: middle;
}
.hg-bp-link .fa-chevron-right { font-size: 10px; }

/* ─── Landmark stamp art ink-in ──────────────────────────────────────
   The hand-drawn stamp art (_includes/landmark-stamp-art.html) rests
   gray/embossed; stamping the page inks it in. Base layout + gray filter
   live in the include's own <style> (self-contained on the 12 landmark
   pages); this block only adds the one-shot slam animation the JS
   triggers on a live stamp. */
@keyframes hg-lm-ink {
  0%   { transform: scale(1.7) rotate(-4deg); opacity: 0.25; }
  55%  { transform: scale(0.94) rotate(8deg); opacity: 1; }
  78%  { transform: scale(1.05) rotate(5deg); }
  100% { transform: scale(1) rotate(6deg); }
}
.hg-lm-art.hg-lm-ink img {
  animation: hg-lm-ink 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
@media (prefers-reduced-motion: reduce) {
  .hg-lm-art.hg-lm-ink img { animation: none; }
}