/* Home hero: cross-fading slides, headlines that animate in, and a stat ticker. */

/* Top-aligned, exactly as the inner-page heads are: the home hero's copy
   changes with every slide, so bottom-aligning made the whole block jump up and
   down as the headlines changed length. */
.heroslider{
  min-height:var(--bandh);
  display:flex;align-items:flex-start;
  padding-block:clamp(48px,6vw,76px);
  border-bottom:1px solid var(--rule);
}
.heroslider .slides{position:absolute;inset:0;z-index:0;overflow:hidden}
.heroslider .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.heroslider .slide.is-on{opacity:1}
.heroslider .slide img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.05);
  will-change:transform;
}
.heroslider .slide.is-on img{animation:kenburns 9.5s linear forwards}
@keyframes kenburns{
  from{transform:scale(1.04) translate3d(0,0,0)}
  to  {transform:scale(1.13) translate3d(-1.4%,-1.1%,0)}
}

.heroslider .inner{width:100%;position:relative;z-index:2}
.heroslider .eyebrow{
  min-height:1em;
  letter-spacing:.22em;
}
.heroslider h1{
  margin-top:11px;max-width:16ch;
  font-size:clamp(2.2rem,6vw,4.1rem);
  min-height:2.1em;
}
.heroslider h1 em{font-style:normal;color:var(--red-on-dark)}
.heroslider h1 .ln{display:block}
.heroslider .lede{margin-top:14px;max-width:54ch;min-height:2.6em}
.heroslider .go{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap}

/* words rise into place, one after another */
.heroslider .w{
  display:inline-block;
  opacity:0;transform:translateY(.55em);
  animation:wordrise .62s cubic-bezier(.19,.72,.23,1) forwards;
}
@keyframes wordrise{ to{opacity:1;transform:translateY(0)} }
.heroslider .fade{opacity:0;animation:softin .8s ease .12s forwards}
@keyframes softin{ to{opacity:1} }

/* ---- slide controls ---- */
.heroslider .dots{display:flex;gap:8px;align-items:center;margin-top:30px;flex-wrap:wrap}
.heroslider .dot{
  width:30px;height:4px;border:0;padding:0;cursor:pointer;border-radius:2px;
  background:rgba(242,245,250,.32);position:relative;overflow:hidden;
  transition:background .3s ease,width .3s ease;
}
.heroslider .dot:hover{background:rgba(242,245,250,.55)}
.heroslider .dot[aria-selected="true"]{width:54px;background:rgba(242,245,250,.28)}
.heroslider .dot[aria-selected="true"]::after{
  content:"";position:absolute;inset:0;transform-origin:left;
  background:var(--red-on-dark);animation:dotfill var(--hold,7s) linear forwards;
}
@keyframes dotfill{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
.heroslider.is-paused .dot[aria-selected="true"]::after{animation-play-state:paused}
.heroslider .dot:focus-visible{outline:2px solid var(--red-on-dark);outline-offset:3px}

.heroslider .count{
  margin-left:6px;font-family:var(--f-display);font-size:.72rem;letter-spacing:.12em;
  color:rgba(242,245,250,.55);font-variant-numeric:tabular-nums;
}

/* ---- inner-page slider ----
   Shares the slide bed, the cross-fade and the dots with the home hero, but the
   words are fixed, so none of the min-heights that reserve room for changing
   copy apply, and nothing animates in on load. */
.ps h1,.ps .lede,.ps .eyebrow{min-height:0}
.ps .dots{margin-top:26px}
.ps .slide.is-on img{animation-duration:11s}
.ps .shotnote{
  position:absolute;right:16px;bottom:12px;z-index:3;margin:0;
  font-family:var(--f-display);font-size:.68rem;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(242,245,250,.55);
  opacity:0;transition:opacity .5s ease;pointer-events:none;
  max-width:min(46ch,60%);text-align:right;
}
.ps .shotnote.is-on{opacity:1}
@media (max-width:760px){
  .ps .shotnote{display:none}
}

@media (max-width:760px){
  .heroslider .scrim{
    background:
      linear-gradient(to bottom, rgba(6,10,20,.91) 0%, rgba(6,10,20,.78) 42%,
                      rgba(6,10,20,.40) 74%, rgba(6,10,20,.14) 100%);
  }
  .heroslider h1{min-height:0;max-width:none}
  .heroslider .lede{min-height:0}
}

/* ---- the moving stat ticker ---- */
.ticker{
  position:relative;overflow:hidden;
  background:var(--navy);border-bottom:1px solid var(--rule);
  padding-block:11px;
}
.ticker::before,.ticker::after{
  content:"";position:absolute;top:0;bottom:0;width:70px;z-index:2;pointer-events:none;
}
.ticker::before{left:0;background:linear-gradient(90deg,var(--navy),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--navy),transparent)}
.ticker .track{
  display:flex;width:max-content;
  animation:tickscroll 64s linear infinite;
}
.ticker:hover .track{animation-play-state:paused}
@keyframes tickscroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ticker .item{
  display:flex;align-items:center;gap:11px;padding-inline:26px;white-space:nowrap;
  font-family:var(--f-display);font-size:.86rem;font-weight:500;letter-spacing:.02em;
  color:rgba(242,245,250,.8);
}
/* Also not red — same reason as the eyebrow: small text on the navy band. */
.ticker .item b{color:#FFFFFF;font-weight:700}
.ticker .item::after{content:"";width:4px;height:4px;border-radius:50%;background:rgba(242,245,250,.3);margin-left:22px}

/* ---- respect a stated preference for less movement ---- */
@media (prefers-reduced-motion:reduce){
  .heroslider .slide.is-on img{animation:none;transform:scale(1.02)}
  .heroslider .slide{transition:none}
  .heroslider .w{opacity:1;transform:none;animation:none}
  .heroslider .fade{opacity:1;animation:none}
  .heroslider .dot[aria-selected="true"]::after{animation:none;transform:scaleX(1)}
  .ticker .track{animation:none;width:auto;overflow-x:auto}
  .ticker{overflow-x:auto}
}