/* ========================================
   WGMA — Elementor-style Entrance Animations
   Matches animations used on demowgmahockey.com
   ======================================== */

/* Elements start hidden ONLY when JS is active (progressive enhancement) */
html.js-animations [data-animate]{opacity:0;will-change:transform,opacity}

html.js-animations [data-animate].anim-visible{animation-duration:1s;animation-fill-mode:both;opacity:1}

html.js-animations [data-animate="fadeInLeft"].anim-visible{animation-name:fadeInLeft}
html.js-animations [data-animate="zoomInLeft"].anim-visible{animation-name:zoomInLeft}
html.js-animations [data-animate="slideInRight"].anim-visible{animation-name:slideInRight}
html.js-animations [data-animate="bounceIn"].anim-visible{animation-name:bounceIn}
html.js-animations [data-animate].anim-slow.anim-visible{animation-duration:2s}

@keyframes fadeInLeft{0%{opacity:0;transform:translateX(-40px)}100%{opacity:1;transform:none}}
@keyframes zoomInLeft{0%{opacity:0;transform:scale(.46) translateX(-32px)}100%{opacity:1;transform:scale(1) translateX(0)}}
@keyframes slideInRight{0%{opacity:0;transform:translateX(120px)}100%{opacity:1;transform:none}}
@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}100%{opacity:1;transform:scale(1)}}

@media(max-width:780px){
  /* Keep mobile simple: slides are too wide on small screens */
  html.js-animations [data-animate="zoomInLeft"].anim-visible{animation-name:fadeInLeft}
  html.js-animations [data-animate="slideInRight"].anim-visible{animation-name:fadeInLeft}
}