/* ═══ MOTION.CSS — the motion layer's styles; motion.js adds the classes. Off under prefers-reduced-motion. ═══ */

/* 1. titles: the letters fade in and unblur one after another (a typewriter, 58ms apart, each letter landing quickly so they read one by one) from the moment the
   title is in view; the title's lines start with loose leading and settle with the scroll (--p, from motion.js) */
html.mo-on .mo-t .mo-w{white-space:nowrap;position:relative;top:calc((1 - var(--p,0)) * (.1em + var(--l,0) * .16em))}
html.mo-on .mo-t .mo-c{opacity:0;filter:blur(4px);transition:opacity .16s ease,filter .2s ease;transition-delay:calc(var(--i,0) * min(58ms, 1300ms / var(--n,20)))}   /* 58ms a letter, but a long title types in about 1.3s all told */
html.mo-on .mo-t.mo-in .mo-c{opacity:1;filter:blur(0)}
html.mo-on .mo-t .mo-c--word{display:inline-block;vertical-align:baseline}
/* a title the home page already reveals line by line keeps still as a block; its letters and lines do the reveal */
html.mo-on .mo-t .ln__in{transform:none !important;transition:none !important}
html.mo-on .mo-t .ln{overflow:visible !important}
html.mo-on .mo-t.rv,html.mo-on .mo-p.rv{opacity:1 !important;transform:none !important;transition:none !important}

/* 2. the big paragraphs (22px and up): each line starts lower than the one above it (loose leading) and the block tightens into its set
   line height as it climbs the screen; the words fade in with it */
html.mo-on .mo-p .mo-pw{position:relative;top:calc((1 - var(--p,0)) * (.12em + var(--l,0) * .2em));opacity:calc(.3 + var(--p,0) * .7)}

/* 3. pictures: the frame clips, the picture is a tenth larger and drifts up to 6% of its height with the scroll */
html.mo-on .mo-px{will-change:transform;transform:scale(1.1);transition:none}
@media (max-width:860px){ html.mo-on .mo-px{transform:none !important} }

/* 3b. a rule line draws itself from the left (motion.js swaps a border for this bar) */
html.mo-on .mo-rule{position:absolute;left:0;right:0;display:block;transform:scaleX(0);transform-origin:0 50%;transition:transform 1.5s cubic-bezier(.65,0,.2,1);pointer-events:none}
html.mo-on .mo-rule.mo-in{transform:scaleX(1)}

/* 4. between pages: only the wipe, no mark (Julian, 6 Oct). On a click a flat panel sweeps in from the left with a
   slanted edge over the page; the next page arrives behind the same panel, which is cut away at once by the same
   slanted wipe while the page settles from slightly large. The arrival is pure CSS. */
.mo-veil{position:fixed;inset:0;z-index:2147483600;background:#F3F3EF;pointer-events:none;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);animation:mo-reveal .8s cubic-bezier(.8,0,.2,1) .12s both}
.mo-veil img{display:none}
@keyframes mo-reveal{from{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}to{clip-path:polygon(100% 0,100% 0,100% 100%,112% 100%)}}
html.mo-on main{animation:mo-page-settle 1.1s cubic-bezier(.2,.7,.2,1) .3s both;transform-origin:50% 30%}
@keyframes mo-page-settle{from{transform:scale(1.02)}to{transform:none}}
/* leaving */
.mo-veil.is-leaving{pointer-events:auto;animation:mo-cover .4s cubic-bezier(.8,0,.2,1) both}
@keyframes mo-cover{from{clip-path:polygon(0 0,0 0,-12% 100%,0 100%)}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}
html.mo-on.mo-leave main{animation:none}
@media (prefers-reduced-motion:reduce){ .mo-veil{display:none} html main{animation:none} }

/* 5. the menus: rows come in one after the other once the menu is open. The panels are display:none until they
   open, so a transition would not run; these are keyframe animations, which start the moment the rows appear.
   Phone menu: 110ms apart; the Products panel: 110ms apart after 140ms. */
@keyframes mo-row{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
html.mo-on #navMenu.is-in .menu__links > li > a,html.mo-on #navMenu.is-in .menu__sub > li,html.mo-on #navMenu.is-in .menu__all,html.mo-on #navMenu.is-in .menu__acts > *{
  animation:mo-row .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(80ms + var(--k,0) * 110ms)}
html.mo-on .nav__drop.is-open #navDrop a{animation:mo-row .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(140ms + var(--k,0) * 110ms)}



/* 3a. a column that moves at its own speed with the scroll (motion.js sets the transform each frame) */
html.mo-on .mo-mv{will-change:transform}

/* 3c. blocks rise a little as they come into view; a block in view at the start carries .mo-now and does not move */
html.mo-on .mo-up{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .95s cubic-bezier(.2,.7,.2,1)}
html.mo-on .mo-up.mo-in{opacity:1;transform:none}
html.mo-on .mo-up.mo-now{transition:none}

/* the hero's own reveals (its headline lines and .rv blocks, run by home.js on load) wait for the wipe to clear too */
html.mo-on .hero .display--hero .ln:nth-child(1) .ln__in{transition-delay:.95s !important}
html.mo-on .hero .display--hero .ln:nth-child(2) .ln__in{transition-delay:1.05s !important}
html.mo-on .hero .display--hero .ln:nth-child(3) .ln__in{transition-delay:1.15s !important}
html.mo-on .hero .display--hero .ln:nth-child(4) .ln__in{transition-delay:1.25s !important}
html.mo-on .hero .rv:not(.display--hero){transition-delay:calc(.95s + var(--d,0s)) !important}
html.mo-on .pp-hero .rv,html.mo-on .pl-hero .rv{transition-delay:calc(.95s + var(--d,0s)) !important}


/* 3d. the dark slides' pictures breathe (Julian, 7 Oct): a slow zoom from 1 to 1.07 and back over 18 seconds, eased,
   each slide starting at a different point so they are never in step */
html.mo-on .hc-port__pic{animation:mo-breathe 18s ease-in-out infinite alternate;transform-origin:50% 50%;will-change:transform}
html.mo-on .hc-port__slide[data-i="1"] .hc-port__pic{animation-delay:-5s}
html.mo-on .hc-port__slide[data-i="2"] .hc-port__pic{animation-delay:-10s}
html.mo-on .hc-port__slide[data-i="3"] .hc-port__pic{animation-delay:-14s}
@keyframes mo-breathe{from{transform:scale(1)}to{transform:scale(1.07)}}
@media (prefers-reduced-motion:reduce){ html .hc-port__pic{animation:none} }
/* phones: the slide clips the breathing picture inside its own rounded card, and the breath is smaller (to 1.04) so
   the picture never reaches the caption card above it */
@media (max-width:760px){
  html.mo-on .hc-port__slide{overflow:hidden;border-radius:14px}
  html.mo-on .hc-port__pic{animation-name:mo-breathe-s}
  @keyframes mo-breathe-s{from{transform:scale(1)}to{transform:scale(1.04)}}
}

/* 3e. the dark slides change like a slider (Julian, 7 Oct): the one leaving moves out to the left as it fades, the
   next comes in from the right, its caption a beat behind. Desktop only; phones show one slide in the flow. */
@media (min-width:761px){
  html.mo-on .hc-port__slide{transform:translate3d(7%,0,0);transition:opacity .55s ease,visibility .55s ease,transform .85s cubic-bezier(.2,.7,.2,1)}
  html.mo-on .hc-port__slide.is-on{transform:none}
  html.mo-on .hc-port__slide.is-out{transform:translate3d(-7%,0,0);transition:opacity .45s ease,visibility .45s ease,transform .7s cubic-bezier(.4,0,.6,1)}
  html.mo-on .hc-port__slide .hc-port__cap{transform:translate3d(28px,0,0);opacity:0;transition:transform .8s cubic-bezier(.2,.7,.2,1) .12s,opacity .5s ease .12s}
  html.mo-on .hc-port__slide.is-on .hc-port__cap{transform:none;opacity:1}
  html.mo-on .hc-port{overflow:hidden}
}