/* Shared motion for all CivicPulse pages.
   Everything here is switched off for visitors whose device asks for reduced motion. */

/* Smooth cross-fade when moving between pages (supported browsers; others just navigate normally). */
@view-transition { navigation: auto; }

html{scroll-behavior:smooth;}

@keyframes cp-rise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes cp-fade{from{opacity:0;}to{opacity:1;}}

/* Gentle color/border changes on anything interactive */
a, button, input, select, textarea,
.tab, .chip, .search-result-item, .home-link, .nav-cta, .btn-primary, .btn-secondary{
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
button:active, .btn-primary:active, .btn-secondary:active, .nav-cta:active{transform:translateY(1px);}

/* Content entering the page */
.anim-rise{animation:cp-rise .35s cubic-bezier(.2,.7,.3,1) both;}
.panel.active{animation:cp-rise .25s cubic-bezier(.2,.7,.3,1) both;}
.panel.active .record,
.panel.active .local-item,
.panel.active .community-item{animation:cp-rise .35s cubic-bezier(.2,.7,.3,1) both;}
.panel.active .record:nth-child(2), .panel.active .local-item:nth-child(2){animation-delay:.05s;}
.panel.active .record:nth-child(3), .panel.active .local-item:nth-child(3){animation-delay:.1s;}
.panel.active .record:nth-child(4), .panel.active .local-item:nth-child(4){animation-delay:.15s;}
.search-results.show{animation:cp-fade .15s ease-out;}
.gloss:hover::after, .gloss:focus::after, .gloss.show::after{animation:cp-fade .15s ease-out;}

/* Landing and primer page headers rise in on load, one line after another */
.hero > *, .page-head > *{animation:cp-rise .5s cubic-bezier(.2,.7,.3,1) both;}
.hero > :nth-child(2), .page-head > :nth-child(2){animation-delay:.07s;}
.hero > :nth-child(3), .page-head > :nth-child(3){animation-delay:.14s;}
.hero > :nth-child(4){animation-delay:.21s;}
.browser-frame{animation:cp-rise .6s .25s cubic-bezier(.2,.7,.3,1) both;}

@media (prefers-reduced-motion: reduce){
  @view-transition { navigation: none; }
  html{scroll-behavior:auto;}
  *, *::before, *::after{animation:none !important;transition:none !important;}
}