/**
 * Keshava Eye Care - Motion & Entrance Animations System
 * Minimal, GPU-accelerated entrance reveals triggered via Intersection Observer.
 * Features zero layout shift (CLS), prefers-reduced-motion support, and robust No-JS fallbacks.
 *
 * @package Keshava_Eye_Care
 */

:root {
  --motion-duration: 600ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-distance: 24px;
}

/* Default state: fully visible if JavaScript is disabled or not yet initialized */
[data-reveal] {
  opacity: 1;
  transform: none;
}

/* Initial hidden/offset state applied ONLY when IntersectionObserver JS controller initializes */
html.js-reveal-init [data-reveal]:not(.is-revealed) {
  opacity: 0;
  will-change: opacity, transform;
}

html.js-reveal-init [data-reveal="fade-up"]:not(.is-revealed) {
  transform: translateY(var(--motion-distance));
}

html.js-reveal-init [data-reveal="fade-down"]:not(.is-revealed) {
  transform: translateY(calc(var(--motion-distance) * -1));
}

html.js-reveal-init [data-reveal="fade-left"]:not(.is-revealed) {
  transform: translateX(var(--motion-distance));
}

html.js-reveal-init [data-reveal="fade-right"]:not(.is-revealed) {
  transform: translateX(calc(var(--motion-distance) * -1));
}

html.js-reveal-init [data-reveal="fade-in"]:not(.is-revealed) {
  transform: none;
}

/* Revealed state once element enters viewport */
html.js-reveal-init [data-reveal].is-revealed {
  opacity: 1;
  transform: translate(0, 0);
  transition: opacity var(--motion-duration) var(--motion-ease),
              transform var(--motion-duration) var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Stagger delay utilities */
html.js-reveal-init [data-reveal-delay="70"]  { transition-delay: 70ms; }
html.js-reveal-init [data-reveal-delay="80"]  { transition-delay: 80ms; }
html.js-reveal-init [data-reveal-delay="100"] { transition-delay: 100ms; }
html.js-reveal-init [data-reveal-delay="120"] { transition-delay: 120ms; }
html.js-reveal-init [data-reveal-delay="150"] { transition-delay: 150ms; }
html.js-reveal-init [data-reveal-delay="160"] { transition-delay: 160ms; }
html.js-reveal-init [data-reveal-delay="200"] { transition-delay: 200ms; }
html.js-reveal-init [data-reveal-delay="240"] { transition-delay: 240ms; }
html.js-reveal-init [data-reveal-delay="300"] { transition-delay: 300ms; }
html.js-reveal-init [data-reveal-delay="320"] { transition-delay: 320ms; }
html.js-reveal-init [data-reveal-delay="400"] { transition-delay: 400ms; }
html.js-reveal-init [data-reveal-delay="500"] { transition-delay: 500ms; }

/* Mobile simplification: convert horizontal directional reveals to Fade Up to eliminate horizontal overflow */
@media (max-width: 768px) {
  html.js-reveal-init [data-reveal="fade-left"]:not(.is-revealed),
  html.js-reveal-init [data-reveal="fade-right"]:not(.is-revealed) {
    transform: translateY(var(--motion-distance));
  }
}

/* Accessibility: Support prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html.js-reveal-init [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}