/* ==========================================================================
   Raegan's Roost — mascot widget

   The animation itself is a transparent animated WebP; this file only places
   it, makes it a link, and handles the states around it. Nothing here animates
   the hen — she is already animated.
   ========================================================================== */

.rr-mascot {
  --rr-accent:  #1D8E98;   /* the wordmark teal, darkened to pass 4.5:1 */
  --rr-width:   400px;     /* the asset's natural width */
  --rr-inset-y: 0px;

  position: fixed;
  left: 0;
  bottom: var(--rr-inset-y);
  z-index: 60;
  width: var(--rr-width);
  pointer-events: none;    /* never swallow clicks meant for the page */
}

.rr-mascot[hidden] { display: none; }

.rr-mascot__link {
  display: block;
  position: relative;
  border-radius: 12px;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.rr-mascot__link:focus-visible {
  outline: 2px solid var(--rr-accent);
  outline-offset: 4px;
}

.rr-mascot__img {
  display: block;
  width: 100%;
  height: auto;
  /* grounds her against the page without a hard shadow */
  filter: drop-shadow(0 4px 8px rgb(58 42 30 / 0.16));
  transition: transform 150ms ease-out;
}
.rr-mascot__link:hover  .rr-mascot__img { transform: translateY(-2px); }
.rr-mascot__link:active .rr-mascot__img { transform: translateY(0) scale(0.99); }

/* she enters from off-screen, so the widget fades rather than slides */
.rr-mascot { opacity: 0; transition: opacity 300ms ease-out; }
.rr-mascot.is-playing { opacity: 1; }
.rr-mascot.is-leaving { opacity: 0; }

/* ── dismiss ───────────────────────────────────────────────────────────── */
.rr-mascot__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  font: 500 16px/1 system-ui, sans-serif;
  color: #7A6754;
  background: #FFFDF8;
  border: 1px solid #E3D9C7;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgb(58 42 30 / 0.10);
  cursor: pointer;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}
.rr-mascot__close::before { content: ""; position: absolute; inset: -8px; } /* 44px target */
.rr-mascot:hover .rr-mascot__close,
.rr-mascot__close:focus-visible { opacity: 1; }
.rr-mascot__close:hover { color: #3A2A1E; border-color: var(--rr-accent); }
.rr-mascot__close:focus-visible { outline: 2px solid var(--rr-accent); outline-offset: 2px; }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .rr-mascot { --rr-width: 260px; }
}

/* ── reduced motion: the end pose, no walk-on ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rr-mascot__img { transition: none; }
  .rr-mascot__link:hover .rr-mascot__img { transform: none; }
}