/* Maison Agentic - motion.
   Restrained register: short travel, calm easing, nothing bounces, each element
   animates once. Matches the Design System's motion note.

   Hooks are CSS classes, not data attributes, because custom HTML attributes are
   an Elementor Pro feature. Add these in the builder under Advanced > CSS Classes:
     ma-reveal        fade and rise on enter
     ma-i1 .. ma-i6   stagger position within a group
     ma-ruled         hairline top rule that draws in
     ma-scrub         element whose --p tracks scroll position
*/

:root{
  --rev-y:14px; --rev-scale:1; --rev-dur:520ms; --stagger:60ms;
  --tier-stagger:140ms; --rule-dur:600ms; --drift:80px;
}

.ma-i1{--i:1} .ma-i2{--i:2} .ma-i3{--i:3}
.ma-i4{--i:4} .ma-i5{--i:5} .ma-i6{--i:6}

/* Progressive enhancement: everything is visible by default. Content is only
   hidden once JavaScript has confirmed it is running and can reveal it again.
   A blocked or failed script therefore costs the animation, never the page.
   Elementor's own entrance animations have exactly this failure mode, which is
   why this theme handles reveals instead of the builder. */
html.ma-js .ma-reveal{
  opacity:0;
  transform:translateY(var(--rev-y)) scale(var(--rev-scale));
  transition:opacity var(--rev-dur) var(--ease-out),
             transform var(--rev-dur) var(--ease-out);
  transition-delay:calc(var(--i,0) * var(--stagger));
  will-change:opacity,transform;
}
html.ma-js .ma-reveal.is-in{opacity:1;transform:none}

/* hairline rules draw in left to right */
.ma-ruled{position:relative;border-top:0}
.ma-ruled::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--border-default);
  transform:scaleX(1);transform-origin:left center;
  transition:transform var(--rule-dur) var(--ease-out);
}
html.ma-js .ma-ruled::before{transform:scaleX(0)}
html.ma-js .ma-ruled.is-in::before{transform:scaleX(1)}

/* the house diagram builds from the foundation up */
.ma-diagram svg g.ma-reveal{
  transition:opacity var(--rev-dur) var(--ease-out),
             transform var(--rev-dur) var(--ease-out);
  transition-delay:calc(var(--i,0) * var(--tier-stagger));
}

@media(prefers-reduced-motion:reduce){
  .ma-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .ma-ruled::before{transform:scaleX(1)!important;transition:none!important}
  .ma-scrub{transform:none!important}
}

/* Elementor free ships entrance-animation CSS that also starts hidden.
   Neutralise it so a builder-side animation setting can never blank a section. */
.elementor-invisible{visibility:visible!important}