/* WLP v2 motion layer: intro, best practice hero, image reveals, counters, mobile action bar */

/* 1. Personalized intro (home page, first arrival only) */
.mx-intro{display:none}
html.mx-go .mx-intro{display:flex;position:fixed;inset:0;z-index:200;background:var(--ink);color:var(--ivory);flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;clip-path:inset(0 0 0 0);transition:clip-path .6s cubic-bezier(.77,0,.18,1)}
html.mx-go .mx-intro.lift{clip-path:inset(0 0 100% 0)}
.mx-name{font-family:var(--serif);font-optical-sizing:none;font-variation-settings:"opsz" 14;font-size:clamp(30px,5.2vw,74px);letter-spacing:.16em;padding-left:.16em;text-transform:uppercase;line-height:1.2;display:flex;flex-wrap:wrap;justify-content:center}
.mx-name .w{display:inline-flex;overflow:hidden;margin:0 .22em}
.mx-name .ch{display:inline-block;transform:translateY(110%);animation:mxUp .55s cubic-bezier(.2,.8,.2,1) forwards}
.mx-line{width:0;height:1px;background:var(--champ);margin:28px auto 22px;animation:mxLine .5s .25s cubic-bezier(.6,0,.2,1) forwards}
.mx-sub{font-size:11.5px;font-weight:500;letter-spacing:.38em;text-indent:.38em;text-transform:uppercase;color:var(--stone);opacity:0;animation:mxFade .4s .4s ease forwards}
@keyframes mxUp{to{transform:none}}
@keyframes mxLine{to{width:120px}}
@keyframes mxFade{to{opacity:1}}

/* 2. Best practice hero: centered, benefit H1, two CTAs, trust row */
.hero.mx-hero{justify-content:center;text-align:center}
.hero.mx-hero .hero-scrim{background:radial-gradient(ellipse at 50% 50%,rgba(12,11,10,.62) 0%,rgba(12,11,10,.42) 55%,rgba(12,11,10,.3) 100%),linear-gradient(180deg,rgba(12,11,10,.35),rgba(12,11,10,0) 30%,rgba(12,11,10,.45))}
.hero.mx-hero .hero-in{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:56px;padding-right:56px;display:flex;flex-direction:column;align-items:center}
.hero.mx-hero h1{font-size:clamp(44px,6.4vw,100px);letter-spacing:.08em;line-height:1.05;padding-left:0;max-width:18ch;margin-left:auto;margin-right:auto}
.hero.mx-hero .sub{margin:26px auto 0;max-width:46ch}
.hero.mx-hero .btns{justify-content:center}
.mx-trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 26px;margin-top:34px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,241,234,.82)}
.mx-trust span{display:inline-flex;align-items:center;gap:10px}
.mx-trust span:before{content:"";width:18px;height:1px;background:var(--champ)}
.mx-trust a{color:var(--ivory);border-bottom:1px solid rgba(245,241,234,.5);padding:10px 0}
/* hero entrance, staggered, runs once the intro lifts (or on load) */
.hero.mx-hero .hero-in>*{opacity:0;transform:translateY(26px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
html.mx-ready .hero.mx-hero .hero-in>*{opacity:1;transform:none}
html.mx-ready .hero.mx-hero .hero-in>*:nth-child(2){transition-delay:.12s}
html.mx-ready .hero.mx-hero .hero-in>*:nth-child(3){transition-delay:.24s}
html.mx-ready .hero.mx-hero .hero-in>*:nth-child(4){transition-delay:.36s}
html.mx-ready .hero.mx-hero .hero-in>*:nth-child(5){transition-delay:.48s}
.hero.mx-hero .hero-bg video,.hero.mx-hero .hero-bg img{transform:scale(1.08);transition:transform 2.6s cubic-bezier(.2,.7,.2,1)}
html.mx-ready .hero.mx-hero .hero-bg video,html.mx-ready .hero.mx-hero .hero-bg img{transform:none}

/* 3. Image reveals: classic fade. Each photo fades in once as it scrolls into view.
   One trigger per card, opacity only, never touches hover transforms. */
.mx-wipe>img{opacity:0;transition:opacity 1.2s ease}
.mx-wipe.mx-in>img{opacity:1}
.rv.mx-norv{opacity:1;transform:none;transition:none}

/* 4. Counters: no width jump while counting */
.stats .sv{font-variant-numeric:tabular-nums}

/* 5. Sticky mobile action bar (phones, after the hero) */
.mx-bar{display:none}
@media(max-width:860px){
  .hero.mx-hero .hero-in{padding-left:24px;padding-right:24px}
  .hero.mx-hero .hero-scrim{background:linear-gradient(180deg,rgba(12,11,10,.55),rgba(12,11,10,.62) 45%,rgba(12,11,10,.8))}
  .hero.mx-hero h1{font-size:clamp(34px,10vw,54px);letter-spacing:.05em;line-height:1.1}
  .mx-trust{gap:6px 18px;font-size:11px}
  .hero.mx-hero .btns{align-items:stretch;flex-direction:column;width:100%}
  .hero.mx-hero .btns .btn{width:100%}
  .mx-bar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--ivory);border-top:1px solid var(--line);gap:8px;padding:8px 8px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -6px 24px rgba(12,11,10,.08);transform:translateY(110%);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
  .mx-bar.on{transform:none}
  .mx-bar a{display:flex;align-items:center;justify-content:center;min-height:50px;font-size:11.5px;font-weight:600;letter-spacing:.24em;text-indent:.24em;text-transform:uppercase;background:var(--champ);color:var(--ink);border:1px solid var(--champ)}
  .mx-bar a+a{background:transparent;color:var(--ink);border-color:var(--ink);font-weight:500}
  body.has-mxbar{padding-bottom:56px}
}

@media (prefers-reduced-motion:reduce){
  html.mx-go .mx-intro{display:none}
  .hero.mx-hero .hero-in>*,.hero.mx-hero .hero-bg video,.hero.mx-hero .hero-bg img{opacity:1;transform:none;transition:none}
  .mx-wipe::after{display:none}
  .mx-wipe>img{translate:0 0}
}