/* brandnext motion system: minimal, transform/opacity only. Hidden states only exist under html.m-js (set by js/motion.js,
   never with prefers-reduced-motion), so without JS everything is visible. Greens come from tokens.css; no yellow. */
:root { --m-ease: cubic-bezier(.22, .6, .25, 1); }

/* ---- reveal ---- */
.m-js .m-r { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .6s ease-out var(--m-d, 0ms), transform .6s var(--m-ease) var(--m-d, 0ms); }
.m-js .m-r.m-in { opacity: 1; transform: none; }
.m-js .m-i { overflow: hidden; opacity: 0; transition: opacity .6s ease-out var(--m-d, 0ms); }
.m-js .m-i img { transform: scale(1.06); transition: transform .9s var(--m-ease) var(--m-d, 0ms); }
.m-js .m-i.m-in { opacity: 1; }
.m-js .m-i.m-in img { transform: none; }
.m-js .m-h .m-w { display: inline-block; opacity: 0; transform: translate3d(0, .32em, 0); transition: opacity .6s ease-out calc(var(--m-d, 0ms) + var(--m-wd, 0ms)), transform .7s var(--m-ease) calc(var(--m-d, 0ms) + var(--m-wd, 0ms)); }
.m-js .m-h.m-in .m-w { opacity: 1; transform: none; }

/* ---- stepper: line draws, number fills, text follows ---- */
.m-js .m-s { border-top-color: transparent; }
.m-js .m-s::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--color-primary); transform: scaleX(0); transform-origin: left center; transition: transform .8s var(--m-ease) var(--m-d, 0ms); }
.m-js .m-s .c-steps__num { opacity: 0; transform: scale(.8); background-color: transparent; border-color: var(--color-line-green); transition: opacity .4s ease-out calc(var(--m-d, 0ms) + 250ms), transform .5s var(--m-ease) calc(var(--m-d, 0ms) + 250ms), background-color .5s ease-out calc(var(--m-d, 0ms) + 500ms), border-color .5s ease-out calc(var(--m-d, 0ms) + 500ms); }
.m-js .m-s .c-steps__title, .m-js .m-s .c-steps__text { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .55s ease-out calc(var(--m-d, 0ms) + 450ms), transform .55s var(--m-ease) calc(var(--m-d, 0ms) + 450ms); }
.m-js .m-s .c-steps__text { transition-delay: calc(var(--m-d, 0ms) + 560ms); }
.m-js .m-s.m-in::before { transform: none; }
.m-js .m-s.m-in .c-steps__num, .m-js .m-s.m-in .c-steps__title, .m-js .m-s.m-in .c-steps__text { opacity: 1; transform: none; background-color: var(--color-tint); border-color: var(--color-secondary); }

@media (prefers-reduced-motion: no-preference) {
  /* ---- header hide / show ---- */
  .c-header { transition: transform .35s var(--m-ease), background-color .3s var(--ease), border-color .3s var(--ease), color .3s; }
  .c-header.is-hidden { transform: translate3d(0, -100%, 0); }

  /* ---- nav: sliding pill indicator ---- */
  .c-nav__indicator { transition: transform .38s var(--m-ease), width .38s var(--m-ease), opacity .25s ease-out; will-change: transform; }
  .c-nav__indicator.is-on { opacity: 1; }

  /* ---- logo mark: slow breathing ---- */
  @keyframes m-breathe { 0%, 100% { transform: scale(1); opacity: .86; } 50% { transform: scale(1.07); opacity: 1; } }

  /* ---- buttons: green wipe ---- */
  .c-btn { position: relative; overflow: hidden; isolation: isolate; }
  .c-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-secondary); transform: scaleX(0); transform-origin: left center; transition: transform .38s var(--m-ease); }
  .c-btn:hover::before, .c-btn:focus-visible::before { transform: scaleX(1); }
  .c-btn--primary:hover, .c-header--overlay.is-scrolled .c-header__cta:hover { background-color: var(--color-dark); }
  .is-dark .c-btn--primary:hover, .c-btn--light:hover, .c-header--overlay .c-header__cta:hover { background-color: var(--color-light); color: #fff; }
  .c-header--overlay.is-scrolled .c-header__cta:hover { background-color: var(--color-dark); }
  .c-btn--ghost::before { background: rgba(255, 255, 255, .14); }

  /* ---- dropdowns (desktop) ---- */
  @media (min-width: 1025px) {
    .c-nav__panel { transform: translate3d(0, 8px, 0); transition: opacity .18s var(--m-ease), transform .18s var(--m-ease), visibility 0s linear .18s; }
    .c-nav__item.is-open > .c-nav__panel, .c-nav__item--has-sub:hover > .c-nav__panel { transform: none; }
  }

  /* ---- mobile menu: staggered items ---- */
  @media (max-width: 1024px) {
    .c-nav__item, .c-nav__mobile-cta { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .2s ease-out, transform .2s ease-out; }
    .is-menu-open .c-nav__item, .is-menu-open .c-nav__mobile-cta { opacity: 1; transform: none; transition: opacity .45s ease-out calc(.06s + var(--m-n, 0) * 55ms), transform .5s var(--m-ease) calc(.06s + var(--m-n, 0) * 55ms); }
    .c-nav__item:nth-child(1) { --m-n: 0; } .c-nav__item:nth-child(2) { --m-n: 1; } .c-nav__item:nth-child(3) { --m-n: 2; }
    .c-nav__item:nth-child(4) { --m-n: 3; } .c-nav__item:nth-child(5) { --m-n: 4; } .c-nav__item:nth-child(6) { --m-n: 5; }
    .c-nav__item:nth-child(n+7) { --m-n: 6; } .c-nav__mobile-cta { --m-n: 7; }
  }
}