/* ============================================================
   Digital You CIC — site-wide subtle motion layer
   Complements dycic.js (home-only reveal): extends scroll-reveal to
   ALL pages (dym-* classes, added by dycic-motion.js so nothing is
   ever hidden without JS), hero entrance via @starting-style
   (progressive enhancement), and hover/press micro-interactions.
   Only transform + opacity are animated (GPU-composited).
   Author: lukeduff.co.uk
   ============================================================ */

@media (prefers-reduced-motion: no-preference){

:root{--dym-ease:cubic-bezier(.23,1,.32,1)}

/* ---- §1 scroll-reveal (classes come from dycic-motion.js) ---- */
.dym-reveal{opacity:0;transform:translateY(16px);
  transition:opacity .55s var(--dym-ease),transform .55s var(--dym-ease)}
.dym-reveal.dym-in{opacity:1;transform:translateY(0)}

/* the brand sprinkle mark draws in just after its heading settles */
h2.dym-reveal::after{opacity:0;transform:scale(.55);transform-origin:50% 100%}
h2.dym-reveal.dym-in::after{opacity:1;transform:scale(1);
  transition:opacity .4s ease-out .2s,transform .45s var(--dym-ease) .2s}

/* ---- §2 hero entrance — pure CSS, no JS dependency ---- */
.hero h1{transition:opacity .6s ease-out,transform .6s var(--dym-ease)}
.hero p.lead,.hero .lead p,.hero .sub{
  transition:opacity .6s ease-out .09s,transform .6s var(--dym-ease) .09s}
.hero .cta-row,.hero .btns{
  transition:opacity .6s ease-out .18s,transform .6s var(--dym-ease) .18s}
.hero .pill-row{transition:opacity .6s ease-out .26s,transform .6s var(--dym-ease) .26s}
@starting-style{
  .hero h1,.hero p.lead,.hero .lead p,.hero .sub,
  .hero .cta-row,.hero .btns,.hero .pill-row{opacity:0;transform:translateY(14px)}
}

/* ---- §3 hover micro-interactions (real pointers only) ---- */
@media (hover:hover) and (pointer:fine){
  /* community mosaic: gentle photo zoom inside the existing card lift */
  .dycic-comm-grid li img{transition:transform .5s var(--dym-ease)}
  .dycic-comm-grid li:hover img{transform:scale(1.05)}

  /* "Where next?" cards: arrow leads the way */
  .dycic-rel-arrow{display:inline-block;transition:transform .3s var(--dym-ease)}
  .dycic-related-grid a:hover .dycic-rel-arrow{transform:translateX(4px)}

  /* icon chip gives a tiny nod with it */
  .dycic-rel-ic{transition:transform .3s var(--dym-ease)}
  .dycic-related-grid a:hover .dycic-rel-ic{transform:scale(1.06)}
}

/* ---- §4 press feedback — buttons acknowledge the click ---- */
a.btn:active,.elementor-button:active,.ff-btn-submit:active,
.dycic-404 .btns a:active,.dycic-404 .popular a:active,
.dycic-related-grid a:active{
  transform:translateY(0) scale(.97)!important;
  transition-duration:.1s!important}

} /* end prefers-reduced-motion */