/**
 * JaganArt - Modern Initial Appear & Scroll Reveal Animations
 * Optimized for 60fps compositor performance with WCAG reduced motion support.
 */

:root {
  --anim-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --anim-duration-base: 0.8s;
  --anim-duration-quick: 0.6s;
}

/* Guard against background ambient blobs blocking mouse/touch interactions */
.bg-glow {
  pointer-events: none !important;
}

/* -------------------------------------------------------------
   1. KEYFRAMES FOR PAGE-LOAD ENTRANCE (Above-the-fold)
   ------------------------------------------------------------- */
@keyframes appearFadeUp {
  0% {
    opacity: 0;
    transform: translateY(26px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes appearFadeDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes appearFadeLeft {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes appearFadeRight {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes appearFade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes appearZoom {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(18px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes appearPop {
  0% {
    opacity: 0;
    transform: scale(0.82) translateY(14px);
  }
  70% {
    transform: scale(1.03) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* -------------------------------------------------------------
   2. ENTRANCE CLASSES (CSS-driven for instant page load)
   ------------------------------------------------------------- */
.appear-fade-up {
  animation: appearFadeUp var(--anim-duration-base) var(--anim-ease-out) both;
}

.appear-fade-down {
  animation: appearFadeDown var(--anim-duration-base) var(--anim-ease-out) both;
}

.appear-fade-left {
  animation: appearFadeLeft var(--anim-duration-base) var(--anim-ease-out) both;
}

.appear-fade-right {
  animation: appearFadeRight var(--anim-duration-base) var(--anim-ease-out) both;
}

.appear-fade {
  animation: appearFade var(--anim-duration-base) var(--anim-ease-out) both;
}

.appear-zoom {
  animation: appearZoom var(--anim-duration-base) var(--anim-ease-out) both;
}

.appear-pop {
  animation: appearPop var(--anim-duration-base) var(--anim-ease-spring) both;
}

/* -------------------------------------------------------------
   3. SCROLL-TRIGGERED REVEAL SYSTEM
   ------------------------------------------------------------- */
/* Fallback: when JS is disabled, elements are always visible */
html:not(.js) .reveal-on-scroll {
  opacity: 1 !important;
  transform: none !important;
}

/* Base state when JS is active and waiting for viewport entry */
html.js .reveal-on-scroll {
  opacity: 0;
  transform: translateY(26px);
  transition-property: opacity, transform;
  transition-duration: var(--anim-duration-base);
  transition-timing-function: var(--anim-ease-out);
  will-change: opacity, transform;
}

/* Reveal direction variants */
html.js .reveal-on-scroll.reveal-fade-up {
  transform: translateY(26px);
}

html.js .reveal-on-scroll.reveal-fade-down {
  transform: translateY(-20px);
}

html.js .reveal-on-scroll.reveal-fade-left {
  transform: translateX(30px);
}

html.js .reveal-on-scroll.reveal-fade-right {
  transform: translateX(-30px);
}

html.js .reveal-on-scroll.reveal-fade {
  transform: none;
}

html.js .reveal-on-scroll.reveal-zoom {
  transform: scale(0.92) translateY(18px);
}

/* Active revealed state */
html.js .reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* -------------------------------------------------------------
   4. CHOREOGRAPHED STAGGER DELAYS
   ------------------------------------------------------------- */
.delay-50 {
  animation-delay: 50ms;
  transition-delay: 50ms;
}

.delay-100 {
  animation-delay: 100ms;
  transition-delay: 100ms;
}

.delay-150 {
  animation-delay: 150ms;
  transition-delay: 150ms;
}

.delay-200 {
  animation-delay: 200ms;
  transition-delay: 200ms;
}

.delay-250 {
  animation-delay: 250ms;
  transition-delay: 250ms;
}

.delay-300 {
  animation-delay: 300ms;
  transition-delay: 300ms;
}

.delay-350 {
  animation-delay: 350ms;
  transition-delay: 350ms;
}

.delay-400 {
  animation-delay: 400ms;
  transition-delay: 400ms;
}

.delay-450 {
  animation-delay: 450ms;
  transition-delay: 450ms;
}

.delay-500 {
  animation-delay: 500ms;
  transition-delay: 500ms;
}

.delay-600 {
  animation-delay: 600ms;
  transition-delay: 600ms;
}

.delay-700 {
  animation-delay: 700ms;
  transition-delay: 700ms;
}

.delay-800 {
  animation-delay: 800ms;
  transition-delay: 800ms;
}

/* -------------------------------------------------------------
   5. ACCESSIBILITY: REDUCED MOTION PREFERENCE
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .appear-fade-up,
  .appear-fade-down,
  .appear-fade-left,
  .appear-fade-right,
  .appear-fade,
  .appear-zoom,
  .appear-pop,
  html.js .reveal-on-scroll {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}