/* Landing mascot — the same guardian bear the PIN screen uses.
   The artwork lives in js/pin-guardian-art.js; this file only positions and
   animates it, so the character stays a single source of truth. */

.mascot {
  --mascot-size: 168px;
  width: var(--mascot-size);
  height: calc(var(--mascot-size) * 0.875);
  margin: 0 auto 26px;
  display: grid;
  place-items: center;
  position: relative;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.mascot:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 10px;
  border-radius: 20px;
}
.mascot .pin-guardian-art {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Paws up over the eyes is the resting pose: the product's whole claim in one
   image. Pointing at the bear lowers them, which is the reward for looking. */
.mascot .guardian-head { transform-origin: 160px 158px; }
.mascot .guardian-eye { transform-box: fill-box; transform-origin: center; transition: transform 160ms ease; }
.mascot .guardian-lids,
.mascot .guardian-raised-arms { transition: opacity 220ms ease; }
.mascot .guardian-paw { transition: transform 420ms cubic-bezier(.2, .8, .25, 1.12); }
.mascot .guardian-paw-l { transform-origin: 103px 220px; }
.mascot .guardian-paw-r { transform-origin: 217px 220px; }

.mascot[data-covered="true"] .guardian-eye { transform: scaleY(.025); }
.mascot[data-covered="true"] .guardian-lids,
.mascot[data-covered="true"] .guardian-raised-arms { opacity: 1; }
.mascot[data-covered="true"] .guardian-paw-l { transform: translate(26px, -96px) rotate(12deg); }
.mascot[data-covered="true"] .guardian-paw-r { transform: translate(-26px, -96px) rotate(-12deg); }
.mascot[data-covered="false"] .guardian-lids,
.mascot[data-covered="false"] .guardian-raised-arms { opacity: 0; }

/* Breathing: a slow, small scale on the head only. Nothing loops on the whole
   figure, so it never competes with the headline for attention. */
.mascot[data-motion="on"] .guardian-head { animation: mascot-breathe 5.5s ease-in-out infinite; }
@keyframes mascot-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-3px) scale(1.014); }
}

/* Hint that the artwork reacts, without a tooltip that would need translating. */
.mascot-hint {
  display: block;
  margin: -14px auto 30px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: #6f8b82;
  transition: color 160ms ease;
}
.mascot:hover + .mascot-hint,
.mascot:focus-visible + .mascot-hint { color: var(--green); }

/* Two labels, one visible at a time, so both stay translatable text nodes
   rather than CSS content the i18n pass cannot reach. */
.mascot-hint > span { display: none; }
.mascot[data-covered="true"] + .mascot-hint .mascot-hint-covered,
.mascot[data-covered="false"] + .mascot-hint .mascot-hint-open { display: inline; }

@media (min-width: 720px) {
  .mascot { --mascot-size: 208px; margin-bottom: 30px; }
}
@media (max-height: 620px) and (orientation: landscape) {
  .mascot { --mascot-size: 120px; }
  .mascot-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mascot *,
  .mascot[data-motion="on"] .guardian-head { animation: none !important; transition: none !important; }
}