/*
 * Luv, Mud — "Join the Mud Club" popup (sections/luvmud-club-popup.liquid, assets/luvmud-club.js)
 *
 * A full-viewport transparent <dialog> centres a "stage": three mini characters peek over the top edge of a clay sign
 * (the card covers their lower half) and grip it with little clay paws drawn in front of the card. Phones get a bottom
 * sheet. Motion: entrance peek, idle bob, a hop when the email becomes valid, a party jump + mud burst on success, a sad
 * sink when dismissed. Reduced motion: a plain fade.
 */

.lmc-root {
  display: contents;
}

.lmc,
.lmc *,
.lmc *::before,
.lmc *::after {
  box-sizing: border-box;
}

html:has(dialog.lmc[open]) {
  overflow: hidden;
}

.lmc {
  --lmc-ink: #17233a;
  --lmc-cream: #fff9f0;
  --lmc-lime: #b9f22a;
  --lmc-lime-soft: #c4d96b;
  --lmc-pink: #f36881;
  --lmc-orange: #fb7e3b;
  --lmc-teal: #64bfc2;
  --lmc-blue: #5993f1;
  --lmc-mud: #8b5d3b;
  --lmc-top: 86px; /* room above the card for the peeking heads */
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 24px 16px;
  border: 0;
  background: transparent;
  color: var(--lmc-ink);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-tap-highlight-color: transparent;
}

.lmc[open] {
  display: grid;
  place-items: center;
}

.lmc::backdrop {
  background: rgb(23 35 58 / 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: opacity 0.4s ease;
}

.lmc.is-closing::backdrop {
  opacity: 0;
}

.lmc__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Stage: crew behind, card, paws in front --------------------------------------------------------------------- */

.lmc__stage {
  position: relative;
  width: min(100%, 30rem);
  padding-top: var(--lmc-top);
  rotate: -1.2deg;
}

.lmc__crew,
.lmc__paws {
  position: absolute;
  top: var(--lmc-top);
  left: 0;
  right: 0;
  height: 0;
  pointer-events: none;
}

.lmc__crew {
  z-index: 0;
  pointer-events: auto; /* clicks on the heads are not backdrop clicks */
}

.lmc__paws {
  z-index: 2;
}

.lmc__buddy,
.lmc__pawpair {
  --bw: 88px;
  --x: 22%;
  position: absolute;
}

.lmc__buddy {
  left: calc(var(--x) - var(--bw) / 2);
  bottom: calc(var(--bw) * var(--hide, -0.22));
  width: var(--bw);
}

.lmc__buddy--pink,
.lmc__pawpair:nth-child(1) {
  --x: 21%;
  --bw: 86px;
  --paw: var(--lmc-pink);
}

.lmc__buddy--blue,
.lmc__pawpair:nth-child(2) {
  --x: 50%;
  --bw: 100px;
  --paw: var(--lmc-blue);
}

.lmc__buddy--orange,
.lmc__pawpair:nth-child(3) {
  --x: 77%;
  --bw: 88px;
  --paw: var(--lmc-orange);
}

.lmc__buddy--pink { rotate: -7deg; --hide: -0.15; }
.lmc__buddy--orange { rotate: 6deg; }

.lmc__hop {
  display: block;
  transform-origin: 50% 100%;
}

.lmc__char {
  width: 100%;
}

/* Paws: two clay mittens per character, gripping the sign's top edge */
.lmc__pawpair {
  left: var(--x);
  top: 0;
  width: 0;
  height: 0;
}

.lmc__paw {
  position: absolute;
  left: calc(var(--bw) * -0.42);
  top: 0;
  width: calc(var(--bw) * 0.25);
  height: calc(var(--bw) * 0.18);
  translate: -50% -50%;
  rotate: -14deg;
  border-radius: 50% 50% 46% 46% / 62% 62% 40% 40%;
  background:
    radial-gradient(ellipse at 38% 28%, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0) 52%),
    linear-gradient(180deg, rgb(255 255 255 / 0), rgb(40 15 0 / 0.18)),
    var(--paw);
  box-shadow: 0 2px 0 rgb(23 35 58 / 0.28), inset 0 -2px 1px rgb(40 15 0 / 0.14);
}

.lmc__paw + .lmc__paw {
  left: calc(var(--bw) * 0.42);
  rotate: 14deg;
}

/* little finger creases */
.lmc__paw::before {
  content: "";
  position: absolute;
  left: 30%;
  right: 30%;
  bottom: 12%;
  height: 34%;
  background: linear-gradient(90deg, transparent 31%, rgb(40 15 0 / 0.22) 31% 38%, transparent 38% 62%, rgb(40 15 0 / 0.22) 62% 69%, transparent 69%);
  border-radius: 2px;
}

/* --- Card (the clay sign) ---------------------------------------------------------------------------------------- */

.lmc__card {
  position: relative;
  z-index: 1;
  padding: 2.3rem 2rem 1.4rem;
  border: 3px solid var(--lmc-ink);
  border-radius: 30px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgb(255 255 255 / 0.75), rgb(255 255 255 / 0) 60%),
    rgb(var(--background-without-opacity, 255 249 240));
  box-shadow: 0 7px 0 var(--lmc-ink), 0 24px 48px rgb(23 35 58 / 0.3);
  color: rgb(var(--text-color, 23 35 58));
  text-align: center;
}

.lmc__card:focus {
  outline: none;
}

.lmc__content {
  position: relative;
  z-index: 1;
}

.lmc__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2.5px solid var(--lmc-ink);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 0 var(--lmc-ink);
  color: var(--lmc-ink);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.15s ease;
}

.lmc__close:hover {
  transform: rotate(90deg) scale(1.06);
}

.lmc__close:active {
  transform: translateY(2px) scale(0.96);
  box-shadow: 0 1px 0 var(--lmc-ink);
}

.lmc :focus-visible {
  outline: 3px solid var(--lmc-blue);
  outline-offset: 3px;
}

.lmc .lmc__card:focus,
.lmc .lmc__card:focus-visible {
  outline: none;
}

/* Decorations */
.lmc__sprinkle {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--lmc-ink);
  border-radius: 50%;
  pointer-events: none;
}

.lmc__sprinkle--1 { top: 20px; left: 22px; background: var(--lmc-teal); }
.lmc__sprinkle--2 { top: 46px; left: 44px; width: 9px; height: 9px; background: var(--lmc-lime); }
.lmc__sprinkle--3 { right: 26px; bottom: 30px; width: 12px; height: 12px; background: var(--lmc-pink); }

.lmc__splat {
  position: absolute;
  left: -16px;
  bottom: -18px;
  width: 104px;
  height: auto;
  filter: drop-shadow(0 2px 0 rgb(23 35 58 / 0.3));
  rotate: -6deg;
  pointer-events: none;
}

/* --- Content ----------------------------------------------------------------------------------------------------- */

.lmc__eyebrow {
  margin: 0 0 0.85rem;
  line-height: 1;
}

.lmc__sticker {
  display: inline-block;
  padding: 0.5em 0.85em 0.45em;
  border: 2px solid var(--lmc-ink);
  border-radius: 0.7em;
  background: var(--lmc-pink);
  box-shadow: 0 3px 0 var(--lmc-ink);
  color: #fff;
  font-family: var(--text-font-family);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  rotate: -4deg;
}

.lmc__heading {
  margin: 0 auto;
  max-width: 13em;
  font-family: var(--heading-font-family);
  font-weight: var(--lmc-word-weight, 700);
  font-size: clamp(1.85rem, 1.45rem + 1.1vw, 2.45rem);
  line-height: 1.12;
  letter-spacing: 0.02em;
  text-transform: none;
  text-wrap: balance;
  color: var(--lmc-lime-soft);
  -webkit-text-stroke: 0.12em var(--lmc-ink);
  paint-order: stroke fill;
  text-shadow: 0.03em 0.07em 0 var(--lmc-ink);
}

.lmc__w {
  display: inline-block;
  rotate: -2deg;
  translate: 0 0.02em;
}

.lmc__w:nth-child(even) {
  rotate: 2deg;
  translate: 0 -0.04em;
}

.lmc__w:nth-child(3n) {
  rotate: -1deg;
}

.lmc__w--hl {
  color: var(--lmc-pink);
  font-size: 1.12em;
}

.lmc__w--emoji {
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.lmc__text {
  max-width: 30ch;
  margin: 0.7rem auto 0;
  font-family: var(--text-font-family);
  font-size: 1rem;
  line-height: 1.45;
  color: rgb(var(--text-color, 23 35 58) / 0.82);
}

/* Form */
.lmc__form {
  margin-top: 1.25rem;
}

.lmc__row {
  display: flex;
  gap: 10px;
}

.lmc__field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: block;
}

.lmc__input {
  width: 100%;
  height: 54px;
  margin: 0;
  padding: 0 44px 0 20px;
  border: 2.5px solid var(--lmc-ink);
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 3px 0 rgb(23 35 58 / 0.08);
  color: var(--lmc-ink);
  font-family: var(--text-font-family);
  font-size: 16px; /* no zoom on iOS */
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow 0.2s ease;
}

.lmc__input::placeholder {
  color: rgb(23 35 58 / 0.42);
}

.lmc__input:focus,
.lmc__input:focus-visible {
  outline: none;
  box-shadow: inset 0 3px 0 rgb(23 35 58 / 0.08), 0 0 0 4px rgb(100 191 194 / 0.55);
}

.lmc__input[aria-invalid="true"] {
  border-color: #d93a5b;
}

.lmc__tick {
  position: absolute;
  top: 50%;
  right: 13px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border: 2px solid var(--lmc-ink);
  border-radius: 50%;
  background: var(--lmc-lime);
  color: var(--lmc-ink);
  transform: scale(0);
  transition: transform 0.3s cubic-bezier(0.3, 1.8, 0.5, 1);
  pointer-events: none;
}

.lmc__field.is-valid .lmc__tick {
  transform: scale(1);
}

.lmc__submit {
  flex: 0 0 auto;
  height: 54px;
  margin: 0;
  padding: 0 1.4rem;
  border: 2.5px solid var(--lmc-ink);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 0%, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0) 60%),
    var(--lmc-lime);
  box-shadow: 0 4px 0 var(--lmc-ink), 0 8px 16px rgb(23 35 58 / 0.2);
  color: var(--lmc-ink);
  font-family: var(--heading-font-family);
  font-weight: var(--lmc-word-weight, 700);
  font-size: 1.08rem;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transform-origin: 50% 100%;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.lmc__submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 0 var(--lmc-ink), 0 10px 18px rgb(23 35 58 / 0.22);
}

.lmc__submit:active {
  transform: translateY(3px) scale(1.04, 0.92);
  box-shadow: 0 1px 0 var(--lmc-ink), 0 3px 8px rgb(23 35 58 / 0.18);
}

.lmc__submit[aria-busy="true"] {
  cursor: progress;
}

.lmc__submit[aria-busy="true"] .lmc__submit-label {
  opacity: 0.6;
}

.lmc__submit--done {
  margin-top: 1.25rem;
  padding: 0 2rem;
}

.lmc__nope {
  margin: 0.7rem 0 0;
  padding: 0.5rem 0.9rem;
  border: 0;
  background: none;
  color: rgb(var(--text-color, 23 35 58) / 0.62);
  font-family: var(--text-font-family);
  font-size: 0.875rem;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: rgb(23 35 58 / 0.3);
  text-underline-offset: 4px;
  cursor: pointer;
}

.lmc__nope:hover {
  color: var(--lmc-ink);
}

.lmc__error {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.85rem;
  border: 2px solid var(--lmc-pink);
  border-radius: 16px;
  background: #ffe6ea;
  color: var(--lmc-ink);
  font-family: var(--text-font-family);
  font-size: 0.875rem;
  line-height: 1.35;
  text-align: left;
}

.lmc__error-blob {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--lmc-ink);
  border-radius: 50% 45% 55% 50%;
  background: var(--lmc-pink);
  color: #fff;
  font-family: var(--heading-font-family);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
}

/* Success coupon */
.lmc__coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.85rem;
  margin: 1.1rem auto 0;
  padding: 0.75rem 1rem;
  border: 2.5px dashed var(--lmc-ink);
  border-radius: 18px;
  background: #fff1a8;
  rotate: 1.5deg;
}

.lmc__coupon-label {
  flex-basis: 100%;
  font-family: var(--text-font-family);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(23 35 58 / 0.7);
}

.lmc__code {
  padding: 0;
  background: none;
  color: var(--lmc-ink);
  font-family: var(--heading-font-family);
  font-weight: var(--lmc-word-weight, 700);
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  word-break: break-all;
  user-select: all;
}

.lmc__copy {
  height: 36px;
  padding: 0 1rem;
  border: 2px solid var(--lmc-ink);
  border-radius: 999px;
  background: var(--lmc-teal);
  box-shadow: 0 3px 0 var(--lmc-ink);
  color: var(--lmc-ink);
  font-family: var(--heading-font-family);
  font-weight: var(--lmc-word-weight, 700);
  font-size: 0.9rem;
  cursor: pointer;
}

.lmc__copy:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--lmc-ink);
}

/* --- Mud / confetti burst ---------------------------------------------------------------------------------------- */

.lmc__burst {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

.lmc__drop {
  position: absolute;
  left: var(--ox);
  top: var(--oy);
  width: var(--s);
  height: var(--s);
  border: 2px solid var(--lmc-ink);
  border-radius: 50%;
  background: var(--c);
  opacity: 0;
  animation: lmc-drop var(--d, 1.2s) cubic-bezier(0.2, 0.6, 0.35, 1) forwards;
  animation-delay: var(--delay, 0s);
}

.lmc__drop--blob { border-radius: 58% 42% 55% 45% / 50% 60% 40% 50%; }
.lmc__drop--chip { height: calc(var(--s) * 0.55); border-radius: 4px; }
.lmc__drop--mud { border-color: rgb(23 35 58 / 0.6); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }

@keyframes lmc-drop {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.2) rotate(0); }
  45% { opacity: 1; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--r)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx) * 1.2), calc(-50% + var(--dy) + 190px)) scale(0.85) rotate(calc(var(--r) * 2)); }
}

/* --- Motion ------------------------------------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  .lmc[open]::backdrop {
    animation: lmc-fade 0.35s ease both;
  }

  .lmc[open] .lmc__card {
    animation: lmc-card-in 0.6s cubic-bezier(0.3, 1.35, 0.5, 1) both;
  }

  .lmc[open] .lmc__buddy {
    animation: lmc-peek 0.65s cubic-bezier(0.3, 1.55, 0.5, 1) both;
    animation-delay: calc(0.3s + var(--i) * 0.12s);
  }

  .lmc[open] .lmc__pawpair {
    animation: lmc-paw 0.42s cubic-bezier(0.3, 1.8, 0.5, 1) both;
    animation-delay: calc(0.52s + var(--i) * 0.12s);
  }

  .lmc[open] .lmc__w {
    animation: lmc-word 0.5s cubic-bezier(0.3, 1.7, 0.5, 1) both;
    animation-delay: calc(0.18s + var(--w) * 0.06s);
  }

  .lmc__hop {
    animation: lmc-bob 2.8s ease-in-out infinite;
    animation-delay: calc(var(--i) * -0.9s);
  }

  .lmc__buddy.is-hop .lmc__hop,
  .lmc__pawpair.is-hop .lmc__paw {
    animation: lmc-hop 0.6s cubic-bezier(0.3, 1.4, 0.5, 1) 1;
    animation-delay: calc(var(--i) * 0.08s);
  }

  .lmc.is-party .lmc__hop,
  .lmc.is-party .lmc__paw {
    animation: lmc-jump 0.62s cubic-bezier(0.3, 1.2, 0.5, 1) 5;
    animation-delay: calc(var(--i) * 0.13s);
  }

  /* Dismissed: a sad beat, then everyone sinks and the sign drops away */
  .lmc.is-closing .lmc__buddy {
    animation: lmc-sink 0.36s 0.2s cubic-bezier(0.5, 0, 0.8, 0.4) both;
  }

  .lmc.is-closing .lmc__pawpair {
    animation: lmc-paw-out 0.2s 0.18s ease-in both;
  }

  .lmc.is-closing .lmc__card {
    animation: lmc-card-out 0.32s 0.34s ease-in both;
  }

  .lmc.is-closing .lmc__hop,
  .lmc.is-closing .lmc__paw {
    animation: none;
  }
}

@keyframes lmc-fade {
  from { opacity: 0; }
}

@keyframes lmc-card-in {
  from { opacity: 0; transform: translateY(46px) scale(0.88) rotate(3deg); }
  40% { opacity: 1; }
}

@keyframes lmc-card-out {
  to { opacity: 0; transform: translateY(40px) scale(0.92) rotate(-2deg); }
}

@keyframes lmc-peek {
  from { transform: translateY(105%); }
}

@keyframes lmc-sink {
  to { transform: translateY(105%); }
}

@keyframes lmc-paw {
  from { opacity: 0; transform: translateY(10px) scale(0.2); }
}

@keyframes lmc-paw-out {
  to { opacity: 0; transform: translateY(8px) scale(0.3); }
}

@keyframes lmc-word {
  from { opacity: 0; transform: translateY(0.35em) scale(0.4); }
}

@keyframes lmc-bob {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50% { transform: translateY(-3px) scale(0.985, 1.015); }
}

@keyframes lmc-hop {
  0% { transform: translateY(0) scale(1, 1); }
  18% { transform: translateY(2px) scale(1.08, 0.9); }
  48% { transform: translateY(-20px) scale(0.94, 1.07); }
  76% { transform: translateY(1px) scale(1.06, 0.93); }
  100% { transform: translateY(0) scale(1, 1); }
}

@keyframes lmc-jump {
  0% { transform: translateY(0) scale(1, 1); }
  15% { transform: translateY(3px) scale(1.1, 0.88); }
  50% { transform: translateY(-30px) scale(0.92, 1.1) rotate(-4deg); }
  80% { transform: translateY(1px) scale(1.07, 0.92); }
  100% { transform: translateY(0) scale(1, 1); }
}

@media (prefers-reduced-motion: reduce) {
  .lmc[open] .lmc__stage {
    animation: lmc-fade 0.2s ease both;
  }

  .lmc .lmc__stage {
    transition: opacity 0.2s ease;
  }

  .lmc.is-closing .lmc__stage {
    opacity: 0;
  }

  .lmc__close,
  .lmc__submit,
  .lmc__tick,
  .lmc__input {
    transition: none;
  }

  .lmc__burst {
    display: none;
  }
}

/* --- Phones: bottom sheet ---------------------------------------------------------------------------------------- */

@media screen and (max-width: 699px) {
  .lmc {
    --lmc-top: 76px;
    padding: 16px 16px max(16px, env(safe-area-inset-bottom));
  }

  .lmc[open] {
    place-items: end center;
  }

  .lmc__stage {
    width: 100%;
    max-width: 30rem;
    rotate: none;
  }

  .lmc__buddy--pink, .lmc__pawpair:nth-child(1) { --bw: 76px; --x: 20%; }
  .lmc__buddy--blue, .lmc__pawpair:nth-child(2) { --bw: 88px; }
  .lmc__buddy--orange, .lmc__pawpair:nth-child(3) { --bw: 78px; --x: 76%; }

  .lmc__card {
    padding: 2rem 1.25rem 1rem;
    border-radius: 26px;
  }

  .lmc__heading {
    font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.1rem);
  }

  .lmc__text {
    font-size: 0.95rem;
  }

  .lmc__splat {
    width: 84px;
  }
}

@media screen and (max-width: 699px) and (prefers-reduced-motion: no-preference) {
  .lmc[open] .lmc__card {
    animation-name: lmc-sheet-in;
  }

  .lmc.is-closing .lmc__card {
    animation-name: lmc-sheet-out;
  }
}

@keyframes lmc-sheet-in {
  from { opacity: 0; transform: translateY(60%); }
  30% { opacity: 1; }
}

@keyframes lmc-sheet-out {
  to { opacity: 0; transform: translateY(70%); }
}

@media screen and (max-width: 479px) {
  .lmc__row {
    flex-direction: column;
  }

  .lmc__submit {
    width: 100%;
  }
}

/* Short screens (small laptops, phones in landscape) */
@media screen and (max-height: 640px) {
  .lmc {
    --lmc-top: 72px;
    padding-block: 12px;
  }

  .lmc__card {
    padding-top: 1.8rem;
    padding-bottom: 1rem;
  }

  .lmc__eyebrow {
    margin-bottom: 0.6rem;
  }

  .lmc__form {
    margin-top: 1rem;
  }
}