/* Portfolio Twenty One Group: motion layer (2.3).
   Loaded after styles.css. Every rule is scoped to html.mx, which js/motion.js sets only when
   the visitor has not asked for reduced motion, so without it the site is exactly as before. */

@media (prefers-reduced-motion:no-preference){

  /* ---------- Opening sequence ---------- */
  .mx .hdr,.mx .rail{animation:mx-fade .9s .55s ease-out backwards}
  .mx .dockwrap{animation:mx-rise .9s .75s cubic-bezier(.2,.7,.2,1) backwards}

  /* Home hero: the logo is uncovered left to right (no movement, so it stays pixel-sharp),
     the rules draw across, the headline arrives word by word, the rest follows. */
  .mx .hero-brand .logo-swap{animation:mx-wipe 1.2s .1s cubic-bezier(.65,0,.35,1) backwards}
  .mx .hero-eyebrow{animation:mx-rise .9s .5s cubic-bezier(.2,.7,.2,1) backwards}
  .mx .hero-grid.line,.mx .facts.line{border-top-color:transparent;background-image:linear-gradient(var(--line),var(--line));background-repeat:no-repeat;background-position:0 0;background-size:100% 1px;background-origin:border-box}
  .mx .hero-grid.line{animation:mx-draw 1.4s .2s cubic-bezier(.65,0,.35,1) backwards}
  .mx .facts.line{animation:mx-draw 1.4s .5s cubic-bezier(.65,0,.35,1) backwards}
  .mx .hero-aside > *{animation:mx-rise 1s cubic-bezier(.2,.7,.2,1) backwards}
  .mx .hero-aside > :nth-child(1){animation-delay:.75s}
  .mx .hero-aside > :nth-child(2){animation-delay:.9s}
  .mx .facts > *{animation:mx-rise 1s cubic-bezier(.2,.7,.2,1) backwards}
  .mx .facts > :nth-child(1){animation-delay:.85s}
  .mx .facts > :nth-child(2){animation-delay:.93s}
  .mx .facts > :nth-child(3){animation-delay:1.01s}
  .mx .facts > :nth-child(4){animation-delay:1.09s}

  /* Headlines that are split into words: until the script has split them, they simply fade in late,
     so a headline can never stay hidden. */
  .mx :is(.hero-title,.article-hero .article-title,.articles-head .h-sec,.page-head .h-sec):not(.mx-split):not(.mx-done){animation:mx-fade .6s .9s ease-out backwards}
  .mx .mx-word{display:inline-block;animation:mx-word 1.1s cubic-bezier(.2,.7,.2,1) backwards}

  /* Article and author banners. */
  .mx .article-crumbs{animation:mx-fade .8s .1s ease-out backwards}
  .mx .article-hero .article-standfirst,.mx .author-hero .btn-row{animation:mx-rise 1s .55s cubic-bezier(.2,.7,.2,1) backwards}
  .mx .article-hero-foot{animation:mx-rise 1s .7s cubic-bezier(.2,.7,.2,1) backwards}
  .mx .article-hero-bg{animation:mx-fade 1.6s ease-out backwards}
  .mx .article-hero-credit{animation:mx-fade 1s 1s ease-out backwards}
  .mx .articles-head > :not(:first-child),.mx .article-cats{animation:mx-rise 1s .45s cubic-bezier(.2,.7,.2,1) backwards}

  /* ---------- Parallax layers ---------- */
  /* The banner photo is taller than the banner, so it can travel without showing an edge. */
  .mx .article-hero-bg picture{position:absolute;left:0;right:0;top:-40%;height:140%}

  /* Card photos are scaled slightly so they can shift inside their frames; hovering eases them in. */
  .mx .acard-img picture{display:block;height:100%;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
  .mx .acard:hover .acard-img picture{transform:scale(1.04)}

  /* The shade that darkens a home section as the next one covers it. */
  .mx .stack > .wrap{position:relative;z-index:1}
  .mx .mx-shade{position:absolute;inset:0;z-index:2;background:#000;opacity:0;pointer-events:none}

  /* The footer details emerge from under the dark band above them. */
  .mx .site-footer .cta-band{position:relative;z-index:1}
}

@keyframes mx-fade{from{opacity:0}}
@keyframes mx-rise{from{opacity:0;transform:translateY(22px)}}
@keyframes mx-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes mx-draw{from{background-size:0% 1px}}
@keyframes mx-word{from{opacity:0;transform:translateY(.42em);filter:blur(8px)}}