/* =============================================================
   TARA INDIA — animations.css
   Scroll-triggered entrance animations (no library dependency)
   Uses Intersection Observer via animations.js
   ============================================================= */


/* ── 1. KEYFRAMES ───────────────────────────────────────────── */

@keyframes ti-fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ti-fadeInLeft {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes ti-fadeInRight {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes ti-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ti-zoomIn {
  from { opacity: 0; transform: scale(0.93); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes ti-popIn {
  0%   { opacity: 0; transform: scale(0.8); }
  70%  { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes ti-slideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── 2. BASE STATE (hidden before observe) ───────────────────── */

[data-ti-animate] {
  opacity: 0;
  will-change: opacity, transform;
}

/* Elements already in viewport on load are shown immediately */
[data-ti-animate].ti-in-view {
  opacity: 1;
}


/* ── 3. ANIMATED STATE (class added by JS) ───────────────────── */

[data-ti-animate].ti-animated {
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-duration: 0.65s;
}

[data-ti-animate="fadeInUp"].ti-animated    { animation-name: ti-fadeInUp; }
[data-ti-animate="fadeInLeft"].ti-animated  { animation-name: ti-fadeInLeft; }
[data-ti-animate="fadeInRight"].ti-animated { animation-name: ti-fadeInRight; }
[data-ti-animate="fadeIn"].ti-animated      { animation-name: ti-fadeIn; animation-duration: 0.8s; }
[data-ti-animate="zoomIn"].ti-animated      { animation-name: ti-zoomIn; }
[data-ti-animate="popIn"].ti-animated       { animation-name: ti-popIn; animation-duration: 0.55s; }
[data-ti-animate="slideDown"].ti-animated   { animation-name: ti-slideDown; }


/* ── 4. STAGGER DELAYS ──────────────────────────────────────── */

[data-ti-delay="100"].ti-animated { animation-delay: 0.10s; }
[data-ti-delay="150"].ti-animated { animation-delay: 0.15s; }
[data-ti-delay="200"].ti-animated { animation-delay: 0.20s; }
[data-ti-delay="250"].ti-animated { animation-delay: 0.25s; }
[data-ti-delay="300"].ti-animated { animation-delay: 0.30s; }
[data-ti-delay="400"].ti-animated { animation-delay: 0.40s; }
[data-ti-delay="500"].ti-animated { animation-delay: 0.50s; }


/* ── 5. HERO ANIMATIONS (page load, not scroll) ─────────────── */

.page-hero__img {
  animation: ti-fadeIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.page-hero__gradient-overlay {
  animation: ti-fadeIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}


/* ── 6. REDUCED MOTION OVERRIDE ─────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  [data-ti-animate],
  [data-ti-animate].ti-animated {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .page-hero__img,
  .page-hero__gradient-overlay {
    animation: none !important;
  }
}