/* mascots.css — page-specific mascot placements.
   Loaded AFTER styles.css. Owns only the .mascot-* namespace so it can never
   collide with the core stylesheet. Colour tokens come from styles.css :root
   (--dark #111111, --yellow #FFE135, --pink #FF3D82, --blue #2563EB). */

/* ---------- scene frames (full-body mascots) ---------- */

.mascot {
  display: inline-block;
  background: #fff;
  border: 4px solid var(--dark);
  box-shadow: 6px 6px 0 var(--dark);
  padding: 8px;
  line-height: 0;
  max-width: 100%;
}

.mascot img {
  display: block;
  height: auto;
  max-width: 100%;
}

/* Sit a frame on a dark band without the shadow disappearing into it. */
.mascot-on-dark { box-shadow: 6px 6px 0 var(--yellow); }

/* Card fills, matching the neobrutalist blocks already on the site. */
.mascot-yellow { background: var(--yellow); }
.mascot-bg     { background: var(--bg); }

/* Small, deliberate tilt — the site uses 1–12deg on its own blocks. */
.mascot-tilt-l { transform: rotate(-2deg); }
.mascot-tilt-r { transform: rotate(1.5deg); }

/* Widths. Mobile is overridden below by a height cap. */
.mascot-sm img { width: 150px; }
.mascot-md img { width: 200px; }
.mascot-lg img { width: 240px; }

@media (min-width: 768px) {
  .mascot-sm img { width: 175px; }
  .mascot-md img { width: 240px; }
  .mascot-lg img { width: 310px; }
}

/* On phones a mascot must never out-tower the copy it accompanies, so cap by
   height and let the width follow the aspect ratio. */
@media (max-width: 767px) {
  .mascot img {
    width: auto;
    max-height: 144px;
  }
}

/* ---------- head markers (features / comparisons section badges) ---------- */

.mascot-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 5px;
  background: var(--yellow);
  border: 4px solid var(--dark);
  box-shadow: 4px 4px 0 var(--dark);
  overflow: hidden;
}

.mascot-marker img {
  display: block;
  width: 100%;
  height: auto;
}

.mascot-marker.mascot-on-dark { box-shadow: 4px 4px 0 var(--yellow); }

@media (min-width: 768px) {
  .mascot-marker { width: 78px; height: 78px; }
}

/* ---------- hover lift — motion-safe only ---------- */

@media (prefers-reduced-motion: no-preference) {
  .mascot,
  .mascot-marker {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .mascot:hover               { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--dark); }
  .mascot.mascot-tilt-l:hover { transform: rotate(-2deg) translate(-3px, -3px); }
  .mascot.mascot-tilt-r:hover { transform: rotate(1.5deg) translate(-3px, -3px); }
  .mascot.mascot-on-dark:hover { box-shadow: 9px 9px 0 var(--yellow); }
  .mascot-marker:hover        { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--dark); }
  .mascot-marker.mascot-on-dark:hover { box-shadow: 6px 6px 0 var(--yellow); }
}