/* ============================================================
   ELYSIAN FALSE CEILING — ANIMATIONS
   Scroll reveal, hover transitions, WhatsApp pulse,
   reduced motion, and keyframe definitions
   Section D.8
   ============================================================ */


/* ──────────────────────────────────────────
   SCROLL REVEAL — fade-up
   Applied by IntersectionObserver in scroll-reveal.js
────────────────────────────────────────── */

.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-reveal),
              transform var(--transition-reveal);
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays — applied via JS:
   element.style.transitionDelay = `${index * 100}ms`;
   Supported delay values: */

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* Fade-in only (no transform, used for overlays) */
.fade-in {
  opacity: 0;
  transition: opacity var(--transition-reveal);
}

.fade-in.visible {
  opacity: 1;
}

/* Fade-left */
.fade-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity var(--transition-reveal),
              transform var(--transition-reveal);
}

.fade-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Fade-right */
.fade-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity var(--transition-reveal),
              transform var(--transition-reveal);
}

.fade-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale-in */
.scale-in {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity var(--transition-reveal),
              transform var(--transition-reveal);
}

.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}


/* ──────────────────────────────────────────
   WHATSAPP PULSE — Component 10
   Pulse ring every 4 seconds
────────────────────────────────────────── */

@keyframes wa-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70%  { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}


/* ──────────────────────────────────────────
   COUNT-UP NUMBER — Trust Bar
   (Numbers animate from 0 to data-target)
────────────────────────────────────────── */

.count-num {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}


/* ──────────────────────────────────────────
   SKELETON LOADING
   For lazy-loaded images
────────────────────────────────────────── */

@keyframes skeleton-pulse {
  0%, 100% { background-position: -200% 0; }
  50%       { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface) 25%,
    #ede9e2 50%,
    var(--color-surface) 75%
  );
  background-size: 400% 100%;
  animation: skeleton-pulse 1.8s ease-in-out infinite;
  border-radius: var(--radius-md);
}


/* ──────────────────────────────────────────
   HERO PARALLAX
   Applied in JS — subtle 10–15% depth max
   (translate only — no scale or rotate)
────────────────────────────────────────── */

.hero-bg img {
  will-change: transform;
}


/* ──────────────────────────────────────────
   CARD HOVER — shared lift effect
   Defined in components.css, referenced here
────────────────────────────────────────── */

/* All interactive cards use:
   transition: transform 250ms ease, box-shadow 250ms ease;
   :hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
   Never use transition: all
*/


/* ──────────────────────────────────────────
   IMAGE ZOOM ON HOVER — Card images
   (scoped to card contexts)
────────────────────────────────────────── */

/* Already defined inside each card in components.css.
   transition: transform 400ms ease;
   :hover img { transform: scale(1.04); }
*/


/* ──────────────────────────────────────────
   BUTTON PRESS FEEDBACK
   Scale bounce on active (defined in components.css)
────────────────────────────────────────── */

/* .btn:active { transform: scale(0.99); } */


/* ──────────────────────────────────────────
   NAVBAR SCROLL TRANSITION
   background-color + border + shadow on .scrolled
   transition defined on .navbar in components.css
────────────────────────────────────────── */


/* ──────────────────────────────────────────
   FAQ CHEVRON ROTATION
   defined on .faq-chevron in components.css
────────────────────────────────────────── */


/* ──────────────────────────────────────────
   MOBILE MENU OVERLAY FADE
   defined on .mobile-menu in components.css
────────────────────────────────────────── */


/* ──────────────────────────────────────────
   DROPDOWN OPACITY
   defined on .dropdown-mega in components.css
────────────────────────────────────────── */


/* ──────────────────────────────────────────
   PAGE LOAD — body fade-in
────────────────────────────────────────── */

@keyframes body-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body {
  animation: body-fadein 350ms ease forwards;
}


/* ──────────────────────────────────────────
   TOOLTIP SLIDE
   WhatsApp float tooltip — defined in components.css
────────────────────────────────────────── */


/* ──────────────────────────────────────────
   GOLD UNDERLINE HOVER — nav links
   defined on .nav-link::after in components.css
   transform: scaleX(0 → 1) with transform-origin: left
────────────────────────────────────────── */


/* ──────────────────────────────────────────
   REDUCED MOTION — MUST override everything
   Section D.8
────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Keep fade-up elements visible — without animation */
  .fade-up,
  .fade-in,
  .fade-left,
  .fade-right,
  .scale-in {
    opacity: 1;
    transform: none;
  }

  /* WhatsApp pulse — off */
  .whatsapp-float {
    animation: none;
  }

  /* Hero parallax — off */
  .hero-bg img {
    will-change: auto;
  }

  /* Body fade-in — instant */
  body {
    animation: none;
  }
}