/* Motion layer (Preview v3.13) – one file for every page of the new site.
   Restrained on purpose: things settle into place once, nothing loops, nothing follows the cursor.
   Rules
   - Content is in the HTML and visible without this file or without JavaScript. Elements are only
     hidden by `.mo-js` (set by motion.js once it runs), and only if they start below the first screen.
   - The first screen uses `.mo` (set by a one-line script in <head>, before the page paints).
   - Visitors who ask their phone or computer for less motion get none (`prefers-reduced-motion`).
   - Only opacity and transform move: no layout shift, no effect on the speed scores. */

:root{--mo-ease:cubic-bezier(.22,.61,.36,1);--mo-t:.9s}

@keyframes mo-rise{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes mo-fade{from{opacity:0}to{opacity:1}}
@keyframes mo-settle{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes mo-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- 1. first screen: settles in once (about 1.5 s) ---------- */
.mo .hero .bg{animation:mo-settle 7s var(--mo-ease) both}
.mo .hero-in>*{animation:mo-rise var(--mo-t) var(--mo-ease) both}
.mo .hero-in>:nth-child(1){animation-delay:.1s}
.mo .hero-in>:nth-child(2){animation-delay:.22s}
.mo .hero-in>:nth-child(3){animation-delay:.55s}
.mo .hero-in>:nth-child(4){animation-delay:.68s}
.mo .hero-in>:nth-child(5){animation-delay:.8s}
.mo .hero-in>:nth-child(6){animation-delay:.92s}
/* the gold second line of the headline arrives a beat after the first */
.mo .hero h1 span{animation:mo-rise 1s var(--mo-ease) .42s both}
/* the gold hairline above the four facts draws out from the centre, then the facts fade in */
.mo .strip{border-top-color:transparent}
.mo .strip::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:rgba(201,168,76,.45);
  transform-origin:50% 0;animation:mo-line 1.6s var(--mo-ease) .7s both}
.mo .strip li{animation:mo-fade 1s var(--mo-ease) both}
.mo .strip li:nth-child(1){animation-delay:1s}
.mo .strip li:nth-child(2){animation-delay:1.1s}
.mo .strip li:nth-child(3){animation-delay:1.2s}
.mo .strip li:nth-child(4){animation-delay:1.3s}

/* ---------- 2. on scroll: fade in and rise 16 px, once ---------- */
.mo-js [data-mo]{opacity:0;transform:translate3d(0,16px,0);
  transition:opacity var(--mo-t) var(--mo-ease) var(--mo-d,0s),transform var(--mo-t) var(--mo-ease) var(--mo-d,0s)}
.mo-js [data-mo].mo-in{opacity:1;transform:none}

/* photo card: the photo settles slowly while the card fades in; the words follow */
.mo-js .pcard[data-mo] .bg{transform:scale(1.06);transition:transform 2.4s var(--mo-ease)}
.mo-js .pcard.mo-in .bg{transform:none}
.mo-js .pcard[data-mo] .pcard-in{opacity:0;transition:opacity 1.1s var(--mo-ease) .35s}
.mo-js .pcard.mo-in .pcard-in{opacity:1}

/* ---------- 3. gold lines draw themselves ---------- */
.mo-js .gold-rule[data-mo]{opacity:1;transform:scaleX(0);transform-origin:0 50%;transition:transform 1.3s var(--mo-ease) .1s}
.mo-js .gold-rule[data-mo].mo-in{transform:scaleX(1)}
@media(min-width:900px){.mo-js .gold-rule[data-mo]{transform-origin:50% 50%}}

/* ---------- 4. pictures that explain something are drawn, not just shown ---------- */
/* buyer circles: the company first, then each circle spreads out from it, nearest to farthest */
.rings-svg *{transform-box:view-box;transform-origin:212px 100px}
.mo-js .rings[data-mo] .core{opacity:0;transform:scale(.4);transition:opacity .6s var(--mo-ease) .15s,transform .8s var(--mo-ease) .15s}
.mo-js .rings[data-mo] :is(.a-r1,.a-r2,.a-r3,.d-r1,.d-r2,.d-r3){opacity:0;transform:scale(.78);
  transition:opacity .9s var(--mo-ease),transform 1.1s var(--mo-ease)}
.mo-js .rings[data-mo] :is(.ld-r1,.ld-r2,.ld-r3,.rl){opacity:0;transition:opacity .8s var(--mo-ease)}
.mo-js .rings[data-mo] :is(.a-r1,.d-r1){transition-delay:.45s}
.mo-js .rings[data-mo] :is(.a-r2,.d-r2){transition-delay:.8s}
.mo-js .rings[data-mo] :is(.a-r3,.d-r3){transition-delay:1.15s}
.mo-js .rings[data-mo] :is(.ld-r1,.rl-r1){transition-delay:.85s}
.mo-js .rings[data-mo] :is(.ld-r2,.rl-r2){transition-delay:1.2s}
.mo-js .rings[data-mo] :is(.ld-r3,.rl-r3){transition-delay:1.55s}
.mo-js .rings[data-mo] .rl-t{transition-delay:1.9s}
.mo-js .rings[data-mo].mo-in *{opacity:1;transform:none}

/* margin curve: the line runs from −6 % up to +12 %, then the +12 % lands */
.who-c .chart *{transform-box:view-box}
.mo-js .who-c[data-mo] .c-line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.45,0,.25,1) .45s}
.mo-js .who-c.mo-in .c-line{stroke-dashoffset:0}
.mo-js .who-c[data-mo] :is(.c-zero,.c-axis,.c-neg,.c-val){opacity:0;transition:opacity .8s var(--mo-ease) .2s}
.mo-js .who-c[data-mo] :is(.c-pos,.c-big){opacity:0;transform:scale(.6);transform-origin:240px 30px;
  transition:opacity .7s var(--mo-ease) 1.9s,transform .9s cubic-bezier(.34,1.3,.5,1) 1.9s}
.mo-js .who-c.mo-in :is(.c-zero,.c-axis,.c-neg,.c-val,.c-pos,.c-big){opacity:1;transform:none}

/* ---------- 5. header comes back when you scroll up (solid navy, a little lower) ---------- */
.hd{transition:background-color .4s var(--mo-ease),box-shadow .4s var(--mo-ease)}
.hd.hd-pin{position:fixed;background:rgba(7,20,42,.96);box-shadow:0 1px 0 rgba(201,168,76,.22);
  transform:translateY(-110%);transition:transform .45s var(--mo-ease),background-color .4s var(--mo-ease)}
.hd.hd-pin.hd-show{transform:none}
.hd.hd-pin .hd-in{padding-top:10px;padding-bottom:10px}
@supports(backdrop-filter:blur(8px)){.hd.hd-pin{background:rgba(7,20,42,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}}

/* ---------- 6. small details under the mouse (computers only) ---------- */
@media(hover:hover){
  .lnk{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;background-origin:border-box;
    transition:background-size .5s var(--mo-ease),border-color .3s}
  .lnk:hover{background-size:100% 1px}
  .lnk svg{transition:transform .35s var(--mo-ease)}
  .lnk:hover svg{transform:translateX(3px)}
  .btn,.cbtn,.hd-cta{transition:background-color .3s,border-color .3s,color .3s,transform .35s var(--mo-ease)}
  .btn:hover,.cbtn:hover{transform:translateY(-1px)}
  .nav a,.ft a,.langs a{transition:color .25s}
  .nav a:hover{color:#fff}
  .team img{transition:filter .7s var(--mo-ease)}
  .team li:hover img{filter:grayscale(0)}
}

/* ---------- less motion requested, or printing: everything simply there ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media print{
  .mo-js [data-mo],.mo-js [data-mo] *{opacity:1!important;transform:none!important;stroke-dashoffset:0!important}
  .hd.hd-pin{position:absolute;transform:none}
}