/* The home page (marketing/pages/home). */

/* Hero: a party photo under the brand gradient, phones rising from the bottom edge */

.home-hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100svh;
  padding: calc(var(--mk-header-height) + clamp(48px, 9vh, 120px)) 0 0;
  background:
    linear-gradient(rgb(0 0 0 / 0.5), rgb(0 63 59 / 0.5)),
    url("/assets/marketing/shapes/noise-b54d75fd.avif") center / cover no-repeat,
    url("/assets/marketing/home/hero-background-be6b3718.avif") center top / cover no-repeat,
    var(--mk-forest);
}
.home-hero::before { display: none; }
.home-hero__line { top: 0; left: 50%; width: min(1100px, 120vw); translate: -50% 0; opacity: 0.7; }
.home-hero__content { gap: 24px; max-width: 900px; }
.home-hero__content .mk-display { font-weight: 400; letter-spacing: -0.04em; line-height: 1.15; }
.home-hero__tag { font-size: 0.875rem; font-weight: 500; }
.home-hero__trust { display: grid; gap: 10px; justify-items: center; font-size: 1rem; }
.home-hero__trust img { width: 100px; height: auto; }
.home-hero__media { position: relative; z-index: 1; display: flex; justify-content: center; margin-top: clamp(32px, 5vh, 56px); padding-inline: var(--mk-gutter); }
.home-hero__image { display: block; width: min(651px, 100%); margin-bottom: -2px; }

/* Moments: teal-framed photo strips tilted around the copy */

.home-frame { position: relative; padding: clamp(10px, 1.4vw, 20px); border-radius: clamp(12px, 1.6vw, 20px); background: var(--mk-teal); list-style: none; }
.home-frame img { display: block; width: 100%; height: auto; border-radius: clamp(6px, 0.8vw, 10px); }

.home-moments > .mk-container { display: grid; gap: clamp(32px, 5vw, 56px); }
.home-moments__row { display: flex; justify-content: space-between; align-items: center; gap: clamp(16px, 6vw, 96px); }
.home-moments__row .home-frame { width: min(46%, 580px); }
.home-frame--tilt-start { rotate: -8deg; }
.home-frame--tilt-end { rotate: 8deg; }
.home-moments__copy { margin-block: 0; }
.home-moments__copy .mk-h2 { font-weight: 400; }
.home-moments__tag { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; }

/* Every party: the section heading beside a large brand flower */

.home-party .mk-section-header .mk-h2 { font-weight: 400; }
.home-party__flower { top: clamp(40px, 8vw, 120px); left: -90px; width: clamp(140px, 18vw, 260px); opacity: 0.25; }

.home-party .mk-feature {
  background:
    url("/assets/marketing/shapes/corner-gradient-26c67aab.avif") left top / auto 100% no-repeat,
    linear-gradient(120deg, #072624 0%, #020707 60%, #000 100%);
}
.home-party .mk-feature--reverse {
  background:
    url("/assets/marketing/shapes/corner-gradient-26c67aab.avif") right top / auto 100% no-repeat,
    linear-gradient(240deg, #072624 0%, #020707 60%, #000 100%);
}
.home-party .mk-feature::after { display: none; }

/* Gallery */

.home-gallery { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(20px, 3vw, 40px); }
.home-gallery img { aspect-ratio: 3 / 2; object-fit: cover; }
.home-gallery__flower { position: absolute; right: -22px; bottom: -22px; width: 48px !important; border-radius: 0 !important; aspect-ratio: auto !important; }

@media (max-width: 700px) {
  .home-moments__row .home-frame { width: 48%; }
  .home-frame--tilt-start { rotate: -5deg; }
  .home-frame--tilt-end { rotate: 5deg; }
}

@media (prefers-reduced-motion: reduce) {
  .home-frame { rotate: none !important; }
}