/* Site motion, September 2026.
   Everything here is gated behind html.motion-ready, which motion.js adds only when
   scripts run and the visitor has not asked for reduced motion. Without it the page
   renders exactly as before. Only opacity, transform, and clip-path are animated. */

:root{--m-ease:cubic-bezier(.16,1,.3,1);--m-dur:900ms}

/* Scroll progress bar */
.motion-progress{position:fixed;z-index:120;top:0;left:0;right:0;height:3px;background:var(--orange,#c63a0b);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* Generic reveal */
.motion-ready .m-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:var(--m-delay,0ms)}
.motion-ready .m-reveal.is-in{opacity:1;transform:none}
.motion-ready .m-reveal.m-left{transform:translate3d(-36px,0,0)}
.motion-ready .m-reveal.m-right{transform:translate3d(36px,0,0)}
.motion-ready .m-reveal.m-scale{transform:scale(.94)}
.motion-ready .m-reveal.m-fade{transform:none}
.motion-ready .m-reveal.is-in.m-left,.motion-ready .m-reveal.is-in.m-right,.motion-ready .m-reveal.is-in.m-scale{transform:none}

/* Headlines wipe up from a hard edge, like a panel sliding into place */
.motion-ready .m-wipe{clip-path:inset(0 0 100% 0);transform:translate3d(0,.35em,0);transition:clip-path 1.1s var(--m-ease),transform 1.1s var(--m-ease);transition-delay:var(--m-delay,0ms)}
.motion-ready .m-wipe.is-in{clip-path:inset(0 0 -.2em 0);transform:none}

/* Hero entrance, staggered on load */
.motion-ready .hero-copy>*,.motion-ready .hero-comparison,.motion-ready .hero .hero-art{opacity:0;transform:translate3d(0,26px,0);transition:opacity 1s var(--m-ease),transform 1s var(--m-ease)}
.motion-ready #hero-title{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--m-ease),transform 1.2s var(--m-ease),opacity 1s var(--m-ease)}
.motion-ready.motion-hero-in .hero-copy>*,.motion-ready.motion-hero-in .hero-comparison,.motion-ready.motion-hero-in .hero .hero-art{opacity:1;transform:none}
.motion-ready.motion-hero-in #hero-title{clip-path:inset(0 0 -.25em 0)}
.motion-ready .hero-copy>:nth-child(1){transition-delay:80ms}
.motion-ready .hero-copy>:nth-child(2){transition-delay:160ms}
.motion-ready .hero-copy>:nth-child(3){transition-delay:420ms}
.motion-ready .hero-copy>:nth-child(4){transition-delay:540ms}
.motion-ready .hero-copy>:nth-child(5){transition-delay:660ms}
.motion-ready .hero-copy>:nth-child(6){transition-delay:760ms}
.motion-ready .hero-comparison,.motion-ready .hero .hero-art{transform:translate3d(40px,0,0);transition-delay:520ms}

/* Hero backdrop: a faint engineering grid with a slow orange scan line */
.hero{position:relative;isolation:isolate}
.m-hero-grid{position:absolute;z-index:-1;inset:0;pointer-events:none;overflow:hidden;
  background-image:linear-gradient(rgba(17,16,15,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(17,16,15,.055) 1px,transparent 1px);
  background-size:56px 56px;background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 70% 45%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 75% 70% at 70% 45%,#000 20%,transparent 75%);
  opacity:0;transition:opacity 1.6s ease .3s}
.motion-hero-in .m-hero-grid{opacity:1}
.m-hero-grid:after{content:"";position:absolute;left:0;right:0;top:0;height:140px;background:linear-gradient(180deg,transparent,rgba(198,58,11,.05) 70%,rgba(198,58,11,.18) 99%,transparent);animation:m-scan 9s linear 1.4s infinite;transform:translate3d(0,-160px,0)}
@keyframes m-scan{0%{transform:translate3d(0,-160px,0)}70%,100%{transform:translate3d(0,900px,0)}}

/* Book: a gentle float in the dark band, plus scroll parallax on its frame */
.motion-ready .book-art{transform:translate3d(0,var(--m-py,0px),0);will-change:transform}
.motion-ready .book-band .book-art img{animation:m-float 7s ease-in-out infinite}
@keyframes m-float{0%,100%{transform:rotate(-4deg) translate3d(0,0,0)}50%{transform:rotate(-2.5deg) translate3d(0,-10px,0)}}

/* 5C wheel: settles in with a quarter turn of its frame (the diagram itself stays upright) */
.motion-ready .method-art.m-reveal{transform:scale(.9)}
.motion-ready .method-art.m-reveal.is-in{transform:none;transition-duration:1.4s}
@keyframes m-spin{to{transform:rotate(360deg)}}

/* Stat numbers keep a steady width while counting */
.motion-ready .stat-number,.motion-ready .about-experience dt{font-variant-numeric:tabular-nums}

/* Buttons: a light sweep on hover (no lift, keeping the site's flat button style) */
.m-sheen.motion-ready .button{position:relative;overflow:hidden;isolation:isolate}
.m-sheen.motion-ready .button:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.28) 50%,transparent 75%);transform:translate3d(-120%,0,0);transition:transform .75s var(--m-ease);pointer-events:none}
.m-sheen.motion-ready .button:hover:after,.m-sheen.motion-ready .button:focus-visible:after{transform:translate3d(120%,0,0)}

/* Text links: underline draws in from the left on hover */
.motion-ready .text-link,.motion-ready .light-link,.motion-ready .hero-book-action{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .45s var(--m-ease),color .2s}
.motion-ready .text-link:hover,.motion-ready .light-link:hover,.motion-ready .hero-book-link:hover .hero-book-action{background-size:100% 1px}

/* Cards respond quietly to hover */
.motion-ready .offer-card,.motion-ready .quote-card,.motion-ready .scope-panel,.motion-ready .quote{transition:border-color .3s,box-shadow .5s var(--m-ease)}
.motion-ready .offer-card:hover,.motion-ready .quote-card:hover,.motion-ready .scope-panel:hover,.motion-ready .quote:hover{box-shadow:0 18px 40px -22px rgba(17,16,15,.35)}

/* Logos: full color on hover */
.motion-ready .logos img{transition:filter .4s,opacity .4s}
.motion-ready .logos img:hover{filter:none;opacity:1}

@media(prefers-reduced-motion:reduce){.m-hero-grid,.motion-progress{display:none}}

/* Side-entering elements must never widen the page. overflow-x:clip does not create a
   scroll container, so sticky positioning keeps working. On phones they rise instead. */
.motion-ready main{overflow-x:clip}
@media(max-width:760px){.motion-ready .m-reveal.m-left,.motion-ready .m-reveal.m-right{transform:translate3d(0,24px,0)}.motion-ready .hero-comparison,.motion-ready .hero .hero-art{transform:translate3d(0,26px,0)}}

/* Program and event pages: dark hero variants keep a light grid */
.hero.dark .m-hero-grid,.section-dark.hero .m-hero-grid{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)}
/* Sticky elements must not carry a transform after they arrive */
.motion-ready .method-visual.m-reveal.is-in{transform:none}