/* ============================================================
   Animations
   ============================================================ */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeLeft{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeRight{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulseRing{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.6);opacity:0}}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.15)}}
@keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes ripple{to{transform:scale(4);opacity:0}}
@keyframes blink{50%{opacity:0}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Reveal on scroll (JS toggles .reveal-in) */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal-left{opacity:0;transform:translateX(-30px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal-right{opacity:0;transform:translateX(30px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal-scale{opacity:0;transform:scale(.92);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in,.reveal-left.in,.reveal-right.in,.reveal-scale.in{opacity:1;transform:none}

/* Staggered children */
.stagger>*{opacity:0;transform:translateY(20px);transition:opacity .6s ease, transform .6s ease}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(1){transition-delay:.05s}
.stagger.in>*:nth-child(2){transition-delay:.12s}
.stagger.in>*:nth-child(3){transition-delay:.19s}
.stagger.in>*:nth-child(4){transition-delay:.26s}
.stagger.in>*:nth-child(5){transition-delay:.33s}
.stagger.in>*:nth-child(6){transition-delay:.40s}
.stagger.in>*:nth-child(7){transition-delay:.47s}
.stagger.in>*:nth-child(n+8){transition-delay:.54s}

/* Type effect */
.typing{border-right:2px solid var(--gold);animation:blink 1s step-end infinite;padding-right:2px}

/* Hover utilities */
.hover-lift{transition:transform .3s ease, box-shadow .3s ease}
.hover-lift:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.hover-scale{transition:transform .3s ease}
.hover-scale:hover{transform:scale(1.03)}
.link-underline{position:relative}
.link-underline::after{
  content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .35s ease;
}
.link-underline:hover::after{transform:scaleX(1);transform-origin:left}

/* Page transition */
.page-fade{animation:fadeUp .6s ease both}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .reveal,.reveal-left,.reveal-right,.reveal-scale,.stagger>*{opacity:1;transform:none}
}

/* ============================================================
   Rich card imagery + hover animations
   (Manifesto pillars, Events, Volunteer roles, Page heroes)
   ============================================================ */

/* Hero banner backgrounds for content pages */
.page-hero{position:relative;overflow:hidden;isolation:isolate}
.page-hero.has-bg{
  min-height:340px;display:flex;align-items:center;
  color:#fff;background-size:cover;background-position:center;
}
.page-hero.has-bg::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,rgba(15,26,61,.85),rgba(15,26,61,.55) 60%,rgba(201,40,45,.55));
}
.page-hero.has-bg h1,.page-hero.has-bg p,.page-hero.has-bg .crumbs,
.page-hero.has-bg .crumbs a{color:#fff}
.page-hero.has-bg .crumbs a:hover{color:var(--gold)}

/* Card media (thumbnail on top of pillar/event/value cards) */
.card-media{
  position:relative;overflow:hidden;border-radius:calc(var(--radius) - 4px);
  aspect-ratio:16/10;margin-bottom:1rem;background:#0f1a3d;
}
.card-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}
.card-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(15,26,61,.45));
  opacity:.6;transition:opacity .4s ease;
}

/* Pillar card enhancements */
.pillar{overflow:hidden;position:relative}
.pillar .card-media{aspect-ratio:16/9}
.pillar:hover .card-media img{transform:scale(1.09);filter:saturate(1.15)}
.pillar:hover .card-media::after{opacity:.25}

/* Event card enhancements — layout keeps date on left */
.event{overflow:hidden;position:relative;transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease}
.event:hover{transform:translateY(-4px)}
.event .event__media{
  overflow:hidden;border-radius:calc(var(--radius) - 4px);
  aspect-ratio:16/10;margin-top:.75rem;background:#0f1a3d;
}
.event .event__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}
.event:hover .event__media img{transform:scale(1.08);filter:brightness(1.05) saturate(1.1)}
.event .event__date{transition:transform .4s ease}
.event:hover .event__date{transform:rotate(-2deg) scale(1.03)}

/* Volunteer role cards */
.value{overflow:hidden;position:relative;transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease}
.value .card-media{aspect-ratio:16/10;margin:-1.5rem -1.5rem 1rem}
.value .card-media img{filter:saturate(.9)}
.value:hover .card-media img{transform:scale(1.1);filter:saturate(1.15)}
.value:hover .card-media::after{opacity:.2}
.value:hover{border-color:transparent;box-shadow:0 22px 50px -18px rgba(15,26,61,.35)}
.value__icon{
  position:relative;z-index:1;margin-top:-2.25rem;
  box-shadow:0 8px 20px -6px rgba(15,26,61,.4);
}

/* Subtle floating glow on any hoverable card */
.pillar:hover,.event:hover{
  box-shadow:0 24px 55px -20px rgba(15,26,61,.35), 0 0 0 1px rgba(201,40,45,.15);
}