/* VCS motion pack (main site, approved by Brian 11/1/2026). Wired in by gen.py, which copies this file to assets/css/motion.css.
   To use on the current design: link motion.css after site.css, add motion.js (defer) after site.js, and add this inline
   head script for the fallback page fade:
   <script>if(!('onpagereveal' in window)&&!(window.matchMedia&&matchMedia('(prefers-reduced-motion: reduce)').matches))document.documentElement.classList.add('cx-nvt')</script>
   Current palette only (black, slate, slate-dk, silver). */
/* ===== Motion pass (color preview only, 11/1/2026). All disabled under prefers-reduced-motion. ===== */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s;animation-timing-function:ease}
@keyframes cxIn{from{opacity:0}to{opacity:1}}
@keyframes cxUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes cxPop{0%{opacity:0;transform:scale(.85)}70%{opacity:1;transform:scale(1.06)}100%{transform:none}}
@keyframes cxKB{from{transform:scale(1) translate(0,0)}to{transform:scale(1.09) translate(-1.2%,-1%)}}
@keyframes cxStripe{from{background-position:0 0}to{background-position:0 40px}}
/* Fallback page fade (only when the browser lacks cross-document view transitions; class set by an inline head script) */
html.cx-nvt main,html.cx-nvt .site-footer{animation:cxIn .3s ease both}
html.cx-leaving main,html.cx-leaving .site-footer{opacity:0;transition:opacity .25s ease}
/* Ken Burns on the home hero photo */
.hero-x .hero-img{animation:cxKB 24s ease-in-out infinite alternate;transform-origin:60% 50%;will-change:transform}
/* Stat count-up / pop (classes added by color.js) */
.cx-pop{animation:cxPop .6s cubic-bezier(.2,.8,.2,1) backwards}
.stat-big,.tile .num{font-variant-numeric:tabular-nums}
/* Staggered reveal: children of revealed grids */
.js-reveal .reveal.in>.card,.js-reveal .reveal.in>.pillar,.js-reveal .reveal.in>.path,.js-reveal .reveal.in>.tile,.js-reveal .reveal.in>figure,
html.cx-motion .cx-stagger.cx-in>*{animation:cxUp .55s cubic-bezier(.2,.8,.2,1) backwards}
html.cx-motion .cx-stagger:not(.cx-in)>*{opacity:0}
.reveal.in>:nth-child(2),.cx-in>:nth-child(2){animation-delay:.08s!important}
.reveal.in>:nth-child(3),.cx-in>:nth-child(3){animation-delay:.16s!important}
.reveal.in>:nth-child(4),.cx-in>:nth-child(4){animation-delay:.24s!important}
.reveal.in>:nth-child(5),.cx-in>:nth-child(5){animation-delay:.32s!important}
.reveal.in>:nth-child(6),.cx-in>:nth-child(6){animation-delay:.4s!important}
.reveal.in>:nth-child(n+7),.cx-in>:nth-child(n+7){animation-delay:.46s!important}
/* Hover lift */
.card,.path,.pillar,.tile{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover,.path:hover,.tile:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(0,0,0,.16)}
.pillar:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.35);border-color:rgba(183,195,197,.6)}
/* Button shine */
.btn{position:relative;overflow:hidden;transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-75%;width:50%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));transform:skewX(-20deg);pointer-events:none;transition:left .55s ease}
.btn:hover::after{left:130%}
.btn:hover{transform:translateY(-1px)}
/* Animated hazard stripe on the safety band edge */
.band-safety::before{background:linear-gradient(135deg,var(--slate) 25%,var(--slate-dk) 25% 50%,var(--slate) 50% 75%,var(--slate-dk) 75%) 0 0/40px 40px;animation:cxStripe 2.4s linear infinite}
/* Header shrink + shadow on scroll (class set by color.js) */
.site-header{transition:box-shadow .25s ease}
.hdr{transition:min-height .25s ease}
.brand img{transition:height .25s ease}
html.cx-scrolled .site-header{box-shadow:0 6px 20px rgba(0,0,0,.18)}
@media(min-width:800px){html.cx-scrolled .hdr{min-height:60px}html.cx-scrolled .brand img{height:46px}}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .btn::after{display:none}
  .card:hover,.path:hover,.tile:hover,.pillar:hover,.btn:hover{transform:none}
  html.cx-motion .cx-stagger:not(.cx-in)>*{opacity:1}
  html.cx-leaving main,html.cx-leaving .site-footer{opacity:1}
}