/* Ma Lupe’s motion layer (v1.0.2): animated headlines, handwritten script lines,
   image unveil + slow zoom + parallax, hover lift. Visible without JS; off for reduced motion. */

/* Reveal base (only when JS adds .ml-motion to <html>) */
.ml-motion .ml-reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--ml-d,0ms)}
.ml-motion .ml-reveal.is-in{opacity:1;transform:none}

/* Headlines: each line rises out of a mask and settles from a slight tilt */
.ml-motion .ml-line{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .06em .08em}
.ml-motion .ml-line > .ml-line-in{display:inline-block;transform:translateY(110%) rotate(4deg);transform-origin:0 100%;transition:transform 1.05s cubic-bezier(.16,.84,.3,1);transition-delay:var(--ml-d,0ms)}
.ml-motion .is-in .ml-line > .ml-line-in{transform:none}

/* Script lines (Great Vibes) write themselves left to right */
.ml-motion .ml-write{clip-path:inset(0 100% 0 0);transition:clip-path 1.4s cubic-bezier(.65,.05,.36,1);transition-delay:var(--ml-d,0ms)}
.ml-motion .ml-write.is-in{clip-path:inset(0 0 0 0)}

/* Images: unveil from the bottom, then slow zoom; frame gets an offset clay shadow */
.ml-frame{position:relative;border-radius:var(--radius,14px);overflow:hidden;box-shadow:10px 10px 0 var(--clay,#b34a2a),0 18px 40px rgba(58,35,24,.22);transform:translateY(var(--ml-px,0px));transition:box-shadow .5s ease}
.ml-frame img{box-shadow:none!important;border-radius:0!important;height:auto!important;aspect-ratio:4/3;width:100%;object-fit:cover;animation:ml-kb 22s ease-in-out infinite alternate;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s ease}
.ml-frame:nth-child(2){box-shadow:-10px 10px 0 var(--green,#3d6b35),0 18px 40px rgba(58,35,24,.22)}
.ml-frame:nth-child(2) img{animation-delay:-11s;transform-origin:30% 60%}
.ml-motion .ml-frame.ml-reveal{opacity:1;transform:translateY(var(--ml-px,0px));clip-path:inset(100% 0 0 0 round 14px);transition:clip-path 1.2s cubic-bezier(.65,.05,.36,1),box-shadow .5s ease;transition-delay:var(--ml-d,0ms)}
.ml-motion .ml-frame.ml-reveal.is-in{clip-path:inset(0 0 0 0 round 14px)}
@keyframes ml-kb{from{transform:scale(1.02)}to{transform:scale(1.14)}}
.ml-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(255,255,255,.18),transparent 40%,rgba(58,35,24,.28));pointer-events:none}
.ml-frame:hover img{filter:saturate(1.15) contrast(1.05)}
.ml-frame:hover{box-shadow:14px 14px 0 var(--clay,#b34a2a),0 26px 50px rgba(58,35,24,.3)}
.ml-frame:nth-child(2):hover{box-shadow:-14px 14px 0 var(--green,#3d6b35),0 26px 50px rgba(58,35,24,.3)}
.gallery-grid{gap:22px!important}

/* Cards rendered by app.js fade up in sequence */
.loc-card,.feat-card{animation:ml-up .7s cubic-bezier(.2,.7,.2,1) both}
.loc-card:nth-child(2),.feat-card:nth-child(2){animation-delay:.12s}
.loc-card:nth-child(3),.feat-card:nth-child(3){animation-delay:.24s}
@keyframes ml-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* Hover lift */
.loc-card,.feat-card,.step-card{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.loc-card:hover,.feat-card:hover,.step-card:hover{transform:translateY(-6px);box-shadow:0 20px 38px rgba(58,35,24,.18)}
.feat-card img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.feat-card:hover img{transform:scale(1.06)}
.step-num{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.step-card:hover .step-num{transform:scale(1.12) rotate(-8deg)}
.btn,.call-btn,.map-btn{transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease,color .25s ease}
.btn:hover,.call-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(179,74,42,.28)}
.brand-logo{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.brand:hover .brand-logo{transform:rotate(-4deg) scale(1.05)}

/* Review band stars pop in */
.ml-motion .review-band .stars.ml-reveal{transform:scale(.6)}
.ml-motion .review-band .stars.ml-reveal.is-in{transform:none}

@media (prefers-reduced-motion: reduce){
  .ml-motion .ml-reveal,.ml-motion .ml-line > .ml-line-in,.ml-motion .ml-write,.ml-motion .ml-frame.ml-reveal{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .ml-frame img,.loc-card,.feat-card{animation:none!important}
  .ml-frame{transform:none!important}
}