/* ==========================================================================
   Scroll Animations – قرار Landing Page
   Lightweight, GPU-accelerated animations triggered on scroll via
   IntersectionObserver. Honors prefers-reduced-motion.
   Uses data-animate attributes on elements + .revealed class (added by JS).
   data-stagger on a parent applies sequential transition-delays to children.
========================================================================== */

/* -- Guard: disabled when reduced motion is preferred ------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* -- Base: hidden state (before reveal) ---------------------------------- */
[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition-property: opacity, transform;
  transition-duration: 0.7s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0s;
}

/* -- Revealed state ----------------------------------------------------- */
[data-animate].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* -- Directional variants ---------------------------------------------- */
[data-animate="fade-down"] {
  transform: translateY(-24px);
}

[data-animate="fade-left"] {
  transform: translateX(-24px);
}

[data-animate="fade-right"] {
  transform: translateX(24px);
}

[data-animate="scale-fade"] {
  transform: scale(0.96);
}
[data-animate="scale-fade"].revealed {
  transform: scale(1);
}

/* -- Stagger: parent applies sequential delays to direct children ------- */
[data-stagger] {
  --stagger-base: 70ms;
}
[data-stagger] [data-animate] {
  transition-delay: calc(var(--stagger-index, 0) * var(--stagger-base));
}

/* -- Tremor (subtle shake on entry) ------------------------------------ */
@keyframes tremorShake {
  0%   { transform: rotate(0deg); }
  11%  { transform: rotate(-0.35deg); }
  22%  { transform: rotate(0.25deg); }
  33%  { transform: rotate(-0.2deg); }
  44%  { transform: rotate(0.15deg); }
  55%  { transform: rotate(-0.1deg); }
  66%  { transform: rotate(0.1deg); }
  77%  { transform: rotate(-0.05deg); }
  88%  { transform: rotate(0.05deg); }
  100% { transform: rotate(0deg); }
}

[data-animate="tremor"] {
  opacity: 0;
  transform: translateY(16px) scale(0.97);
}
[data-animate="tremor"].revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: tremorShake 0.7s ease-out 0.4s both;
}

/* -- Hero title: gentle float (infinite, subtle) ----------------------- */
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.heroFloat.revealed {
  animation: heroFloat 6s ease-in-out 0.7s infinite;
}

/* -- Scroll indicator: pulse (already in indexPage.scss, this enhances) - */
@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; transform: translateY(0); }
  50%      { opacity: 0.9; transform: translateY(5px); }
}

/* -- Pattern decorative elements: subtle parallax on scroll ------------- */
/*
   We avoid JS-based parallax to prevent scroll lag.
   Instead we apply a subtle static transform that feels alive.
*/

/* -- Mobile: lighter animations (performance) -------------------------- */
@media (max-width: 768px) {
  [data-animate] {
    transition-duration: 0.5s;
    transform: translateY(16px);
  }

  [data-animate="fade-left"],
  [data-animate="fade-right"] {
    transform: none;
  }
  [data-animate="fade-down"] {
    transform: translateY(-16px);
  }
  [data-animate="tremor"] {
    transform: translateY(12px) scale(0.97);
  }

  /* Shorter stagger on mobile */
  [data-stagger] {
    --stagger-base: 40ms;
  }

  /* Disable tremor animation on mobile for performance */
  [data-animate="tremor"].revealed {
    animation: none;
  }

  /* Reduce hero float intensity on mobile */
  .heroFloat.revealed {
    animation: heroFloat 8s ease-in-out 0.5s infinite;
  }
}

@media (max-width: 480px) {
  [data-animate] {
    transition-duration: 0.4s;
    transform: translateY(12px);
  }

  [data-stagger] {
    --stagger-base: 25ms;
  }
}