/*
 * Luv, Mud — interactive clay hero (sections/luvmud-hero.liquid, assets/luvmud-hero.js)
 *
 * Portrait composition is used on phones AND on any portrait viewport (e.g. a 768px tablet held upright).
 * The same media query is mirrored in the <picture> source of the section.
 */

/* ---------------------------------------------------------------------------------------------------------------------
 * Section + header offsets (mirrors the theme's .content-over-media--fill logic)
 * ------------------------------------------------------------------------------------------------------------------ */

.lmh-section {
  --lmh-offset: var(--sticky-area-height, 0px);
  --lmh-top: 0px;
  position: relative;
}

.shopify-section:first-child .lmh-section {
  --lmh-offset: calc(var(--announcement-bar-height, 0px) + var(--header-height, 0px));
}

/* The header is pulled over the hero by theme.css; we only reserve room for it inside the text column */
.shopify-section:first-child .lmh-section[allow-transparent-header] {
  --lmh-offset: var(--announcement-bar-height, 0px);
  --lmh-top: var(--header-height, 0px);
}

/* ---------------------------------------------------------------------------------------------------------------------
 * Stage
 * ------------------------------------------------------------------------------------------------------------------ */

.lmh {
  --lmh-ar: var(--lmh-ar-d);
  --lmh-fx: var(--lmh-fx-d);
  --lmh-fy: var(--lmh-fy-d);
  display: block;
  position: relative;
  height: max(480px, calc(100vh - var(--lmh-offset)));
  overflow: hidden;
  isolation: isolate;
  container-type: size;
  background:
    radial-gradient(120% 70% at 30% 20%, rgb(255 255 255 / 0.7), rgb(255 255 255 / 0) 60%),
    linear-gradient(180deg, #fff9f0 0%, #fff6dd 42%, #ffef9e 100%);
  -webkit-tap-highlight-color: transparent;
}

@supports (overflow: clip) {
  .lmh {
    overflow: clip;
  }
}

@supports (height: 100svh) {
  .lmh {
    height: max(480px, calc(100svh - var(--lmh-offset)));
  }
}

/* The scene is the background plate's box, scaled to cover the stage — characters are positioned inside it */
.lmh-scene {
  position: absolute;
  inset: 0;
}

@supports (width: 1cqw) {
  .lmh-scene {
    --lmh-sw: max(100cqw, 100cqh * var(--lmh-ar));
    --lmh-sh: max(100cqh, 100cqw / var(--lmh-ar));
    inset: auto;
    width: var(--lmh-sw);
    height: var(--lmh-sh);
    left: calc((100cqw - var(--lmh-sw)) * var(--lmh-fx));
    top: calc((100cqh - var(--lmh-sh)) * var(--lmh-fy));
  }
}

/* ---------------------------------------------------------------------------------------------------------------------
 * Layer 1: plate
 * ------------------------------------------------------------------------------------------------------------------ */

.lmh-plate {
  position: absolute;
  inset: 0;
}

.lmh-plate picture,
.lmh-plate__img {
  display: block;
  width: 100%;
  height: 100%;
}

.lmh-plate__img {
  object-fit: cover;
}

/* ---------------------------------------------------------------------------------------------------------------------
 * Layer 2: characters
 * ------------------------------------------------------------------------------------------------------------------ */

.lmh-cast {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.lmh-blob {
  --lmh-bx: var(--x);
  --lmh-by: var(--y);
  --lmh-bs: var(--s);
  position: absolute;
  left: calc(var(--lmh-bx) * 1%);
  top: calc(var(--lmh-by) * 1%);
  width: calc(var(--lmh-bs) * 1%);
  z-index: var(--z);
  translate: -50% -100%; /* (x, y) is the character's bottom-centre: where it touches the ground */
  pointer-events: none;
}

/* Whatever the crop, keep every character's bottom at least 4% of the stage height above the visible bottom edge.
   Widths are a % of the stage width, which makes characters huge on wide, short stages (13" laptops), so they're
   also capped by the stage height. 1.68 × height = width at a 1.68:1 stage, so 1440×900 and taller stages look
   exactly as before; only wider/shorter stages shrink the cast. */
@supports (width: 1cqw) {
  .lmh-blob {
    top: min(calc(var(--lmh-by) * 1%), calc(96cqh - (100cqh - var(--lmh-sh)) * var(--lmh-fy)));
    width: min(calc(var(--lmh-bs) * 1%), calc(var(--lmh-bs) * 1.68cqh));
  }
}

.lmh-blob__lean,
.lmh-blob__bounce,
.lmh-blob__breathe {
  position: relative;
  transform-origin: 50% 100%; /* lean, squash and stretch all pivot from the ground */
}

.lmh-blob__lean,
.lmh-blob__breathe {
  will-change: transform;
}

.lmh-blob__art {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

@media (hover: hover) and (pointer: fine) {
  .lmh-blob__art {
    cursor: pointer;
  }
}

/* Depth of field: the further back (lower layer), the softer, so back-row characters match the soft sand around
   them. Layer 1 → 0.4px + 92% contrast, layer 2 → 0.2px + 96%, layer 3 and up stay crisp. */
.lmh-blob .lmh-blob__art,
.lmh-blob .lmh-blob__mouth,
.lmh-blob .lmh-eye {
  --lmh-depth: max(0, 3 - var(--z, 3));
  filter: blur(calc(var(--lmh-depth) * 0.2px)) contrast(calc(1 - var(--lmh-depth) * 0.04));
}

/* ---------------------------------------------------------------------------------------------------------------------
 * Ground layer: contact shadows + puddle reflections (between the plate and the characters)
 * ------------------------------------------------------------------------------------------------------------------ */

.lmh-ground-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lmh-ground {
  display: none;
}

/*
 * Same box as the character, built without transforms: a transform would isolate it and stop the shadow's
 * multiply blend from reaching the sand. Width and the 4% bottom clamp mirror the .lmh-blob rules above.
 */
@supports (width: 1cqw) {
  .lmh-ground {
    --lmh-bx: var(--x);
    --lmh-by: var(--y);
    --lmh-bs: var(--s);
    --lmh-gw: min(calc(var(--lmh-bs) * var(--lmh-sw) / 100), calc(var(--lmh-bs) * 1.68cqh));
    --lmh-gh: calc(var(--lmh-gw) / var(--lmh-art-ar));
    display: block;
    position: absolute;
    left: calc(var(--lmh-bx) * 1% - var(--lmh-gw) / 2);
    top: calc(min(calc(var(--lmh-by) * 1%), calc(96cqh - (100cqh - var(--lmh-sh)) * var(--lmh-fy))) - var(--lmh-gh));
    width: var(--lmh-gw);
    height: var(--lmh-gh);
  }
}

/* Contact shadow: anchored on the contact line (~98% down the art), never leans or squashes with the body */
.lmh-ground__shadow {
  position: absolute;
  left: 0;
  bottom: 1.8%;
  width: 100%;
  height: 0;
  opacity: 0.85;
  mix-blend-mode: multiply;
  transform-origin: 50% 0;
  will-change: transform, opacity;
}

/* Occlusion core: thin, dark and tight, right at the contact line */
.lmh-ground__shadow::before,
.lmh-ground__shadow::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  border-radius: 50%;
}

.lmh-ground__shadow::before {
  width: 60%;
  aspect-ratio: 8.5;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgb(70 40 15 / 0.62), rgb(70 40 15 / 0.42) 55%, rgb(70 40 15 / 0) 100%);
}

/* Wider, softer shadow, pushed slightly down-right (the sun is upper left) */
.lmh-ground__shadow::after {
  width: 108%;
  aspect-ratio: 4.6;
  translate: calc(-50% + 6%) calc(-50% + 14%);
  background: radial-gradient(closest-side, rgb(70 40 15 / 0.35), rgb(70 40 15 / 0.16) 55%, rgb(70 40 15 / 0) 100%);
}

/*
 * Puddle reflection: a live copy of the character (filled in by JS), mirrored about the contact line, faint, blurred,
 * warm-tinted, and faded out within ~15% of the character's height.
 */
.lmh-ground__reflection {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  filter: blur(1.5px) sepia(0.45) saturate(0.85) brightness(0.85);
  transform: translateY(calc(var(--lmh-reflect-y, 0) * 1%)) scaleY(-1);
  transform-origin: 50% 98.2%;
  -webkit-mask-image: linear-gradient(to top, transparent 1.2%, #000 1.8%, rgb(0 0 0 / 0.5) 9%, transparent 16.8%);
  mask-image: linear-gradient(to top, transparent 1.2%, #000 1.8%, rgb(0 0 0 / 0.5) 9%, transparent 16.8%);
}

.lmh-reflection__lean,
.lmh-reflection__bounce {
  position: relative;
  transform-origin: 50% 100%;
}

.lmh-ground__reflection .lmh-blob__art {
  pointer-events: none;
}

/* ---------------------------------------------------------------------------------------------------------------------
 * Layer 3: eyes (pupil + highlights + eyelid)
 * ------------------------------------------------------------------------------------------------------------------ */

.lmh-eye {
  position: absolute;
  left: calc(var(--ex) * 1%);
  top: calc(var(--ey) * 1%);
  width: calc(var(--es) * 1%);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
}

/* The pupil is clamped by JS to 70% of its free travel, so it never reaches the painted clay rim */
.lmh-eye__pupil {
  position: absolute;
  left: calc(50% - var(--ps) * 0.5%);
  top: calc(50% - var(--ps) * 0.5%);
  width: calc(var(--ps) * 1%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 72%, #2e2722, #15110f 62%);
  will-change: transform;
}

/* Very soft inner shadow on the top edge: the domed eyeball overhangs the pupil, so it sits inside the eye */
.lmh-eye__pupil::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.18) 22%, rgb(0 0 0 / 0) 42%);
}

/* Highlights are reflections of the scene's light (upper left): fixed to the eyeball, they don't follow the pupil */
.lmh-eye__glint {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 41% 37%, rgb(255 255 255 / 0.95) 0 7.5%, rgb(255 255 255 / 0) 9%),
    radial-gradient(circle at 34% 55%, rgb(255 255 255 / 0.9) 0 3.2%, rgb(255 255 255 / 0) 4.4%);
}

/* The lid is clipped to a circle slightly larger than the eye setting so it fully covers the painted white */
.lmh-eye__lidclip {
  position: absolute;
  inset: -8%;
  z-index: 2;
  border-radius: 50%;
  overflow: hidden;
}

.lmh-eye__lid {
  position: absolute;
  inset: -2%;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0) 42%, rgb(30 15 5 / 0.12) 82%, rgb(30 15 5 / 0.26) 91%, rgb(30 15 5 / 0.26)),
    var(--body);
  border-radius: 0 0 50% 50% / 0 0 22% 22%;
  transform: translateY(-105%);
}

/* ---------------------------------------------------------------------------------------------------------------------
 * "Don't leave" reaction: sad faces (.is-sad on the hero) + the speaker's bubble
 * ------------------------------------------------------------------------------------------------------------------ */

/* Frown patch over the painted smile, crossfaded in */
.lmh-blob__mouth {
  position: absolute;
  left: calc(var(--lmh-mouth-l) * 1%);
  top: calc(var(--lmh-mouth-t) * 1%);
  width: calc(var(--lmh-mouth-w) * 1%);
  height: auto;
  opacity: 0;
  transform: scaleY(0.6);
  transform-origin: 50% 55%;
  transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1);
  pointer-events: none;
}

/* Droopy lids: lowered and slanted down toward the outer corners */
.lmh-eye__droop {
  position: absolute;
  inset: -2%;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0) 42%, rgb(30 15 5 / 0.12) 82%, rgb(30 15 5 / 0.26) 91%, rgb(30 15 5 / 0.26)),
    var(--body);
  border-radius: 0 0 50% 50% / 0 0 22% 22%;
  transform: translateY(-105%) rotate(0deg);
  transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.5, 1);
}

.lmh.is-sad .lmh-blob__mouth {
  opacity: 1;
  transform: none;
}

.lmh.is-sad .lmh-eye--1 .lmh-eye__droop {
  transform: translateY(-70%) rotate(-16deg);
}

.lmh.is-sad .lmh-eye--2 .lmh-eye__droop {
  transform: translateY(-70%) rotate(16deg);
}

/*
 * Speech bubble: a cream clay sticker beside the speaker's head, tail pointing at it. It lives on the effects layer
 * (above the whole cast) and JS sets left/top next to the speaker, opening toward the middle of the hero (--left
 * for a speaker on the right half), so it stays clear of the header, the mascot and the screen edge.
 */
.lmh-bubble {
  position: absolute;
  left: 0;
  top: 0;
  translate: var(--lmh-bubble-shift, 0px) 0;
  transform-origin: -10% 50%;
  max-width: 12em;
  padding: 0.5em 0.85em 0.48em;
  border: 2.5px solid #17233a;
  border-radius: 1em;
  background: #fff9f0;
  box-shadow: 0 4px 0 #17233a, 0 8px 18px rgb(23 35 58 / 0.2);
  color: #17233a;
  font-family: var(--heading-font-family);
  font-weight: var(--lmh-headline-weight, 700);
  font-size: clamp(0.95rem, 0.7rem + 0.8vw, 1.45rem);
  line-height: 1.1;
  text-align: center;
  width: max-content;
  rotate: 4deg;
  pointer-events: none;
}

.lmh-bubble--left {
  translate: calc(-100% + var(--lmh-bubble-shift, 0px)) 0;
  transform-origin: 110% 50%;
  rotate: -4deg;
}

.lmh-bubble[hidden] {
  display: none;
}

/* Tail on the side facing the speaker */
.lmh-bubble::after {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 0.8em;
  height: 0.8em;
  translate: 55% -50%;
  rotate: 135deg;
  background: #fff9f0;
  border: solid #17233a;
  border-width: 0 2.5px 2.5px 0;
  border-bottom-right-radius: 0.2em;
}

.lmh-bubble--left::after {
  right: auto;
  left: 100%;
  translate: -55% -50%;
  rotate: -45deg;
}

@media (prefers-reduced-motion: reduce) {
  .lmh-blob__mouth,
  .lmh-eye__droop {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------------------------------------------------
 * Effects + text
 * ------------------------------------------------------------------------------------------------------------------ */

.lmh-scrim {
  display: none;
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--lmh-top) * 1.8);
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(rgb(var(--background-without-opacity) / var(--lmh-scrim-opacity)), rgb(var(--background-without-opacity) / 0));
}

.shopify-section:first-child .lmh-section[allow-transparent-header] .lmh-scrim {
  display: block;
}

.lmh-fx {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.lmh-drop {
  position: absolute;
  border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
  background:
    radial-gradient(circle at 34% 30%, rgb(255 255 255 / 0.45) 0 16%, rgb(255 255 255 / 0) 26%),
    var(--lmh-drop-color, #6b4426);
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

.lmh-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  padding-block: calc(var(--lmh-top) + 2rem) 2.5rem;
  padding-inline: var(--container-gutter);
  pointer-events: none;
}

.lmh-content__inner {
  width: min(34rem, 44%);
  margin-inline-start: max(0px, calc(6vw - var(--container-gutter)));
  color: rgb(var(--text-color));
  pointer-events: auto;
}

/* Eyebrow: a cream sticker, slightly tilted */
.lmh-content__subheading {
  margin: 0 0 1.1rem;
  line-height: 1;
}

.lmh-sticker {
  display: inline-block;
  padding: 0.55em 0.9em 0.5em;
  border: 2px solid #17233a;
  border-radius: 0.7em;
  background: #fff9f0;
  box-shadow: 0 3px 0 #17233a, 0 6px 14px rgb(23 35 58 / 0.18);
  color: #17233a;
  font-family: var(--text-font-family);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  rotate: -3deg;
}

/*
 * Bubbly headline: the heading font at its heaviest weight, lime fill, thick dark outline (paint-order keeps the
 * stroke behind the fill, so only its outer half shows: 0.12em stroke = ~0.06em outline) and an offset sticker
 * shadow. Size follows the screen width, capped by the free height under the header on short laptops and phones.
 */
.lmh-content__heading {
  --lmh-headline-size: calc(clamp(2.4rem, 1.2rem + 3.2vw, 4.4rem) * var(--text-heading-size-factor, 1));
  --lmh-free-height: calc(100vh - var(--announcement-bar-height, 0px) - var(--header-height, 0px));
  margin: 0;
  font-size: min(var(--lmh-headline-size), calc(var(--lmh-free-height) * 0.13));
  line-height: 1.08;
  text-wrap: balance;
}

@supports (height: 100svh) {
  .lmh-content__heading {
    --lmh-free-height: calc(100svh - var(--announcement-bar-height, 0px) - var(--header-height, 0px));
  }
}

.lmh-content__heading--md {
  --lmh-headline-size: calc(clamp(2rem, 1.1rem + 2.4vw, 3.4rem) * var(--text-heading-size-factor, 1));
}

.lmh-content__heading--xl {
  --lmh-headline-size: calc(clamp(2.8rem, 1.2rem + 4.2vw, 5.6rem) * var(--text-heading-size-factor, 1));
  line-height: 1.04;
}

.lmh-headline {
  font-family: var(--heading-font-family);
  font-weight: var(--lmh-headline-weight, 700);
  letter-spacing: 0.02em;
  color: #c4d96b;
  -webkit-text-stroke: 0.12em #17233a;
  paint-order: stroke fill;
  text-shadow: 0.03em 0.07em 0 #17233a, 0.03em 0.12em 0.18em rgb(23 35 58 / 0.3);
}

/* Highlight word: clay pink, tilted, with a gentle wobble */
.lmh-hl {
  display: inline-block;
  color: #f36881;
  rotate: -4deg;
  transform-origin: 50% 70%;
}

@media (prefers-reduced-motion: no-preference) {
  .lmh-hl {
    animation: lmh-wobble 3s ease-in-out infinite;
  }

  /* Hidden until JS has split the letters for the drop-in; shown anyway if the script never runs */
  .lmh-headline[data-lmh-pending] {
    opacity: 0;
    animation: lmh-reveal 0s linear 1.6s forwards;
  }
}

@keyframes lmh-wobble {
  0%, 100% { rotate: -4deg; }
  50% { rotate: -1.5deg; }
}

@keyframes lmh-reveal {
  to { opacity: 1; }
}

/* Split letters (added by JS): words never break, letters animate from their feet */
.lmh-word {
  display: inline-block;
  white-space: nowrap;
}

.lmh-letter {
  display: inline-block;
  transform-origin: 50% 90%;
  transition: scale 0.22s ease-out;
}

/* Subheading under the headline: plain DM Sans */
.lmh-content__lede {
  margin: 1rem 0 0;
  max-width: 30rem;
  font-family: var(--text-font-family);
  font-weight: var(--text-font-weight);
  font-size: calc(var(--text-lg) * 1.1);
  line-height: 1.45;
  color: rgb(var(--text-color));
}

.lmh-content__text {
  margin-top: 1.1rem;
  max-width: 30rem;
  font-family: var(--text-font-family);
  font-size: var(--text-lg);
  line-height: 1.55;
}

/* Soft white glow behind the plain hero text so the theme's navy stays readable (WCAG AA) on the saturated sky and
   the darker hills of the bundled plates. Colours and fonts are unchanged. Sized in em so it scales with each line. */
.lmh-content__lede,
.lmh-content__text {
  /* Stacked tight layers build a solid light ring right around the small letters, then fade out softly */
  text-shadow:
    0 0 0.08em #fff,
    0 0 0.16em #fff,
    0 0 0.25em #fff,
    0 0 0.25em #fff,
    0 0 0.45em #fff,
    0 0 0.9em rgb(255 255 255 / 0.8),
    0 0 1.6em rgb(255 255 255 / 0.45);
}

.lmh-content__text > :first-child { margin-top: 0; }
.lmh-content__text > :last-child { margin-bottom: 0; }

.lmh-content__actions {
  margin-top: 1.5rem;
}

/* Clay button: the theme's button (link, focus and colours intact) with a dark outline and an offset shadow that
   squishes down when pressed */
.lmh .lmh-content__actions .button {
  border: 2px solid #17233a;
  box-shadow: 0 4px 0 #17233a, 0 8px 16px rgb(23 35 58 / 0.2);
  transform-origin: 50% 100%;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.lmh .lmh-content__actions .button:not([disabled]):hover {
  /* Keep the clay look instead of the theme's colour wipe */
  color: rgb(var(--button-text-color));
  border-color: #17233a;
  background-position: var(--initial-background-position);
  background-size: 101% 101%, 0 101%;
  transform: translateY(-1px);
  box-shadow: 0 5px 0 #17233a, 0 10px 18px rgb(23 35 58 / 0.22);
}

.lmh .lmh-content__actions .button:not([disabled]):active {
  transform: translateY(3px) scale(1.04, 0.92);
  box-shadow: 0 1px 0 #17233a, 0 3px 8px rgb(23 35 58 / 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .lmh .lmh-content__actions .button {
    transition: none;
  }

  .lmh .lmh-content__actions .button:not([disabled]):active {
    transform: translateY(2px);
  }
}

/* Sound toggle (bottom-right corner, clear of the characters' feet) */
.lmh-sound {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgb(var(--text-color) / 0.14);
  border-radius: var(--rounded-full, 9999px);
  background: rgb(var(--background-without-opacity) / 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: rgb(var(--text-color));
  box-shadow: var(--shadow-sm, 0 2px 8px rgb(0 0 0 / 0.05));
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.lmh-sound[hidden] {
  display: none;
}

.lmh-sound:hover {
  background: rgb(var(--background-without-opacity) / 0.92);
}

.lmh-sound:active {
  transform: scale(0.94);
}

.lmh-sound:focus-visible {
  outline: 2px solid rgb(var(--text-color));
  outline-offset: 2px;
}

.lmh-sound svg {
  width: 18px;
  height: 18px;
}

.lmh-sound__off,
.lmh-sound.is-muted .lmh-sound__on {
  display: none;
}

.lmh-sound.is-muted .lmh-sound__off {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .lmh-sound {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------------------------------------------------
 * Play: mud ball (feed them), ^^ giggle eyes, microphone + motion buttons, "they hear you" panel
 * ------------------------------------------------------------------------------------------------------------------ */

.lmh-toys {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.lmh-mudball {
  --lmh-bx: var(--x);
  --lmh-by: var(--y);
  position: absolute;
  left: calc(var(--lmh-bx) * 1%);
  top: calc(var(--lmh-by) * 1%);
  width: max(30px, 2.4%);
  aspect-ratio: 1;
  translate: -50% -50%;
  padding: 0;
  border: 0;
  background: none;
  cursor: grab;
  pointer-events: auto;
  touch-action: none; /* dragging the ball never scrolls the page */
  -webkit-tap-highlight-color: transparent;
}

/* Bigger invisible grab area for fingers */
.lmh-mudball::before {
  content: "";
  position: absolute;
  inset: -10px;
}

.lmh-mudball:active {
  cursor: grabbing;
}

.lmh-mudball:focus-visible {
  outline: 3px solid #17233a;
  outline-offset: 4px;
  border-radius: 50%;
}

.lmh-mudball__ball,
.lmh-mudball-flying {
  display: block;
  border-radius: 50% 50% 46% 46% / 54% 54% 46% 46%;
  background:
    radial-gradient(circle at 34% 30%, rgb(255 255 255 / 0.55) 0 12%, rgb(255 255 255 / 0) 22%),
    radial-gradient(circle at 60% 72%, rgb(0 0 0 / 0.25), rgb(0 0 0 / 0) 55%),
    #6b4426;
  box-shadow: 0 3px 0 rgb(60 35 15 / 0.35), 0 6px 10px rgb(60 35 15 / 0.25);
}

.lmh-mudball__ball {
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
}

/* A little "pick me up" wobble so people notice it */
@media (prefers-reduced-motion: no-preference) {
  .lmh-mudball__ball {
    animation: lmh-mudball-wobble 3.6s ease-in-out infinite;
  }
}

@keyframes lmh-mudball-wobble {
  0%, 78%, 100% { transform: none; }
  84% { transform: translateY(-18%) scale(0.94, 1.08); }
  90% { transform: translateY(0) scale(1.1, 0.9); }
  95% { transform: translateY(-4%) scale(0.98, 1.03); }
}

.lmh-mudball.is-empty .lmh-mudball__ball {
  transform: scale(0);
  animation: none;
}

.lmh-mudball.is-refilling .lmh-mudball__ball {
  transition: transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}

/* The ball while it's being dragged or thrown: lives on the effects layer, above every character */
.lmh-mudball-flying {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  will-change: transform;
}

.lmh-burp {
  position: absolute;
  left: 0;
  top: 0;
  translate: -50% -50%;
  padding: 0.2em 0.55em 0.25em;
  border: 2px solid #17233a;
  border-radius: 0.8em;
  background: #fff9f0;
  box-shadow: 0 3px 0 #17233a;
  color: #5a3820;
  font-family: var(--heading-font-family);
  font-weight: var(--lmh-headline-weight, 700);
  font-size: clamp(0.85rem, 0.65rem + 0.5vw, 1.1rem);
  white-space: nowrap;
  pointer-events: none;
}

.lmh-burp__bubble {
  position: absolute;
  left: 0;
  top: 0;
  translate: -50% -50%;
  width: 18px;
  aspect-ratio: 1;
  border: 2px solid rgb(90 56 32 / 0.6);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / 0.8) 0 14%, rgb(255 255 255 / 0) 26%), rgb(139 93 59 / 0.25);
  pointer-events: none;
}

/* ^^ eyes (giggling, munching): a dark clay arc over a fully closed lid */
.lmh-eye__happy {
  position: absolute;
  left: 14%;
  top: 30%;
  z-index: 3;
  width: 72%;
  height: 46%;
  border: 0.16em solid #2a1d16;
  border-bottom: 0;
  border-color: #2a1d16 #2a1d16 transparent;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  opacity: 0;
  transition: opacity 0.08s;
}

.lmh-blob.is-giggle .lmh-eye__lid,
.lmh-ground.is-giggle .lmh-eye__lid {
  transform: translateY(-2%);
}

.lmh-blob.is-giggle .lmh-eye__happy,
.lmh-ground.is-giggle .lmh-eye__happy {
  opacity: 1;
}

/* Wide, surprised eyes (claps, shouts) */
.lmh-eye {
  transition: scale 0.18s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.lmh.is-startled .lmh-eye {
  scale: 1.16;
}

.lmh.is-startled .lmh-eye__pupil {
  scale: 0.7;
}

/* Microphone + motion buttons sit left of the sound button */
.lmh-mic {
  right: 64px;
}

.lmh-motion {
  right: 112px;
}

.lmh-mic[aria-pressed="true"] {
  background: #b9f22a;
  border-color: #17233a;
  color: #17233a;
}

/* Live input level: a ring that swells with the sound */
.lmh-mic__level {
  position: absolute;
  inset: -3px;
  border: 2px solid #17233a;
  border-radius: 50%;
  opacity: 0;
  transform: scale(calc(1 + var(--lmh-level, 0) * 0.5));
  pointer-events: none;
}

.lmh-mic[aria-pressed="true"] .lmh-mic__level {
  opacity: calc(0.25 + var(--lmh-level, 0) * 0.75);
}

.lmh-ears {
  position: absolute;
  right: 16px;
  bottom: 68px;
  z-index: 4;
  width: max-content;
  max-width: min(17rem, calc(100% - 32px));
  padding: 0.8rem 0.9rem 0.7rem;
  border: 2.5px solid #17233a;
  border-radius: 1rem;
  background: #fff9f0;
  box-shadow: 0 4px 0 #17233a, 0 10px 22px rgb(23 35 58 / 0.2);
  color: #17233a;
  rotate: -1.5deg;
}

.lmh-ears[hidden] {
  display: none;
}

.lmh-ears__title {
  margin: 0 0 0.5rem;
  font-family: var(--heading-font-family);
  font-weight: var(--lmh-headline-weight, 700);
  font-size: 1rem;
  line-height: 1.2;
}

.lmh-ears__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lmh-ears__chip {
  padding: 0.3em 0.65em;
  border: 2px solid #17233a;
  border-radius: 999px;
  background: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  transition: background-color 0.2s, transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.lmh-ears__chip.is-heard {
  background: #b9f22a;
  transform: scale(1.08) rotate(-2deg);
  transition-duration: 0.05s;
}

.lmh-ears__note {
  margin: 0.55rem 0 0;
  font-size: 0.75rem;
  opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
  .lmh-ears__chip,
  .lmh-eye {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------------------------------------------------
 * Portrait composition: phones and upright tablets
 * ------------------------------------------------------------------------------------------------------------------ */

@media screen and (max-width: 699px), screen and (max-aspect-ratio: 4/5) {
  /* The whole hero (ground, characters, sound button) must fit the first screen below the announcement bar and
     header, wherever the section is placed. With the transparent header (first section) the header overlaps the
     hero, so only the announcement bar is subtracted (the more specific rule above still applies). */
  .lmh-section {
    --lmh-offset: calc(var(--announcement-bar-height, 0px) + var(--header-height, 0px));
  }

  .lmh {
    --lmh-ar: var(--lmh-ar-m);
    --lmh-fx: var(--lmh-fx-m);
    --lmh-fy: var(--lmh-fy-m);
    height: max(420px, calc(100vh - var(--lmh-offset)));
    background:
      radial-gradient(110% 55% at 50% 15%, rgb(255 255 255 / 0.7), rgb(255 255 255 / 0) 60%),
      linear-gradient(180deg, #fff9f0 0%, #fff6dd 40%, #ffef9e 100%);
  }

  @supports (height: 100svh) {
    .lmh {
      height: max(420px, calc(100svh - var(--lmh-offset)));
    }
  }

  .lmh-blob,
  .lmh-ground {
    --lmh-bx: var(--mx);
    --lmh-by: var(--my);
    --lmh-bs: var(--ms);
  }

  .lmh-mudball {
    --lmh-bx: var(--mx);
    --lmh-by: var(--my);
    width: max(34px, 7%);
  }

  /* Compact listening panel, bottom-left: clear of the buttons and the mascot's column on the right */
  .lmh-ears {
    left: 16px;
    right: auto;
    bottom: 66px;
    max-width: min(15rem, calc(100% - 96px));
    padding: 0.6rem 0.7rem 0.55rem;
    rotate: 1deg;
  }

  .lmh-ears__title {
    margin-bottom: 0.4rem;
    font-size: 0.875rem;
  }

  .lmh-ears__list {
    gap: 0.3rem;
  }

  .lmh-ears__chip {
    padding: 0.2em 0.55em;
    font-size: 0.75rem;
  }

  .lmh-ears__note {
    margin-top: 0.4rem;
    font-size: 0.6875rem;
  }

  /* Phones keep their earlier look apart from the contact shadows: the puddle sits elsewhere on the portrait plate,
     so no reflections there, and no depth softening */
  .lmh-ground__reflection {
    display: none;
  }

  .lmh-blob .lmh-blob__art,
  .lmh-blob .lmh-blob__mouth,
  .lmh-blob .lmh-eye {
    filter: none;
  }

  .lmh-content {
    align-items: flex-start;
    justify-content: center;
    padding-block-start: calc(var(--lmh-top) + 1.75rem);
    text-align: center;
  }

  .lmh-content__inner {
    width: min(32rem, 100%);
    margin-inline: auto;
  }

  .lmh-content__subheading {
    margin-bottom: 0.8rem;
  }

  .lmh-sticker {
    font-size: var(--text-xs);
  }

  .lmh-content__heading,
  .lmh-content__heading--md {
    --lmh-headline-size: calc(clamp(1.9rem, 1.2rem + 3.4vw, 3rem) * var(--text-heading-size-factor, 1));
    line-height: 1.08;
  }

  .lmh-content__heading--xl {
    --lmh-headline-size: calc(clamp(2.1rem, 1.3rem + 3.8vw, 3.4rem) * var(--text-heading-size-factor, 1));
  }

  .lmh-content__lede {
    margin-top: 0.7rem;
    margin-inline: auto;
    font-size: var(--text-base);
  }

  .lmh-content__text {
    margin-top: 0.75rem;
    margin-inline: auto;
    font-size: var(--text-base);
  }

  .lmh-content__actions {
    margin-top: 1.1rem;
  }
}

/* Short phones (e.g. an iPhone SE with the browser toolbars showing): a tighter text stack so it never reaches the
   characters. Taller phones are unaffected. */
@media screen and (max-width: 699px) and (max-height: 620px), screen and (max-aspect-ratio: 4/5) and (max-height: 620px) {
  .lmh-content {
    padding-block-start: calc(var(--lmh-top) + 0.75rem);
  }

  .lmh-content__subheading {
    margin-bottom: 0.55rem;
  }

  .lmh-sticker {
    font-size: 0.625rem;
  }

  .lmh-content__heading,
  .lmh-content__heading--md,
  .lmh-content__heading--xl {
    --lmh-headline-size: calc(1.75rem * var(--text-heading-size-factor, 1));
    line-height: 1.04;
  }

  .lmh-content__lede {
    margin-top: 0.4rem;
    font-size: var(--text-sm);
    line-height: 1.35;
  }

  .lmh-content__actions {
    margin-top: 0.8rem;
  }

  .lmh .lmh-content__actions .button {
    padding-block: 0.5rem;
  }
}

/* ---------------------------------------------------------------------------------------------------------------------
 * Eye placement guides (markup only exists when the setting is on, inside the theme editor)
 * ------------------------------------------------------------------------------------------------------------------ */

.lmh-guide {
  display: none;
}

.lmh[data-guides] .lmh-guide {
  display: block;
  pointer-events: none;
}

.lmh[data-guides] .lmh-guide--box {
  position: absolute;
  inset: 0;
  outline: 1.5px dashed #ff2d75;
  outline-offset: -1px;
}

.lmh[data-guides] .lmh-eye {
  outline: 2px solid #ff2d75;
  outline-offset: 0;
}

.lmh[data-guides] .lmh-guide--eye {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 50%;
  background:
    linear-gradient(#ff2d75, #ff2d75) 50% 50% / 1px 100% no-repeat,
    linear-gradient(#ff2d75, #ff2d75) 50% 50% / 100% 1px no-repeat;
  opacity: 0.8;
}

.lmh[data-guides] .lmh-guide--anchor {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 30;
  width: 9px;
  height: 9px;
  translate: -50% 50%;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #ff2d75;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.3);
}

.lmh[data-guides] .lmh-guide--label {
  position: absolute;
  left: 50%;
  bottom: 100%;
  z-index: 30;
  display: grid;
  gap: 1px;
  translate: -50% -6px;
  padding: 4px 7px;
  border-radius: 6px;
  background: rgb(23 35 58 / 0.9);
  color: #fff;
  font: 500 10px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.lmh[data-guides] .lmh-guide--label strong {
  font-weight: 700;
}

.lmh[data-guides] .lmh-guide__more {
  display: none;
}

/* The selected character shows its full readout, for whichever layout is currently active */
.lmh[data-guides] .lmh-blob.is-selected .lmh-guide__more {
  display: block;
}

.lmh[data-guides] .lmh-blob.is-selected .lmh-guide__mobile {
  display: none;
}

@media screen and (max-width: 699px), screen and (max-aspect-ratio: 4/5) {
  .lmh[data-guides] .lmh-blob.is-selected .lmh-guide__desktop {
    display: none;
  }

  .lmh[data-guides] .lmh-blob.is-selected .lmh-guide__mobile {
    display: block;
  }
}

.lmh[data-guides] .lmh-blob.is-selected {
  z-index: 20;
}

.lmh[data-guides] .lmh-blob.is-selected .lmh-guide--box,
.lmh[data-guides] .lmh-blob.is-selected .lmh-eye {
  outline-color: #00a2ff;
}