/* Home Air Compass motion layer. Original CSS/JS patterns; no component runtime. */

/* A quiet dot field gives the light editorial heroes more depth. */
.hero,.archive-hero,.simple-hero{position:relative;isolation:isolate}
.hero::before,.archive-hero::before,.simple-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(45,90,74,.16) 1px,transparent 1.6px);
  background-size:28px 28px;mask-image:linear-gradient(90deg,transparent 20%,#000 100%);
  opacity:.55;animation:dot-drift 22s linear infinite alternate;
}
@keyframes dot-drift{to{background-position:56px 28px}}
.hero>.wrap,.archive-hero>.wrap,.simple-hero>.wrap{position:relative;z-index:1}

/* Editorial hero: one fluid headline and a compass orbit over the image. */
.hero h1{line-height:1.05;text-wrap:balance}
.js .hero-copy>.eyebrow{animation:hero-arrive .65s .08s both}
.js .hero-copy h1{animation:hero-arrive .8s .14s both}
.js .hero-lead{animation:hero-arrive .8s .42s both}
.js .hero-actions{animation:hero-arrive .8s .54s both}
.js .hero-footnote{animation:hero-arrive .8s .64s both}
.js .hero-media{animation:hero-photo-arrive .9s .2s both}
@keyframes hero-arrive{from{opacity:.35;transform:translate3d(0,18px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes hero-photo-arrive{from{opacity:.5;transform:translate3d(22px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.hero-media img{transform:scale(1.035) translate3d(var(--hero-shift-x,0px),var(--hero-shift-y,0px),0);transition:transform .35s ease-out}
.hero-orbit{position:absolute;top:26px;right:26px;display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:rgba(255,254,250,.88);box-shadow:0 16px 45px rgba(20,49,38,.14);color:var(--forest);pointer-events:none}
.hero-orbit>span{font-size:2rem;line-height:1}
.hero-orbit::before{content:"";position:absolute;inset:10px;border:1px dashed rgba(24,63,54,.56);border-radius:50%;animation:compass-turn 26s linear infinite}
.hero-orbit::after{content:"";position:absolute;top:6px;left:calc(50% - 4px);width:8px;height:8px;border-radius:50%;background:var(--copper)}
@keyframes compass-turn{to{transform:rotate(360deg)}}

/* Shimmer-like accents stay on actions, not on body text. */
.button,.search-submit{position:relative;overflow:hidden;isolation:isolate}
.button::before,.search-submit::before{content:"";position:absolute;inset:-2px;pointer-events:none;background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.22) 50%,transparent 64%);transform:translateX(-125%);animation:action-glint 7s ease-in-out infinite}
@keyframes action-glint{0%,68%{transform:translateX(-125%)}83%,100%{transform:translateX(125%)}}
.button>span,.search-submit>span{display:inline-block;transition:transform .22s}
.button:hover>span,.button:focus-visible>span,.search-submit:hover>span,.search-submit:focus-visible>span{transform:translate(3px,-3px)}
.under-link{position:relative}
.under-link:hover,.under-link:focus-visible{color:var(--forest)}
.under-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--forest);transition:background .25s,height .25s}
.under-link:hover::after,.under-link:focus-visible::after{height:2px;background:var(--copper)}
.under-link>span{display:inline-block;transition:transform .2s}
.under-link:hover>span,.under-link:focus-visible>span{transform:translateY(3px)}

/* Navigation and topic links respond to both pointer and keyboard focus. */
.brand-mark,.footer-brand>span{transition:transform .5s cubic-bezier(.2,.7,.25,1)}
.brand:hover,.brand:focus-visible{color:var(--ink)}
.footer-brand:hover,.footer-brand:focus-visible{color:#fff;text-decoration:none}
.brand:hover .brand-mark,.brand:focus-visible .brand-mark,.footer-brand:hover>span,.footer-brand:focus-visible>span{transform:rotate(45deg)}
.nav-list a{position:relative}
.nav-list a:hover,.nav-list a:focus-visible{color:var(--forest)}
.nav-list a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--copper);transform:scaleX(0);transform-origin:left;transition:transform .22s}
.nav-list a:hover::after,.nav-list a:focus-visible::after{transform:scaleX(1)}
.explore-links a{position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,background .25s}
.explore-links a::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(168,195,178,.22) 50%,transparent 70%);transform:translateX(-100%);transition:transform .55s}
.explore-links a:hover,.explore-links a:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow)}
.explore-links a:hover::before,.explore-links a:focus-visible::before{transform:translateX(100%)}
.explore-links a>span:last-child,.article-end-links a>span:last-child{transition:transform .2s}
.explore-links a:hover>span:last-child,.explore-links a:focus-visible>span:last-child,.article-end-links a:hover>span:last-child,.article-end-links a:focus-visible>span:last-child{transform:translate(3px,-3px)}

/* Sections feel alive without shifting layout or hiding indexable copy. */
.method-photo{position:relative}
.method-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 33%,rgba(255,255,255,.11) 49%,transparent 64%);background-size:220% 100%;animation:photo-glint 11s linear infinite}
@keyframes photo-glint{0%,65%{background-position:150% 0}100%{background-position:-110% 0}}
.method-steps li{position:relative}
.method-steps li::before{content:"";position:absolute;top:-1px;left:0;width:100%;height:2px;background:#c5ddc9;transform:scaleX(0);transform-origin:left;transition:transform .55s}
.method-steps li:hover::before,.method-steps li.is-in-view::before{transform:scaleX(1)}
.method-steps li:nth-child(2){animation-delay:.08s}
.method-steps li:nth-child(3){animation-delay:.16s}
.archive-image img,.article-hero-image img{transition:transform .7s cubic-bezier(.2,.7,.25,1)}
@media(hover:hover){.archive-image:hover img,.article-hero-image:hover img{transform:scale(1.035)}}
.js .archive-layout>div:first-child,.js .article-heading{animation:hero-arrive .7s .1s both}
.js .archive-image,.js .article-hero-image{animation:hero-photo-arrive .75s .15s both}
.article-media img{transition:filter .3s,transform .5s}
@media(hover:hover){.article-media img:hover{filter:saturate(1.06);transform:scale(1.008)}}
.article-end-links a{transition:color .2s,padding-left .2s}
.article-end-links a:hover,.article-end-links a:focus-visible{padding-left:5px;color:var(--forest-2)}

/* Scroll-linked chapter cue in the article outline. */
.toc li{transition:border-color .2s,background .2s,padding-left .2s}
.toc li.is-current{border-left-color:var(--copper);background:rgba(168,195,178,.18);padding-left:18px}
.toc a[aria-current="location"]{color:var(--forest);font-weight:700}
.search-form-icon svg,.header-search span:first-child{transition:transform .25s}
.search-form:focus-within .search-form-icon svg{transform:scale(1.08) rotate(-8deg)}
.header-search:hover span:first-child,.header-search:focus-visible span:first-child{transform:rotate(-18deg) scale(1.1)}
.js .search-topic-links a{animation:hero-arrive .5s both}
.js .search-topic-links a:nth-of-type(1){animation-delay:.12s}
.js .search-topic-links a:nth-of-type(2){animation-delay:.2s}
.js .search-topic-links a:nth-of-type(3){animation-delay:.28s}
.js .search-topic-links a:nth-of-type(4){animation-delay:.36s}

@media(max-width:960px){.nav-list a::after{display:none}.nav-list a:hover,.nav-list a:focus-visible{background:var(--mist)}.hero-orbit{width:76px;height:76px;top:18px;right:18px}.hero-orbit>span{font-size:1.6rem}}
@media(max-width:560px){.hero-orbit{width:62px;height:62px;top:13px;right:13px}.hero-orbit>span{font-size:1.35rem}.hero-orbit::before{inset:7px}.hero-orbit::after{top:3px}.hero::before,.archive-hero::before,.simple-hero::before{opacity:.32}.hero-media img{transform:none}}
@media(prefers-reduced-motion:reduce){
  .hero::before,.archive-hero::before,.simple-hero::before,.hero-orbit::before,.button::before,.search-submit::before,.method-photo::after{animation:none!important}
  .js .hero-copy>.eyebrow,.js .hero-copy h1,.js .hero-lead,.js .hero-actions,.js .hero-footnote,.js .hero-media,.js .archive-layout>div:first-child,.js .article-heading,.js .archive-image,.js .article-hero-image{animation:none!important}
  .hero-media img{transform:none!important}
  .brand-mark,.footer-brand>span,.explore-links a,.archive-image img,.article-hero-image img,.article-media img,.button>span,.search-submit>span{transition:none!important}
  .brand:hover .brand-mark,.footer-brand:hover>span,.explore-links a:hover,.archive-image:hover img,.article-hero-image:hover img,.article-media img:hover{transform:none!important}
}