/* Total Assurance shared motion layer (proto 2026). Pair with motion.js.
   Only transform + opacity animate. Reduced-motion = everything static. */
:root{--m-ease:cubic-bezier(.22,1,.36,1);--m-dur:.8s}

/* 1. Reveal on scroll: add data-reveal (optional data-reveal="left|right|zoom", style="--d:1" to stagger) */
.m-on [data-reveal]{opacity:0;transform:translate3d(0,28px,0);transition:opacity var(--m-dur) var(--m-ease),transform var(--m-dur) var(--m-ease);transition-delay:calc(var(--d,0)*90ms)}
.m-on [data-reveal=left]{transform:translate3d(-36px,0,0)}
.m-on [data-reveal=right]{transform:translate3d(36px,0,0)}
.m-on [data-reveal=zoom]{transform:scale(.96)}
.m-on [data-reveal].is-in{opacity:1;transform:none}
.m-on [data-reveal].is-done{transition:transform .35s var(--m-ease),opacity .35s;transition-delay:0s}

/* 2. Hero photo: slow zoom (CSS) + parallax (JS sets --py on [data-parallax]) */
[data-parallax]{transform:translate3d(0,var(--py,0px),0);will-change:transform}
.m-zoom{animation:m-zoom 26s var(--m-ease) infinite alternate;will-change:transform}
@keyframes m-zoom{from{transform:scale(1.02)}to{transform:scale(1.1)}}

/* 3. Hover lift on cards and buttons (pointer devices only) */
.lift,.btn{transition:transform .35s var(--m-ease)}
@media (hover:hover){.lift:hover,.m-on .lift.is-in:hover{transform:translate3d(0,-6px,0)}.btn:hover{transform:translate3d(0,-2px,0)}}
.btn:active{transform:scale(.98)}

/* 4. Sticky header: solid dark navy (faint blur), shrinks on scroll (JS toggles .is-shrunk on [data-shrink]) */
[data-shrink]{position:fixed;top:0;left:0;right:0;z-index:70;transition:transform .45s var(--m-ease)}
[data-shrink]::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(10,22,46,.97);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 10px 30px rgba(4,8,18,.28)}
[data-shrink]::after{content:"";position:absolute;inset:0;z-index:-1;background:#0a162e;opacity:0;transition:opacity .45s var(--m-ease);pointer-events:none}
[data-shrink] .m-logo{transform-origin:left center;transition:transform .45s var(--m-ease)}
[data-shrink] .m-inner{transition:transform .45s var(--m-ease)}
[data-shrink].is-top{transform:none}
[data-shrink].is-top .m-inner,[data-shrink].is-top .m-logo{transform:none}
[data-shrink].is-shrunk:not(.is-top){transform:translate3d(0,calc(var(--shrink,18px)*-1),0)}
[data-shrink].is-shrunk:not(.is-top)::after{opacity:1}
[data-shrink].is-shrunk:not(.is-top) .m-inner{transform:translate3d(0,calc(var(--shrink,18px)/2),0)}
[data-shrink].is-shrunk:not(.is-top) .m-logo{transform:scale(.74)}

/* 5. Count-up stats: <span data-count="2010" data-from="1990">2010</span> */
[data-count]{font-variant-numeric:tabular-nums}

/* 6. Carousel: [data-carousel] > .m-track > .m-slide ; dots built by JS into .m-dots */
[data-carousel]{position:relative;overflow:hidden;touch-action:pan-y}
.m-track{display:flex;transition:transform .7s var(--m-ease);will-change:transform}
.m-track.is-drag{transition:none}
.m-slide{flex:0 0 100%;min-width:0}
.m-slide>*{transition:opacity .7s var(--m-ease);opacity:.35}
.m-slide.is-on>*{opacity:1}
.m-dots{display:flex;gap:.5rem;justify-content:center;margin-top:1.4rem}
.m-dots button{width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.m-dots button::before{content:"";width:8px;height:8px;border-radius:99px;background:currentColor;opacity:.3;transition:opacity .3s,transform .3s var(--m-ease)}
.m-dots button[aria-current=true]::before{opacity:1;transform:scale(1.5)}

/* Static modes: OS reduced motion, or ?static (used for screenshots) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .m-on [data-reveal]{opacity:1;transform:none}
  [data-parallax],.m-zoom{transform:none!important}
}
.m-static *,.m-static *::before,.m-static *::after{animation:none!important;transition:none!important}
.m-static [data-reveal]{opacity:1!important;transform:none!important}

/* 7. Phone call bar: slides up fully into view, clears the iPhone home indicator */
.mobile-callbar{padding-bottom:calc(.7rem + env(safe-area-inset-bottom,0px))!important}
.m-on .mobile-callbar{animation:m-bar .6s var(--m-ease) .4s both}
@keyframes m-bar{from{transform:translate3d(0,100%,0)}to{transform:none}}
/* Phones: side-slide reveals become vertical so nothing sits past the right edge before it reveals */
@media (max-width:719px){.m-on [data-reveal=left]:not(.is-in),.m-on [data-reveal=right]:not(.is-in){transform:translate3d(0,28px,0)}}

/* low-end fallback (motion.js adds .m-lowend): drop parallax, slow zoom and backdrop blur */
.m-lowend [data-parallax],.m-lowend .m-zoom{animation:none!important;transform:none!important;will-change:auto!important}
.m-lowend *,.m-lowend *::before,.m-lowend *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}