/* motion.css: reveal on scroll, hero entrance, hover lift. Same easing as the studio sites (cubic-bezier(.2,.7,.2,1)).
   Only opacity and transform animate, so nothing shifts layout. Everything is off without JS (html.js guard) and off
   for people who asked for reduced motion. */
:root{--ease:cubic-bezier(.2,.7,.2,1);--pop:cubic-bezier(.34,1.56,.64,1)}

/* scroll progress bar */
#prog{position:fixed;left:0;top:0;height:4px;width:100%;background:var(--gd);transform-origin:left;transform:scaleX(0);z-index:50;pointer-events:none}

/* reveal targets (class-free: the selectors themselves are the targets) */
html.js .band-ph .bt,html.js .band-ph .bs,html.js .ph,html.js .h2,html.js .chk,html.js .card,html.js .rec>div,html.js .about>div,html.js .vote>div,html.js .ballot,
html.js .facts li,html.js .story>div,html.js .lead,html.js footer .follow,html.js .cta .big,html.js .cta .line,
html.js .note,html.js .hd .kick,html.js .hd h1,html.js .hd p,html.js .keep>a{
  opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
html.js .in.in{opacity:1;transform:none}

/* section rule draws in */
html.js .h2:after{transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) .15s}
html.js .h2.in:after{transform:scaleX(1)}
html.js .h2 .ic{transform:scale(.6);opacity:0;transition:transform .5s var(--pop) .1s,opacity .3s .1s}
html.js .h2.in .ic{transform:scale(1);opacity:1}

html.js .badge{opacity:0;transform:scale(.7) rotate(-6deg);transition:transform .55s var(--pop) .2s,opacity .3s .2s}
html.js .badge.in{opacity:1;transform:none}
/* checkmark boxes tick in */
html.js .chk .box{transform:scale(.6) rotate(-8deg);opacity:0;transition:transform .55s var(--pop) .25s,opacity .3s .25s}
html.js .chk.in .box{transform:none;opacity:1}

/* hover lift on cards */
.card,.chk{transition:transform .35s var(--ease),box-shadow .35s var(--ease),opacity .5s var(--ease)}
.card:hover,.chk:hover{transform:translateY(-4px);box-shadow:0 14px 30px -14px rgba(20,37,79,.45)}
.card .src a{background:linear-gradient(var(--gd),var(--gd)) no-repeat 0 100%/0 2px;transition:background-size .3s var(--ease)}
.card:hover .src a,.card .src a:hover{background-size:100% 2px}

/* hero entrance (home) */
html.js .hero .kick,html.js .hero h1,html.js .hero .for,html.js .hero .punch{opacity:0;transform:translateX(-40px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js .hero .btns{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease) .45s,transform .6s var(--ease) .45s}
html.js .hero .photo{opacity:0;transform:scale(.84);transition:opacity .7s var(--ease),transform .9s var(--pop)}
html.js .hero .seal,html.js .hero img.emblem{opacity:0;transform:scale(.6);transition:opacity .4s .7s,transform .6s var(--pop) .7s}
html.js .hero.ready .kick{opacity:1;transform:none}
html.js .hero.ready h1{opacity:1;transform:none;transition-delay:.08s}
html.js .hero.ready .for{opacity:1;transform:none;transition-delay:.18s}
html.js .hero.ready .punch{opacity:1;transform:none;transition-delay:.28s}
html.js .hero.ready .btns,html.js .hero.ready .photo{opacity:1;transform:none}
html.js .hero.ready .seal,html.js .hero.ready img.emblem{opacity:1;transform:none}
html.js .rib{opacity:0;transform:translateX(40px);transition:opacity .6s var(--ease) .6s,transform .6s var(--ease) .6s}
html.js .rib.in,html.js .hero.ready+.rib{opacity:1;transform:none}

/* parallax layers (JS sets the transform) */
.plx{will-change:transform}

/* inner page header entrance */
html.js .hd.ready .kick,html.js .hd.ready h1,html.js .hd.ready p{opacity:1;transform:none}
html.js .hd h1{transition-delay:.08s}html.js .hd p{transition-delay:.18s}

@media (prefers-reduced-motion:reduce){
  html.js .h2,html.js .chk,html.js .card,html.js .rec>div,html.js .about>div,html.js .vote>div,html.js .ballot,html.js .facts li,
  html.js .story>div,html.js .lead,html.js footer .follow,html.js .cta .big,html.js .cta .line,html.js .note,html.js .hd .kick,
  html.js .hd h1,html.js .hd p,html.js .keep>a,html.js .h2:after,html.js .h2 .ic,html.js .chk .box,html.js .hero .kick,html.js .hero h1,
  html.js .band-ph .bt,html.js .band-ph .bs,html.js .ph,html.js .badge,html.js .hero .for,html.js .hero .punch,html.js .hero .btns,html.js .hero .photo,html.js .hero .seal,html.js .hero img.emblem,html.js .rib,.plx{
    opacity:1!important;transform:none!important;transition:none!important}
  #prog{display:none}
}

/* badge icon motion: plays once on reveal, replays on card hover (duplicate keyframes so hover restarts) */
@keyframes ic-gavel{0%{transform:rotate(0)}30%{transform:rotate(-22deg)}55%{transform:rotate(7deg)}72%{transform:rotate(-4deg)}100%{transform:rotate(0)}}
@keyframes ic-gavel-h{0%{transform:rotate(0)}30%{transform:rotate(-22deg)}55%{transform:rotate(7deg)}72%{transform:rotate(-4deg)}100%{transform:rotate(0)}}
html.js .badge[data-ic=accountability] img{transform-origin:78% 82%}
html.js .badge[data-ic=accountability].in img{animation:ic-gavel .9s cubic-bezier(.3,1.4,.5,1) .25s both}
html.js .card:hover .badge[data-ic=accountability] img,html.js .rec>div:hover .badge[data-ic=accountability] img{animation:ic-gavel-h .9s cubic-bezier(.3,1.4,.5,1) both!important}
@keyframes ic-hug{0%{transform:scale(1.16);opacity:.6}60%{transform:scale(.97);opacity:1}100%{transform:scale(1)}}
@keyframes ic-hug-h{0%{transform:scale(1.16);opacity:.6}60%{transform:scale(.97);opacity:1}100%{transform:scale(1)}}
html.js .badge[data-ic=families] img{transform-origin:50% 60%}
html.js .badge[data-ic=families].in img{animation:ic-hug .9s cubic-bezier(.3,1.4,.5,1) .25s both}
html.js .card:hover .badge[data-ic=families] img,html.js .rec>div:hover .badge[data-ic=families] img{animation:ic-hug-h .9s cubic-bezier(.3,1.4,.5,1) both!important}
@keyframes ic-rise{0%{transform:translateY(12px) scaleY(.85);opacity:0}70%{transform:translateY(-2px) scaleY(1.02);opacity:1}100%{transform:none}}
@keyframes ic-rise-h{0%{transform:translateY(12px) scaleY(.85);opacity:0}70%{transform:translateY(-2px) scaleY(1.02);opacity:1}100%{transform:none}}
html.js .badge[data-ic=infrastructure] img{transform-origin:50% 100%}
html.js .badge[data-ic=infrastructure].in img{animation:ic-rise .9s cubic-bezier(.3,1.4,.5,1) .25s both}
html.js .card:hover .badge[data-ic=infrastructure] img,html.js .rec>div:hover .badge[data-ic=infrastructure] img{animation:ic-rise-h .9s cubic-bezier(.3,1.4,.5,1) both!important}
@keyframes ic-pulse{0%{transform:scale(1)}30%{transform:scale(1.14)}50%{transform:scale(1)}70%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes ic-pulse-h{0%{transform:scale(1)}30%{transform:scale(1.14)}50%{transform:scale(1)}70%{transform:scale(1.08)}100%{transform:scale(1)}}
html.js .badge[data-ic=public-safety] img{transform-origin:50% 50%}
html.js .badge[data-ic=public-safety].in img{animation:ic-pulse .9s cubic-bezier(.3,1.4,.5,1) .25s both}
html.js .card:hover .badge[data-ic=public-safety] img,html.js .rec>div:hover .badge[data-ic=public-safety] img{animation:ic-pulse-h .9s cubic-bezier(.3,1.4,.5,1) both!important}
@keyframes ic-swing{0%{transform:rotate(-16deg)}35%{transform:rotate(12deg)}65%{transform:rotate(-6deg)}85%{transform:rotate(2deg)}100%{transform:rotate(0)}}
@keyframes ic-swing-h{0%{transform:rotate(-16deg)}35%{transform:rotate(12deg)}65%{transform:rotate(-6deg)}85%{transform:rotate(2deg)}100%{transform:rotate(0)}}
html.js .badge[data-ic=veterans] img{transform-origin:50% 8%}
html.js .badge[data-ic=veterans].in img{animation:ic-swing .9s cubic-bezier(.3,1.4,.5,1) .25s both}
html.js .card:hover .badge[data-ic=veterans] img,html.js .rec>div:hover .badge[data-ic=veterans] img{animation:ic-swing-h .9s cubic-bezier(.3,1.4,.5,1) both!important}
@keyframes ic-drop{0%{transform:translateY(-14px);opacity:0}55%{transform:translateY(3px);opacity:1}80%{transform:translateY(-1px)}100%{transform:none}}
@keyframes ic-drop-h{0%{transform:translateY(-14px);opacity:0}55%{transform:translateY(3px);opacity:1}80%{transform:translateY(-1px)}100%{transform:none}}
html.js .badge[data-ic=voting] img{transform-origin:50% 100%}
html.js .badge[data-ic=voting].in img{animation:ic-drop .9s cubic-bezier(.3,1.4,.5,1) .25s both}
html.js .card:hover .badge[data-ic=voting] img,html.js .rec>div:hover .badge[data-ic=voting] img{animation:ic-drop-h .9s cubic-bezier(.3,1.4,.5,1) both!important}
@keyframes ic-flip{0%{transform:perspective(300px) rotateY(90deg);opacity:0}60%{transform:perspective(300px) rotateY(-12deg);opacity:1}100%{transform:perspective(300px) rotateY(0)}}
@keyframes ic-flip-h{0%{transform:perspective(300px) rotateY(90deg);opacity:0}60%{transform:perspective(300px) rotateY(-12deg);opacity:1}100%{transform:perspective(300px) rotateY(0)}}
html.js .badge[data-ic=news] img{transform-origin:50% 50%}
html.js .badge[data-ic=news].in img{animation:ic-flip .9s cubic-bezier(.3,1.4,.5,1) .25s both}
html.js .card:hover .badge[data-ic=news] img,html.js .rec>div:hover .badge[data-ic=news] img{animation:ic-flip-h .9s cubic-bezier(.3,1.4,.5,1) both!important}
@media(prefers-reduced-motion:reduce){.badge img{animation:none!important}}
@keyframes ic-shine{0%{transform:scale(.6) rotate(-30deg);opacity:0}60%{transform:scale(1.12) rotate(6deg);opacity:1}100%{transform:scale(1) rotate(0)}}
@keyframes ic-shine-h{0%{transform:scale(.6) rotate(-30deg);opacity:0}60%{transform:scale(1.12) rotate(6deg);opacity:1}100%{transform:scale(1) rotate(0)}}
html.js .badge[data-ic=star] img{transform-origin:50% 50%}
html.js .badge[data-ic=star].in img{animation:ic-shine .9s cubic-bezier(.3,1.4,.5,1) .25s both}
html.js .card:hover .badge[data-ic=star] img{animation:ic-shine-h .9s cubic-bezier(.3,1.4,.5,1) both!important}