/*
 * The home page's message (welcome/show): a gift box drawn in three faces, the headline, one
 * WhatsApp call to action, and a few brand-coloured shapes floating round the card.
 */

.mx-home {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mx-home__gift {
  width: clamp(96px, 11vw, 124px);
  height: auto;
  margin-bottom: var(--mx-space-md);
  overflow: visible;
}

.mx-home__ribbon {
  fill: var(--mx-color-gold);
}

.mx-home__ribbon--shade {
  fill: var(--mx-color-gold-deep);
}

.mx-home__title {
  max-width: 13ch;
  margin-top: var(--mx-space-md);
  color: var(--mx-color-navy);
  font-family: var(--mx-font-display);
  font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.mx-home__lead {
  max-width: 40ch;
  margin-top: var(--mx-space-md);
  color: var(--mx-color-muted);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.6;
  text-wrap: pretty;
}

/* One clear action: a navy pill with the icon in a white disc. */
.mx-home__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  margin-top: var(--mx-space-xl);
  padding: 8px 22px 8px 8px;
  font-size: 0.9375rem;
  white-space: nowrap;
  border-radius: var(--mx-rounded-pill);
  background: var(--mx-color-navy);
  box-shadow: 0 24px 40px -18px color-mix(in srgb, var(--mx-color-navy) 70%, transparent);
  color: var(--mx-color-on-navy);
  font-weight: 600;
  text-decoration: none;
  transition: translate 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease;
}

.mx-home__cta:hover {
  translate: 0 -2px;
  box-shadow: 0 30px 46px -18px color-mix(in srgb, var(--mx-color-navy) 75%, transparent);
}

.mx-home__cta-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--mx-rounded-pill);
  background: var(--mx-color-whatsapp);
}

.mx-home__cta-icon svg,
.mx-home__cta-arrow {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mx-home__cta-icon svg {
  width: 26px;
  height: 26px;
  color: var(--mx-color-on-navy);
  stroke-width: 1.8;
}

.mx-home__handset {
  fill: currentColor;
  stroke: none;
}

.mx-home__cta-arrow {
  width: 18px;
  height: 18px;
  color: color-mix(in srgb, var(--mx-color-on-navy) 70%, transparent);
  stroke-width: 2;
}

/* Floating shapes: each leans away from the pointer by its --depth (drift controller). */

.mx-home__shape {
  --depth: 1;
  position: absolute;
  height: auto;
  overflow: visible;
  translate: calc(var(--px) * var(--depth) * -36px) calc(var(--py) * var(--depth) * -36px);
  pointer-events: none;
}

.mx-home__gloss {
  stroke: var(--mx-color-surface);
  stroke-opacity: 0.45;
}

/* On phones the shapes keep to the edges, clear of the copy and the button. */
.mx-home__shape--arc {
  --depth: 1.2;
  top: 172px;
  left: -16px;
  width: 52px;
  rotate: 128deg;
  transform-origin: center;
  scale: 1 0.82;
}

.mx-home__shape--wave {
  --depth: 0.8;
  display: none;
  rotate: -28deg;
}

.mx-home__shape--orb {
  --depth: 0.5;
  top: 92px;
  right: 8%;
  width: 26px;
}

.mx-home__shape--bowl {
  --depth: 1.5;
  right: -26px;
  bottom: -36px;
  width: 96px;
  rotate: -18deg;
  filter: drop-shadow(0 16px 18px color-mix(in srgb, var(--mx-color-navy) 30%, transparent));
}

/* Gradient stops, from the tokens. */
.mx-home__stop--navy { stop-color: var(--mx-color-navy); }
.mx-home__stop--navy-deep { stop-color: color-mix(in oklab, var(--mx-color-navy) 80%, var(--mx-color-ink)); }
.mx-home__stop--navy-mid { stop-color: color-mix(in oklab, var(--mx-color-navy) 60%, var(--mx-color-info)); }
.mx-home__stop--navy-light { stop-color: color-mix(in oklab, var(--mx-color-info) 80%, var(--mx-color-surface)); }
.mx-home__stop--gold { stop-color: var(--mx-color-gold); }
.mx-home__stop--gold-deep { stop-color: var(--mx-color-gold-deep); }
.mx-home__stop--gold-light { stop-color: var(--gold-light); }
.mx-home__stop--gold-tint { stop-color: var(--mx-color-gold-tint); }
.mx-home__stop--cream { stop-color: var(--mx-color-surface); }
.mx-home__stop--shadow { stop-color: var(--mx-color-navy); stop-opacity: 0.22; }
.mx-home__stop--clear { stop-color: var(--mx-color-navy); stop-opacity: 0; }

@media (min-width: 768px) {
  /* Room for two lines: "Something Amazing / is Coming Soon". */
  .mx-home__title {
    max-width: 18ch;
  }

  .mx-home__shape--arc {
    top: auto;
    bottom: 10%;
    left: 5%;
    width: 72px;
  }

  .mx-home__shape--wave {
    display: block;
    right: 7%;
    bottom: 13%;
    width: 80px;
  }

  .mx-home__shape--orb {
    top: 18%;
    right: 14%;
    width: 34px;
  }

  .mx-home__shape--bowl {
    right: -40px;
    bottom: -44px;
    width: 128px;
  }
}

@media (min-width: 1024px) {
  .mx-home__shape--arc {
    bottom: 22%;
    left: 15%;
    width: 84px;
  }

  .mx-home__shape--wave {
    right: 17%;
    bottom: 24%;
    width: 96px;
  }
}

/* Motion: the gift drops onto the card, the copy rises, then the shapes float. */

@media (prefers-reduced-motion: no-preference) {
  .mx-home__gift {
    animation:
      mx-home-arrive 900ms cubic-bezier(0.34, 1.4, 0.64, 1) 350ms both,
      mx-home-float 6s ease-in-out 1.3s infinite;
  }

  .mx-home__title,
  .mx-home__lead,
  .mx-home__cta {
    animation: mx-home-rise 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .mx-home__title { animation-delay: 500ms; }
  .mx-home__lead { animation-delay: 600ms; }
  .mx-home__cta { animation-delay: 700ms; }

  .mx-home__shape {
    animation:
      mx-home-arrive 900ms cubic-bezier(0.34, 1.4, 0.64, 1) var(--arrive, 700ms) both,
      mx-home-float var(--float, 7s) ease-in-out 1.6s infinite;
  }

  .mx-home__shape--arc { --arrive: 700ms; --float: 7s; }
  .mx-home__shape--wave { --arrive: 820ms; --float: 8.5s; }
  .mx-home__shape--orb { --arrive: 900ms; --float: 6s; }
  .mx-home__shape--bowl { --arrive: 1s; --float: 9s; }
}

@keyframes mx-home-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

@keyframes mx-home-arrive {
  from {
    opacity: 0;
    transform: scale(0.6) translateY(16px);
  }
}

@keyframes mx-home-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(3deg); }
}