/* ═══════════════════════════════════════════════════════
   INNER-PAGE ANIMATION OVERRIDES — staging
   Loaded only on: Our Services (+ subpages), Resources
   (+ subpages), Contact Us. NOT loaded on the homepage.
   ═══════════════════════════════════════════════════════ */

/* ── Inner-page hero block: 2.5 s upward reveal, ease-out ── */
html.animations-ready .svc-hero-fade{
  opacity:0;
  transform:translateY(40px);
  transition:opacity 2500ms ease-out,transform 2500ms ease-out;
}
html.animations-ready .svc-hero-fade.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ── Stagger hero children line-by-line (label → title → paragraph).
   JS adds is-visible to all at once; transition-delay staggers the reveal. ── */
html.animations-ready .svc-hero > *:nth-child(2).svc-hero-fade{
  transition-delay:250ms;
}
html.animations-ready .svc-hero > *:nth-child(3).svc-hero-fade{
  transition-delay:500ms;
}

/* ── Section labels / titles / leads: 2.5 s, 40 px lift, ease-out ──
   Stagger already provided by .anim-delay-1/2/3 classes from main.css. ── */
html.animations-ready .anim-fade-up{
  transform:translateY(40px);
  transition:opacity 2500ms ease-out,transform 2500ms ease-out;
}
html.animations-ready .anim-fade-up.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ── Mobile: same 40 px lift, 2.5 s ── */
@media(max-width:768px){
  html.animations-ready .anim-fade-up{
    transform:translateY(40px);
    transition:opacity 2500ms ease-out,transform 2500ms ease-out;
  }
}

/* ── Honour reduced-motion ── */
@media(prefers-reduced-motion:reduce){
  html.animations-ready .svc-hero-fade,
  html.animations-ready .anim-fade-up{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
  html.animations-ready .svc-hero > *:nth-child(2).svc-hero-fade,
  html.animations-ready .svc-hero > *:nth-child(3).svc-hero-fade{
    transition-delay:0ms!important;
  }
}

/* ═══════════════════════════════════════════════════════
   RESOURCES PAGE CARDS — slow group reveal
   The inline script in resources/index.php synchronously
   renames .resources-grid → .resources-slow-grid before
   main.js runs, so main.js's ioCards never observes it.
   These layout rules mirror .resources-grid from main.css.
   ═══════════════════════════════════════════════════════ */

.resources-slow-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:56px;
}
@media(max-width:768px){
  .resources-slow-grid{grid-template-columns:1fr;}
}

/* Initial hidden state — JS reveals all cards at once via inline styles */
html.animations-ready .resources-slow-grid .resource-card:not(.anim-revealed){
  opacity:0;
  transform:translateY(40px);
}

@media(prefers-reduced-motion:reduce){
  html.animations-ready .resources-slow-grid .resource-card:not(.anim-revealed){
    opacity:1!important;
    transform:none!important;
  }
}