/* ==========================================================================
   AHERF-CMBRC — Animation Layer
   Kept in its own file so the base design system (style.css) stays untouched
   and this layer can be reviewed, tuned or removed independently.

   Principles followed throughout:
   - Motion is functional (reveals structure, confirms interaction), never
     decorative-only or attention-grabbing for its own sake — appropriate for
     a scientific/institutional site.
   - Everything respects prefers-reduced-motion (WCAG 2.2 AA / the docx's
     accessibility requirement) via the block at the end of this file.
   - No animation blocks content: elements are visible by default and only
     animate if JavaScript successfully initializes (see js/animations.js).
   ========================================================================== */

:root{
  --anim-fast:.2s;
  --anim-base:.5s;
  --anim-slow:.7s;
  --anim-ease:cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------
   1. Scroll-reveal — fade + rise, applied by JS to section-level blocks
   -------------------------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity var(--anim-slow) var(--anim-ease),
             transform var(--anim-slow) var(--anim-ease);
  will-change:opacity, transform;
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}

/* Staggered children inside a revealed group (cards, grids). JS sets
   --stagger-index per child; capped so long lists don't feel sluggish. */
.reveal-child{
  opacity:0;
  transform:translateY(22px);
  transition:opacity var(--anim-base) var(--anim-ease),
             transform var(--anim-base) var(--anim-ease);
  transition-delay:calc(min(var(--stagger-index, 0), 8) * 70ms);
  will-change:opacity, transform;
}
.reveal-child.in-view{
  opacity:1;
  transform:translateY(0);
}

/* --------------------------------------------------------------------
   2. Hero entrance — plays once on load, not scroll-triggered
   -------------------------------------------------------------------- */
@keyframes heroRise{
  from{opacity:0; transform:translateY(22px);}
  to{opacity:1; transform:translateY(0);}
}
.hero .eyebrow{animation:heroRise var(--anim-slow) var(--anim-ease) both; animation-delay:.05s}
.hero h1{animation:heroRise var(--anim-slow) var(--anim-ease) both; animation-delay:.15s}
.hero p{animation:heroRise var(--anim-slow) var(--anim-ease) both; animation-delay:.28s}
.hero .btns{animation:heroRise var(--anim-slow) var(--anim-ease) both; animation-delay:.4s}
.hero .pipeline{animation:heroRise var(--anim-slow) var(--anim-ease) both; animation-delay:.32s}
.hero .pipeline .step{animation:heroRise var(--anim-base) var(--anim-ease) both}
.hero .pipeline .step:nth-child(1){animation-delay:.5s}
.hero .pipeline .step:nth-child(2){animation-delay:.58s}
.hero .pipeline .step:nth-child(3){animation-delay:.66s}
.hero .pipeline .step:nth-child(4){animation-delay:.74s}
.hero .pipeline .step:nth-child(5){animation-delay:.82s}
.hero .pipeline .step:nth-child(6){animation-delay:.9s}

/* --------------------------------------------------------------------
   3. Sticky header — subtle elevation once the page has scrolled
   -------------------------------------------------------------------- */
.topbar{transition:box-shadow var(--anim-fast) ease, background var(--anim-fast) ease}
.topbar.is-scrolled{box-shadow:0 10px 30px rgba(0,0,0,.22)}

/* Scroll-progress indicator */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--mint), var(--gold));
  z-index:70; transition:width .1s linear;
}
@media(max-width:1180px){.scroll-progress{top:0}}

/* --------------------------------------------------------------------
   4. Buttons & interactive chips — lift + shadow, not color-flip alone
   -------------------------------------------------------------------- */
.btn,.small-cta,.audience-card a,.pillar-actions a,.header-cta{
  transition:transform var(--anim-fast) var(--anim-ease),
             box-shadow var(--anim-fast) var(--anim-ease),
             background var(--anim-fast) ease;
}
.btn:hover,.small-cta:hover,.audience-card a:hover,.pillar-actions a:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(7,29,50,.16);
}
.btn:active,.small-cta:active{transform:translateY(0); box-shadow:none}
.header-cta:hover{transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.22)}

/* --------------------------------------------------------------------
   5. Cards — consistent hover lift across every card family
   -------------------------------------------------------------------- */
.page-card,.mini-card,.audience-card,.consortium-card,.clinical-route-card,
.support-card,.clarity-card,.process-card,.staff-card,.pillar-card,
.sp-pillar-card,.sp-page-card{
  transition:transform var(--anim-base) var(--anim-ease),
             box-shadow var(--anim-base) var(--anim-ease);
}
.mini-card:hover,.audience-card:hover,.consortium-card:hover,
.clinical-route-card:hover,.support-card:hover,.clarity-card:hover,
.process-card:hover,.staff-card:hover,.sp-page-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 44px rgba(7,29,50,.10);
}

/* --------------------------------------------------------------------
   6. Accordions — smooth open/close instead of instant display toggle.
   Overrides style.css's display:none/block with a max-height transition;
   the JS toggle logic (adding/removing .open) is completely unchanged.
   -------------------------------------------------------------------- */
.capabilities,.sp-panel,.ev-sub-panel{
  display:block !important;
  max-height:0;
  overflow:hidden;
  padding-top:0 !important;
  padding-bottom:0 !important;
  transition:max-height var(--anim-base) var(--anim-ease),
             padding var(--anim-base) var(--anim-ease);
}
.pillar-card.open .capabilities,
.sp-pillar-card.open .sp-panel,
.ev-subcard.open .ev-sub-panel{
  max-height:2400px;
  padding-top:0 !important;
  padding-bottom:20px !important;
}
.pillar-arrow,.sp-arrow,.ev-sub-arrow{transition:transform var(--anim-base) var(--anim-ease)}

/* --------------------------------------------------------------------
   7. Nav dropdowns — fade + slight rise instead of an instant snap
   -------------------------------------------------------------------- */
.dropdown{
  opacity:0;
  transform:translateY(-6px);
  transition:opacity var(--anim-fast) ease, transform var(--anim-fast) ease;
  pointer-events:none;
}
.nav-item:hover .dropdown,
.nav-item.menu-open .dropdown{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
@media(max-width:1180px){
  /* Static-position dropdowns on tablet/mobile: skip the transform so they
     don't visually jump against the stacked layout. */
  .dropdown{transform:none}
}

/* --------------------------------------------------------------------
   8. Section imagery — gentle zoom on hover, fade-in on reveal
   -------------------------------------------------------------------- */
.section-image{overflow:hidden}
.section-image img{transition:transform .8s var(--anim-ease)}
.section-image:hover img{transform:scale(1.045)}

/* --------------------------------------------------------------------
   9. Stat counters — used by animations.js for the homepage stat row
   -------------------------------------------------------------------- */
.stat-counting{color:var(--navy)}

/* --------------------------------------------------------------------
   11. Nav underline + small chip/pill hover feedback
   -------------------------------------------------------------------- */
.nav-item>a{position:relative}
.nav-item>a::after{
  content:"";position:absolute;left:10px;right:10px;bottom:4px;height:2px;
  background:var(--mint);transform:scaleX(0);transform-origin:left;
  transition:transform var(--anim-fast) var(--anim-ease);
}
.nav-item>a:hover::after{transform:scaleX(1)}
.trust-pill,.metric-pill{
  transition:transform var(--anim-fast) var(--anim-ease),
             box-shadow var(--anim-fast) var(--anim-ease);
}
.trust-pill:hover{transform:translateY(-3px); box-shadow:0 10px 22px rgba(7,29,50,.08)}
.flow-chip,.hierarchy-chip,.map-chip{transition:transform var(--anim-fast) var(--anim-ease)}
.flow-chip:hover,.hierarchy-chip:hover,.map-chip:hover{transform:translateY(-2px)}

/* --------------------------------------------------------------------
   10. Reduced motion — disable everything above for people who ask for it
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-child{opacity:1 !important; transform:none !important; transition:none !important;}
  .hero .eyebrow,.hero h1,.hero p,.hero .btns,.hero .pipeline,.hero .pipeline .step{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
  .btn,.small-cta,.audience-card a,.pillar-actions a,.header-cta,
  .page-card,.mini-card,.audience-card,.consortium-card,.clinical-route-card,
  .support-card,.clarity-card,.process-card,.staff-card,.pillar-card,
  .sp-pillar-card,.sp-page-card,.section-image img,.dropdown,
  .capabilities,.sp-panel,.ev-sub-panel,.pillar-arrow,.sp-arrow,.ev-sub-arrow,
  .topbar,.scroll-progress{
    transition:none !important;
    animation:none !important;
  }
  .btn:hover,.small-cta:hover,.mini-card:hover,.audience-card:hover,
  .consortium-card:hover,.clinical-route-card:hover,.support-card:hover,
  .clarity-card:hover,.process-card:hover,.staff-card:hover,.sp-page-card:hover,
  .trust-pill:hover,.flow-chip:hover,.hierarchy-chip:hover,.map-chip:hover{
    transform:none;
  }
  .nav-item>a::after{transition:none !important}
}