/* Article reading motion / 2026-09-15
 *
 * The homepage was given a motion layer, which left the article pages -
 * where a reader actually spends their time - completely static. This is the
 * matching layer for them, and it is deliberately quieter than the homepage:
 * a reader who is reading must not be made to wait for anything.
 *
 * Body paragraphs are never animated. Only structural media and section
 * headings reveal, so text is always present for the reader, for search and
 * for anyone with JavaScript disabled.
 */

/* Reading progress: a thin accent line that reports position in the article. */
.article-progress{position:fixed;left:0;top:0;height:3px;width:0;z-index:120;background:linear-gradient(90deg,#0b76ad,#61c5ff);box-shadow:0 0 12px rgba(97,197,255,.5);transition:width .12s linear;pointer-events:none}

/* The hero settles into place once, on load, rather than snapping in. */
.article-hero{animation:amHeroSettle 1.5s cubic-bezier(.2,.72,.2,1) both}
@keyframes amHeroSettle{from{opacity:0;transform:scale(1.045)}to{opacity:1;transform:none}}

/* Structural blocks arrive on scroll. Text is not in this list. */
.article-motion .am-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.72,.2,1)}
.article-motion .am-reveal.is-visible{opacity:1;transform:none}

/* Section headings draw their rule as they arrive. */
.article-motion .article h2{position:relative}
.article-motion .article h2.am-reveal::after{content:"";display:block;width:0;height:2px;margin-top:12px;background:linear-gradient(90deg,#61c5ff,rgba(97,197,255,0));transition:width .85s cubic-bezier(.2,.72,.2,1) .2s}
.article-motion .article h2.am-reveal.is-visible::after{width:110px}

/* Related cards and the photo strip lift under the pointer, matching the homepage. */
.article-motion .article-related__card{transition:transform .35s cubic-bezier(.2,.75,.2,1),box-shadow .35s ease}
.article-motion .article-related__card:hover{transform:translateY(-6px);box-shadow:0 22px 54px rgba(5,23,36,.22)}
.article-motion .article-related__image{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.article-motion .article-related__card:hover .article-related__image{transform:scale(1.05)}
.article-motion .article-photo-strip figure img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.article-motion .article-photo-strip figure:hover img{transform:scale(1.04)}

@media(prefers-reduced-motion:reduce){
  .article-hero{animation:none!important}
  .article-motion .am-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .article-motion .article h2.am-reveal::after{width:110px;transition:none!important}
  .article-progress{transition:none!important}
}