/**
 * Scroll Animate — CSS
 *
 * Defines the hidden (pre-animation) states for each [data-aos] value
 * and the revealed (.aos-animate) state.
 *
 * RULES:
 *  1. Only animate `opacity` and `transform` — both are compositor-only
 *     properties and will never trigger layout or paint.
 *  2. Hidden state uses `aos-init` (added by JS) so elements are visible
 *     when JS is disabled (progressive enhancement / graceful degradation).
 *  3. `prefers-reduced-motion: reduce` → all elements shown instantly.
 */

/* ── Reduced-motion override ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce), (max-width: 799px) {
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* ── Base hidden state (applied only after JS adds .aos-init) ────────── */
[data-aos].aos-init {
  opacity: 0;
}

/* ── Revealed state ──────────────────────────────────────────────────── */
[data-aos].aos-animate {
  opacity: 1;
  transform: none;
}

/* ====================================================================
   Animation presets — hidden-state transforms.
   The revealed state is always { opacity:1; transform:none; }
   ==================================================================== */

/* ── Fade (no movement) ──────────────────────────────────────────────── */
[data-aos="fade"].aos-init {
  /* opacity-only; no transform needed */
}

/* ── Fade + directional slide ────────────────────────────────────────── */
[data-aos="fade-up"].aos-init {
  transform: translateY(16px);
}

[data-aos="fade-down"].aos-init {
  transform: translateY(-16px);
}

[data-aos="fade-left"].aos-init {
  transform: translateX(16px);
}

[data-aos="fade-right"].aos-init {
  transform: translateX(-16px);
}

/* ── Fade + diagonal ─────────────────────────────────────────────────── */
[data-aos="fade-up-right"].aos-init {
  transform: translate(-16px, 16px);
}

[data-aos="fade-up-left"].aos-init {
  transform: translate(16px, 16px);
}

[data-aos="fade-down-right"].aos-init {
  transform: translate(-16px, -16px);
}

[data-aos="fade-down-left"].aos-init {
  transform: translate(16px, -16px);
}

/* ── Zoom ────────────────────────────────────────────────────────────── */
[data-aos="zoom-in"].aos-init {
  transform: scale(0.95);
}

[data-aos="zoom-in-up"].aos-init {
  transform: scale(0.95) translateY(16px);
}

[data-aos="zoom-in-down"].aos-init {
  transform: scale(0.95) translateY(-16px);
}

[data-aos="zoom-in-left"].aos-init {
  transform: scale(0.95) translateX(16px);
}

[data-aos="zoom-in-right"].aos-init {
  transform: scale(0.95) translateX(-16px);
}

[data-aos="zoom-out"].aos-init {
  transform: scale(1.15);
}

/* ── Fade + zoom (used by service-page tile animations) ──────────────── */
[data-aos="fade-zoom-in"].aos-init {
  transform: scale(0.96);
}

/* ── Slide (opacity stays 1 — override base) ─────────────────────────── */
[data-aos="slide-up"].aos-init {
  opacity: 1;
  transform: translateY(100%);
}

[data-aos="slide-down"].aos-init {
  opacity: 1;
  transform: translateY(-100%);
}

[data-aos="slide-left"].aos-init {
  opacity: 1;
  transform: translateX(100%);
}

[data-aos="slide-right"].aos-init {
  opacity: 1;
  transform: translateX(-100%);
}

/* ── Flip ────────────────────────────────────────────────────────────── */
[data-aos="flip-up"].aos-init {
  transform: perspective(2500px) rotateX(-80deg);
}

[data-aos="flip-down"].aos-init {
  transform: perspective(2500px) rotateX(80deg);
}

[data-aos="flip-left"].aos-init {
  transform: perspective(2500px) rotateY(-80deg);
}

[data-aos="flip-right"].aos-init {
  transform: perspective(2500px) rotateY(80deg);
}

/* ====================================================================
   Extended presets — Pop, Grow, Reveal, Blur, Rotate, Zoom-out
   ==================================================================== */

/* ── Pop (scale from 0.5 — pair with overshoot easing, auto-applied) ── */
[data-aos="pop"].aos-init {
  transform: scale(0.5);
}

[data-aos="pop-up"].aos-init {
  transform: scale(0.5) translateY(16px);
}

[data-aos="pop-down"].aos-init {
  transform: scale(0.5) translateY(-16px);
}

[data-aos="pop-left"].aos-init {
  transform: scale(0.5) translateX(-16px);
}

[data-aos="pop-right"].aos-init {
  transform: scale(0.5) translateX(16px);
}

/* ── Grow (scale from 0) ─────────────────────────────────────────────── */
[data-aos="grow"].aos-init {
  transform: scale(0);
}

[data-aos="grow-up"].aos-init {
  transform: scale(0) translateY(16px);
}

[data-aos="grow-down"].aos-init {
  transform: scale(0) translateY(-16px);
}

[data-aos="grow-left"].aos-init {
  transform: scale(0) translateX(-16px);
}

[data-aos="grow-right"].aos-init {
  transform: scale(0) translateX(16px);
}

/* ── Reveal (clip-path wipe — opacity stays 1) ───────────────────────── */
[data-aos^="reveal"].aos-init {
  opacity: 1;
}

[data-aos="reveal-up"].aos-init {
  clip-path: inset(100% 0 0 0);
}

[data-aos="reveal-down"].aos-init {
  clip-path: inset(0 0 100% 0);
}

[data-aos="reveal-left"].aos-init {
  clip-path: inset(0 100% 0 0);
}

[data-aos="reveal-right"].aos-init {
  clip-path: inset(0 0 0 100%);
}

[data-aos^="reveal"].aos-animate {
  clip-path: inset(0 0 0 0);
}

/* ── Blur (filter blur + optional directional slide) ─────────────────── */
[data-aos="blur"].aos-init {
  filter: blur(10px);
}

[data-aos="blur-up"].aos-init {
  filter: blur(10px);
  transform: translateY(16px);
}

[data-aos="blur-down"].aos-init {
  filter: blur(10px);
  transform: translateY(-16px);
}

[data-aos="blur-left"].aos-init {
  filter: blur(10px);
  transform: translateX(-16px);
}

[data-aos="blur-right"].aos-init {
  filter: blur(10px);
  transform: translateX(16px);
}

[data-aos^="blur"].aos-animate {
  filter: blur(0);
}

/* ── Rotate (subtle rotation) ────────────────────────────────────────── */
[data-aos="rotate-left"].aos-init {
  transform: rotate(-15deg);
}

[data-aos="rotate-right"].aos-init {
  transform: rotate(15deg);
}

[data-aos="fade-rotate-left"].aos-init {
  transform: rotate(-15deg);
}

[data-aos="fade-rotate-right"].aos-init {
  transform: rotate(15deg);
}

/* ── Zoom-out + directional ──────────────────────────────────────────── */
[data-aos="zoom-out-up"].aos-init {
  transform: scale(1.15) translateY(-16px);
}

[data-aos="zoom-out-down"].aos-init {
  transform: scale(1.15) translateY(16px);
}

[data-aos="zoom-out-left"].aos-init {
  transform: scale(1.15) translateX(-16px);
}

[data-aos="zoom-out-right"].aos-init {
  transform: scale(1.15) translateX(16px);
}