/* =========================================================
   DIMORA BAGNI — Scroll Animations (progressive enhancement)
   Elements are visible by default; JS adds .js-ready to body
   to enable animations only when scroll detection is active.
   ========================================================= */

/* Only hide elements when JS is running */
.js-ready .fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.js-ready .fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.js-ready .fade-in-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.js-ready .fade-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.js-ready .fade-in-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.js-ready .fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Hero entrance animations (CSS-only, no observer needed) */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Lazy-image fade-in -------------------------------- */
/* JS adds .lazy-img on observe; .img-loaded when image fires 'load' */
.js-ready .lazy-img {
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.js-ready .lazy-img.img-loaded {
  opacity: 1;
}