/* ==========================================================================
   DESHAJ INDIA ENTERPRISES — animations.css
   Subtle, premium motion. All of it is switched off automatically for people
   who ask their device to reduce motion (see the last block).

   Elements opt in with attributes (see js/animations.js):
     data-reveal            fade + slide up when scrolled into view
     data-reveal="image"    image "curtain" reveal + slow zoom-out
     data-reveal="fade"     plain fade
     data-split             headline reveals word by word
     style="--d:.15s"       optional delay (stagger)
   The .js class is added to <html> by a tiny inline script, so people without
   JavaScript still see all content.
   ========================================================================== */

.js [data-reveal]{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);transition-delay:var(--d,0s)}
.js [data-reveal="fade"]{transform:none}
.js [data-reveal].is-in{opacity:1;transform:none}

/* Image reveal — a clean upward "curtain" with a slow settle */
.js [data-reveal="image"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease-out);transition-delay:var(--d,0s)}
.js [data-reveal="image"].is-in{clip-path:inset(-80px)}
.js [data-reveal="image"] img{transform:scale(1.14);transition:transform 1.9s var(--ease-out);transition-delay:var(--d,0s)}
.js [data-reveal="image"].is-in img{transform:scale(1)}

/* Word-by-word headline reveal */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em .14em 0;margin:0 -.06em -.14em 0}
.w>span{display:inline-block;transform:translateY(105%);transition:transform 1s var(--ease-out);transition-delay:calc(var(--d,0s) + var(--i,0)*55ms)}
.is-in .w>span,.w.is-in>span{transform:none}

/* Image hover — gentle zoom */
.media--hover img{transition:transform 1.2s var(--ease-out)}
.media--hover:hover img{transform:scale(1.045)}
.js [data-reveal="image"].media--hover.is-in:hover img{transform:scale(1.045)}

/* Explorer numeral swap */
.explorer__numeral.is-swapping{opacity:0;transform:translateY(16px)}

/* Floating WhatsApp: soft attention ring, only twice so it never nags */
.wa-float__btn::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--whatsapp);opacity:0;animation:wa-ring 2.6s var(--ease) 2.5s 2}
@keyframes wa-ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.55);opacity:0}}

/* Header slides in on load */
.site-header{animation:header-in .8s var(--ease-out) both}
@keyframes header-in{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}

/* Success tick */
.notice--success.is-visible{animation:notice-in .6s var(--ease-out) both}
@keyframes notice-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* -------- Reduced motion: no movement, everything simply visible -------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js [data-reveal],.js [data-reveal="image"]{opacity:1;transform:none;clip-path:none}
  .js [data-reveal="image"] img{transform:none}
  .w>span{transform:none}
  .wa-float__btn::after{display:none}
}