/* credo-animations.css — Scroll-triggered reveal animations for My Credo.
   Uses data-anim on containers and data-anim-child="N" for staggered children.
   credo-animations.js adds .anim-in when each container enters the viewport. */

/* ── Base state: hidden until observed ── */
[data-anim]{
  --anim-delay:0ms;
}
[data-anim]:not(.anim-in) [data-anim-child]{
  opacity:0;
}

/* ── Hero copy: children slide up with stagger ── */
[data-anim="hero-copy"]:not(.anim-in) [data-anim-child]{
  transform:translateY(26px);
}
[data-anim="hero-copy"].anim-in [data-anim-child]{
  opacity:1;
  transform:none;
  transition:opacity .8s cubic-bezier(.2,.65,.25,1),
             transform .8s cubic-bezier(.2,.65,.25,1);
}
[data-anim="hero-copy"].anim-in [data-anim-child="1"]{transition-delay:100ms}
[data-anim="hero-copy"].anim-in [data-anim-child="2"]{transition-delay:400ms}
[data-anim="hero-copy"].anim-in [data-anim-child="3"]{transition-delay:650ms}
[data-anim="hero-copy"].anim-in [data-anim-child="4"]{transition-delay:900ms}

/* ── Hero photo: fade and slide from right ── */
[data-anim="hero-provenance"]:not(.anim-in) [data-anim-child]{
  transform:translateX(40px);
}
[data-anim="hero-provenance"].anim-in [data-anim-child]{
  opacity:1;
  transform:none;
  transition:opacity .8s cubic-bezier(.2,.65,.25,1),
             transform .8s cubic-bezier(.2,.65,.25,1);
}
[data-anim="hero-provenance"].anim-in [data-anim-child="1"]{transition-delay:500ms}

/* ── Stagger: generic children slide up ── */
[data-anim="stagger"]:not(.anim-in) [data-anim-child]{
  transform:translateY(26px);
}
[data-anim="stagger"].anim-in [data-anim-child]{
  opacity:1;
  transform:none;
  transition:opacity .7s cubic-bezier(.2,.65,.25,1),
             transform .7s cubic-bezier(.2,.65,.25,1);
}
[data-anim="stagger"].anim-in [data-anim-child="1"]{transition-delay:0ms}
[data-anim="stagger"].anim-in [data-anim-child="2"]{transition-delay:200ms}
[data-anim="stagger"].anim-in [data-anim-child="3"]{transition-delay:400ms}
[data-anim="stagger"].anim-in [data-anim-child="4"]{transition-delay:600ms}
[data-anim="stagger"].anim-in [data-anim-child="5"]{transition-delay:800ms}
[data-anim="stagger"].anim-in [data-anim-child="6"]{transition-delay:1000ms}

/* ── Fade-scale: single element grows in ── */
[data-anim="fade-scale"]{
  opacity:0;
  transform:scale(.94);
  transition:opacity .8s cubic-bezier(.2,.65,.25,1),
             transform .8s cubic-bezier(.2,.65,.25,1);
}
[data-anim="fade-scale"].anim-in{
  opacity:1;
  transform:none;
}

/* ── Fade-up: single element slides up ── */
[data-anim="fade-up"]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.2,.65,.25,1),
             transform .8s cubic-bezier(.2,.65,.25,1);
}
[data-anim="fade-up"].anim-in{
  opacity:1;
  transform:none;
}

/* ── Slide-right: element enters from the right ── */
[data-anim="slide-right"]{
  opacity:0;
  transform:translateX(60px);
  transition:opacity .9s cubic-bezier(.2,.65,.25,1),
             transform .9s cubic-bezier(.2,.65,.25,1);
}
[data-anim="slide-right"].anim-in{
  opacity:1;
  transform:none;
}

/* ── Hero logo: fades in over the banner image ── */
[data-anim="hero-logo"]{
  opacity:0;
  transform:translateY(16px) scale(.95);
  transition:opacity 1.2s cubic-bezier(.2,.65,.25,1) .3s,
             transform 1.2s cubic-bezier(.2,.65,.25,1) .3s;
}
[data-anim="hero-logo"].anim-in{
  opacity:1;
  transform:none;
}

/* ── Reduced motion: show everything, no transitions ── */
@media(prefers-reduced-motion:reduce){
  [data-anim],
  [data-anim] [data-anim-child],
  [data-anim="slide-right"],
  [data-anim="hero-logo"]{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}