/* ============================================================
   Mobile Axe — component library
   21st.dev / Aceternity-style patterns, ported to vanilla CSS.
   All sized in tokens. All motion respects prefers-reduced-motion.

   Components:
     §1  .ma-fade           — scroll-triggered fade-up
     §2  .ma-stagger        — staggered reveal of children
     §3  .ma-marquee        — infinite horizontal scroller
     §4  .ma-reviews-rail   — testimonial infinite-cards
     §5  .ma-bento          — editorial bento grid
     §6  .ma-counter        — animated number on scroll
     §7  .ma-anchor         — animated gold underline draw
     §8  .ma-magnet         — soft pointer magnetism on CTA
     §9  .ma-pullquote      — editorial quote block
     §10 .ma-sticky-cards   — scroll-pinned card stack
   ============================================================ */

/* §1 ─ fade-up on scroll ──────────────────────────────────── */
.ma-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 480ms cubic-bezier(0.2, 0.6, 0.2, 1),
              transform 480ms cubic-bezier(0.2, 0.6, 0.2, 1);
  will-change: opacity, transform;
}
.ma-fade.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* §2 ─ staggered reveal ──────────────────────────────────── */
.ma-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 460ms cubic-bezier(0.2, 0.6, 0.2, 1),
              transform 460ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.ma-stagger.is-in > * {
  opacity: 1;
  transform: translateY(0);
}
.ma-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
.ma-stagger.is-in > *:nth-child(2) { transition-delay: 70ms; }
.ma-stagger.is-in > *:nth-child(3) { transition-delay: 140ms; }
.ma-stagger.is-in > *:nth-child(4) { transition-delay: 210ms; }
.ma-stagger.is-in > *:nth-child(5) { transition-delay: 280ms; }
.ma-stagger.is-in > *:nth-child(6) { transition-delay: 350ms; }
.ma-stagger.is-in > *:nth-child(7) { transition-delay: 420ms; }
.ma-stagger.is-in > *:nth-child(8) { transition-delay: 490ms; }

/* §3 ─ marquee (logo / venue strip) ──────────────────────── */
.ma-marquee {
  --duration: 28s;
  --gap: 56px;
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%);
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%);
}
.ma-marquee__track {
  display: inline-flex;
  align-items: center;
  gap: var(--gap);
  padding-block: 4px;
  white-space: nowrap;
  animation: ma-marquee-scroll var(--duration) linear infinite;
  will-change: transform;
}
.ma-marquee:hover .ma-marquee__track,
.ma-marquee:focus-within .ma-marquee__track {
  animation-play-state: paused;
}
.ma-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted-strong);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
}
.ma-marquee__item::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 999px;
  flex-shrink: 0;
}
.ma-marquee--reverse .ma-marquee__track {
  animation-direction: reverse;
}
@keyframes ma-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--gap) / 2)); }
}

/* §4 ─ infinite reviews rail (Aceternity infinite-moving-cards port) ── */
.ma-reviews-rail {
  --duration: 60s;
  --gap: 24px;
  position: relative;
  overflow: hidden;
  padding: 8px 0;
  mask-image: linear-gradient(to right,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%);
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%);
}
.ma-reviews-rail__track {
  display: flex;
  gap: var(--gap);
  width: max-content;
  animation: ma-reviews-scroll var(--duration) linear infinite;
  will-change: transform;
}
.ma-reviews-rail:hover .ma-reviews-rail__track {
  animation-play-state: paused;
}
.ma-review-card {
  flex: 0 0 360px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 22px 24px 20px;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: 14px;
  white-space: normal;
}
.ma-review-card__stars {
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 2px;
  font-weight: 700;
}
.ma-review-card__quote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
  text-wrap: pretty;
}
.ma-review-card__who {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}
.ma-review-card__avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--forest-soft);
  color: var(--forest);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.02em;
}
.ma-review-card__name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
}
.ma-review-card__role {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 1px;
}
@keyframes ma-reviews-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--gap) / 2)); }
}

/* §5 ─ editorial bento ───────────────────────────────────── */
.ma-bento {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .ma-bento {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(220px, auto);
  }
}
.ma-bento__cell {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: box-shadow 220ms ease, transform 220ms ease;
}
.ma-bento__cell:hover {
  box-shadow: var(--shadow-2);
}
.ma-bento__cell--photo {
  min-height: 240px;
  color: #fff;
}
.ma-bento__cell--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(15,26,20,0.85) 0%, rgba(15,26,20,0.18) 55%, rgba(15,26,20,0.0) 100%),
    var(--bg-image, none) center / cover no-repeat;
  z-index: 0;
  transition: transform 600ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.ma-bento__cell--photo:hover::before { transform: scale(1.04); }
.ma-bento__cell--photo > * { position: relative; z-index: 1; }
.ma-bento__cell--photo .ma-bento__body {
  margin-top: auto;
  padding: 24px;
}
.ma-bento__cell--photo .ma-bento__eyebrow { color: var(--gold); }
.ma-bento__cell--photo .ma-bento__title { color: #fff; }
.ma-bento__cell--photo .ma-bento__copy  { color: rgba(255,255,255,0.82); }

/* desktop spans */
@media (min-width: 720px) {
  .ma-bento__cell--w2 { grid-column: span 2; }
  .ma-bento__cell--h2 { grid-row: span 2; }
}

.ma-bento__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.ma-bento__eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-2);
}
.ma-bento__title {
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.ma-bento__copy {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.5;
}
.ma-bento__stat {
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}
.ma-bento__cell--photo .ma-bento__stat { color: #fff; }

/* §6 ─ animated counter ──────────────────────────────────── */
.ma-counter {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  font-weight: 900;
}

/* §7 ─ animated gold underline link ──────────────────────── */
.ma-anchor {
  color: var(--ink);
  text-decoration: none;
  position: relative;
  font-weight: 700;
}
.ma-anchor::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 280ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.ma-anchor:hover::after,
.ma-anchor:focus-visible::after {
  transform: scaleX(1);
}

/* §8 ─ magnet hover (subtle) ─────────────────────────────── */
.ma-magnet {
  transition: transform 180ms ease-out;
  will-change: transform;
}

/* §9 ─ editorial pull-quote ──────────────────────────────── */
.ma-pullquote {
  position: relative;
  max-width: 920px;
  margin-inline: auto;
  padding: 48px 32px 32px;
  background: var(--bone-2);
  border-left: 4px solid var(--gold);
  border-radius: 4px;
}
.ma-pullquote__mark {
  position: absolute;
  top: 18px;
  left: 22px;
  font-size: 4rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 0.7;
  font-family: Georgia, "Times New Roman", serif;
}
.ma-pullquote__body {
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  text-wrap: pretty;
}
.ma-pullquote__cite {
  margin-top: 16px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted-strong);
  text-transform: uppercase;
}

/* §10 ─ sticky-scroll feature cards ──────────────────────── */
.ma-sticky-cards {
  display: grid;
  gap: 0;
}
.ma-sticky-cards__step {
  position: sticky;
  top: calc(var(--nav-h, 64px) + 32px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 32px;
  box-shadow: var(--shadow-1);
  margin-bottom: 16px;
  transition: transform 280ms ease;
}
@supports not (position: sticky) {
  .ma-sticky-cards__step { position: relative; }
}

/* ─── reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ma-fade,
  .ma-stagger > *,
  .ma-bento__cell,
  .ma-bento__cell--photo::before,
  .ma-anchor::after,
  .ma-magnet {
    transition: none !important;
    transform: none !important;
  }
  .ma-marquee__track,
  .ma-reviews-rail__track {
    animation: none !important;
  }
  .ma-fade,
  .ma-stagger > * {
    opacity: 1 !important;
  }
}