/* motion: October 2026 scroll reveal, counters, hero photo, button finish (agent A) */

/* ------------------------------------------------------------
   Scroll reveal
   js/fx-motion.js adds html.motion-ready once it has run, tags the
   content it will reveal with .m-reveal (fade and 18px rise) or .m-fade
   (fade only, for the wrappers of the 3D pieces), and adds .is-in when
   the element enters the viewport. Nothing is hidden until the script has
   run, so the page is complete without JavaScript. The animation fills
   backwards only: once it has played, the element is back on its own
   styles with no transform left behind, so hover lifts and the WebGL
   crate are untouched.
   ------------------------------------------------------------ */
html.motion-ready .m-reveal:not(.is-in),
html.motion-ready .m-fade:not(.is-in){opacity:0}
html.motion-ready .m-reveal.is-in{animation:m-reveal .6s cubic-bezier(.22,.61,.36,1) var(--m-d,0ms) backwards}
html.motion-ready .m-fade.is-in{animation:m-fade .6s ease-out var(--m-d,0ms) backwards}
@keyframes m-reveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes m-fade{from{opacity:0}to{opacity:1}}

/* ------------------------------------------------------------
   Counters (Coverage stats: 50, 16+, 1, 2)
   While a count runs the number sits in its own inline block with tabular
   digits and a min-width (set by the script to the final text width), so
   the suffix never moves. Both are removed when the count ends.
   ------------------------------------------------------------ */
.cov__num.m-counting{font-variant-numeric:tabular-nums}
.cov__num .m-num{display:inline-block;text-align:left}

/* ------------------------------------------------------------
   Hero photo: a very slow zoom on the dock photo, and a soft fade
   from the navy hero into the top of the photo.
   ------------------------------------------------------------ */
.hero-photo-band.m-hero-photo{position:relative;overflow:hidden;isolation:isolate}
.hero-photo-band.m-hero-photo::before{content:"";position:absolute;left:0;right:0;top:0;height:90px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,var(--navy-2,#0E2747) 0%,rgba(14,39,71,.55) 45%,rgba(14,39,71,0) 100%)}
.hero-photo-band.m-hero-photo .hero-photo-band__img{transform-origin:50% 50%;animation:m-zoom 22s ease-in-out infinite alternate;will-change:transform;backface-visibility:hidden}
@keyframes m-zoom{from{transform:scale(1)}to{transform:scale(1.035)}}

/* ------------------------------------------------------------
   Button and link finish
   ------------------------------------------------------------ */
/* Trailing arrow slides 3px on hover (the script wraps a trailing arrow in .m-arrow) */
.btn .m-arrow{display:inline-block;transition:transform .18s ease}
.btn:hover .m-arrow,.btn:focus-visible .m-arrow{transform:translateX(3px)}
/* Soft red glow on the Send a Requirement buttons */
.btn.m-glow:hover,.btn.m-glow:focus-visible{box-shadow:0 8px 22px rgba(179,25,66,.34),0 2px 6px rgba(179,25,66,.22)}
/* Text links inside paragraphs grow an underline from the left */
.m-ul{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .25s ease}
.m-ul:hover,.m-ul:focus-visible{background-size:100% 1px}

/* ------------------------------------------------------------
   Reduced motion: everything visible, no transforms, no delays.
   The hero fade stays; the zoom and the count do not run.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html.motion-ready .m-reveal:not(.is-in),
  html.motion-ready .m-fade:not(.is-in){opacity:1}
  html.motion-ready .m-reveal.is-in,
  html.motion-ready .m-fade.is-in{animation:none}
  .hero-photo-band.m-hero-photo .hero-photo-band__img{animation:none;will-change:auto}
  .btn .m-arrow,.m-ul{transition:none}
  .btn:hover .m-arrow,.btn:focus-visible .m-arrow{transform:none}
}
@media print{
  html.motion-ready .m-reveal,html.motion-ready .m-fade{opacity:1!important;animation:none!important}
  .hero-photo-band.m-hero-photo .hero-photo-band__img{animation:none}
}