/*! Msharf scroll animations. Loaded on the front end only (not in the editor).
 * Elements are hidden only while html.msharf-motion is set and the visitor has
 * not asked for reduced motion; assets/js/motion.js reveals them section by section.
 */
:root{--m-ease:cubic-bezier(.16,1,.3,1);--m-dur:.9s}

@media (prefers-reduced-motion:no-preference){
  /* Hidden until the section scrolls into view. */
  .msharf-motion [data-anim]{opacity:0}
  .msharf-motion [data-anim="head"]{opacity:1}
  .msharf-motion [data-anim="head"] .mw{opacity:0}

  /* Headings: words rise out of a soft blur, one after another. */
  .msharf-motion .m-in [data-anim="head"] .mw{animation:m-word .85s var(--m-ease) both;animation-delay:calc(var(--w,0) * 55ms)}
  /* A short accent bar sweeps in under section headings. */
  .msharf-motion .sec-head h2[data-anim="head"]::after{content:"";display:block;height:.14em;max-height:7px;min-height:4px;width:0;margin-top:.32em;border-radius:99px;background:linear-gradient(90deg,var(--green),var(--blue,#0a6ed3));transition:width 1s var(--m-ease) .35s}
  .msharf-motion .sec-head[style*="center"] h2::after,.msharf-motion .sec-head.center h2::after,.msharf-motion .center .sec-head h2::after{margin-left:auto;margin-right:auto}
  .msharf-motion .m-in .sec-head h2[data-anim="head"]::after{width:min(96px,30%)}
  .msharf-motion .dark .sec-head h2::after,.msharf-motion .sec-blue .sec-head h2::after{background:linear-gradient(90deg,var(--green),#fff)}

  /* Text blocks under headings: fade up. */
  .msharf-motion .m-in [data-anim="fade"]{animation:m-rise var(--m-dur) var(--m-ease) both;animation-delay:calc(180ms + var(--i,0) * 90ms)}
  /* Cards and list items: rise with a slight scale, staggered. */
  .msharf-motion .m-in [data-anim="item"]{animation:m-card var(--m-dur) var(--m-ease) both;animation-delay:calc(260ms + var(--i,0) * 85ms)}
  /* Large media (photos, dashboards, mockups): zoom in gently. */
  .msharf-motion .m-in [data-anim="media"]{animation:m-zoom 1.1s var(--m-ease) both;animation-delay:calc(200ms + var(--i,0) * 90ms)}
  /* Buttons: pop. */
  .msharf-motion .m-in [data-anim="btn"]{animation:m-pop .7s var(--m-ease) both;animation-delay:calc(420ms + var(--i,0) * 80ms)}

  /* Hero: plays on page load, not on scroll. */
  .msharf-motion .hero.m-in .hero-photo,.msharf-motion .hero.m-in .hero-bg{animation:m-hero-bg 1.6s var(--m-ease) both}

  /* Gentle, continuous details. */
  .msharf-motion .m-in .plan-tag,.msharf-motion .m-in .hero-role{animation:m-pop .7s var(--m-ease) .5s both,m-float 4.5s ease-in-out 1.4s infinite}
  .btn,.nav-consult,.s-btn{transition:transform .25s var(--m-ease),box-shadow .25s var(--m-ease),background-color .2s,color .2s,border-color .2s}
  .btn:hover,.nav-consult:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(23,25,90,.45)}
  .btn:active,.nav-consult:active{transform:translateY(0);box-shadow:none}
}

@keyframes m-word{from{opacity:0;translate:0 .6em;filter:blur(8px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes m-rise{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}
@keyframes m-card{from{opacity:0;translate:0 40px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@keyframes m-zoom{from{opacity:0;scale:.92;filter:blur(6px)}to{opacity:1;scale:1;filter:blur(0)}}
@keyframes m-pop{0%{opacity:0;scale:.8}70%{opacity:1;scale:1.04}100%{opacity:1;scale:1}}
@keyframes m-hero-bg{from{opacity:0;scale:1.06}to{opacity:1;scale:1}}
@keyframes m-float{0%,100%{translate:0 0}50%{translate:0 -4px}}

/* Heading words keep normal spacing and wrapping. */
.mw{display:inline-block;white-space:pre-wrap}

@media print{.msharf-motion [data-anim],.msharf-motion .mw{opacity:1!important;animation:none!important}}