/* ============================================================
   Azram LLC — Animation system
   Reveal-on-scroll + micro-interactions
   Usage: add data-anim="up|down|left|right|zoom" to any element
          optional data-d="250"  -> stagger delay in ms
          optional data-stagger="80" on a parent -> auto-stagger
          its direct children (up)
   ============================================================ */

/* --- entrance states (only when JS is on, via <html class="js">) --- */
.js [data-anim]{
  opacity:0;
  transition:opacity .8s cubic-bezier(.16,1,.3,1),
             transform .8s cubic-bezier(.16,1,.3,1),
             filter .8s ease;
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
.js [data-anim="up"]{transform:translateY(38px)}
.js [data-anim="down"]{transform:translateY(-32px)}
.js [data-anim="left"]{transform:translateX(-48px)}
.js [data-anim="right"]{transform:translateX(48px)}
.js [data-anim="zoom"]{transform:scale(.92)}
.js [data-anim].in-view{opacity:1;transform:none}

/* --- button light sweep on hover --- */
.btn{position:relative;overflow:hidden}
.btn::after{
  content:"";position:absolute;top:0;left:-130%;
  width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-20deg);
  transition:left .65s ease;
  pointer-events:none;
}
.btn:hover::after{left:135%}

/* --- respect users who opt out of motion --- */
@media(prefers-reduced-motion:reduce){
  .js [data-anim]{opacity:1!important;transform:none!important;transition:none!important}
  .btn::after{display:none}
}