/* ========================= GLOBAL VARIABLES ========================= */
:root {
  --anim-distance: 80px;
  --anim-ease: ease-in-out;
}

html, body {
  overflow-x: hidden;
}

/* Scroll direction control */
.trig-down { --dir: 1; }
.trig-up   { --dir: -1; }

/* Base direction per class */
.fadeLeft,
.slideLeft {
  --axis-dir: 1;
}

.fadeRight,
.slideRight {
  --axis-dir: -1;
}


/* ========================= BASE STATES ========================= */
/* Delay helpers */
.delay-1 { --anim-delay: 0.1s; }
.delay-2 { --anim-delay: 0.2s; }
.delay-3 { --anim-delay: 0.3s; }
.delay-4 { --anim-delay: 0.4s; }
.delay-5 { --anim-delay: 0.5s; }
.delay-6 { --anim-delay: 0.6s; }
.delay-7 { --anim-delay: 0.7s; }
.delay-8 { --anim-delay: 0.8s; }
.delay-9 { --anim-delay: 0.9s; }
.delay-10 { --anim-delay: 1s; }

/* Duration Helpers */
.duration-1 { --anim-duration: 0.2s; }
.duration-2 { --anim-duration: 0.4s; }
.duration-3 { --anim-duration: 0.6s; }
.duration-4 { --anim-duration: 0.8s; }
.duration-5 { --anim-duration: 1s; }
.duration-6 { --anim-duration: 1.2s; }
.duration-7 { --anim-duration: 1.4s; }
.duration-8 { --anim-duration: 1.6s; }
.duration-9 { --anim-duration: 1.8s; }
.duration-10 { --anim-duration: 2s; }

.fadeIn.trig,
.fadeOut.trig,
.fadeUp.trig,
.fadeDown.trig,
.fadeLeft.trig,
.fadeRight.trig,
.slideUp.trig,
.slideDown.trig,
.slideLeft.trig,
.slideRight.trig {
  animation-delay: var(--anim-delay, 0s);
}

/* Fade only */
.fadeIn,
.fadeUp,
.fadeDown,
.fadeLeft,
.fadeRight,
.slideUp
.slideDown,
.slideLeft,
.slideRight {
  opacity: 0;
}

/* FadeOut starts visible */
.fadeOut {
  opacity: 1;
}


/* ========================= AXIS SETUP ========================= */

/* Vertical animations */
.fadeUp,
.fadeDown,
.slideUp,
.slideDown {
  transform: translateY(calc(var(--dir, 1) * var(--anim-distance)));
}

/* Horizontal animations */
.fadeLeft,
.fadeRight,
.slideLeft,
.slideRight {
  transform: translateX(
    calc(var(--axis-dir) * var(--dir, 1) * var(--anim-distance))
  );
}


/* ========================= TRIGGERED ANIMATIONS ========================= */

/* Fade only */
.fadeIn.trig {
  animation: fadeIn var(--anim-duration, 1s) var(--anim-ease) var(--anim-delay, 0s) forwards;
}

.fadeOut.trig {
  animation: fadeOut var(--anim-duration, 1s) var(--anim-ease) var(--anim-delay, 0s) forwards;
}

/* Vertical (fade + slide) */
.fadeUp.trig,
.fadeDown.trig {
  animation: fadeY var(--anim-duration, 1s) var(--anim-ease) var(--anim-delay, 0s) forwards;
}

/* Horizontal (fade + slide) */
.fadeLeft.trig,
.fadeRight.trig {
  animation: fadeX var(--anim-duration, 1s) var(--anim-ease) var(--anim-delay, 0s) forwards;
}

/* Pure slide (no opacity change, but we keep fade for smoothness) */
.slideUp.trig,
.slideDown.trig {
  animation: slideY var(--anim-duration, 1s) var(--anim-ease) var(--anim-delay, 0s) forwards;
}

.slideLeft.trig,
.slideRight.trig {
  animation: slideX var(--anim-duration, 1s) var(--anim-ease) var(--anim-delay, 0s) forwards;
}


/* ========================= KEYFRAMES ========================= */

/* Fade only */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Vertical movement */
@keyframes fadeY {
  from {
    opacity: 0;
    transform: translateY(calc(var(--dir, 1) * var(--anim-distance)));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideY {
  from {
    opacity: 0;
    transform: translateY(calc(var(--dir, 1) * var(--anim-distance)));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Horizontal movement */
@keyframes fadeX {
  from {
    opacity: 0;
    transform: translateX(
      calc(var(--axis-dir) * var(--dir, 1) * var(--anim-distance))
    );
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideX {
  from {
    opacity: 0;
    transform: translateX(
      calc(var(--axis-dir) * var(--dir, 1) * var(--anim-distance))
    );
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}