/* ── 1. ANIMATSIOONIDE REEGLID (Kriitiline, et need oleks failis olemas) ── */
@keyframes globalSlideFromLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

/* ── 2. GLOBAALSED BAASKLASSID (Töötavad nüüd igas lehe sektsioonis) ── */
.animate-item {
  opacity: 0; /* Alguses peidus */
}

/* Kui JS lisab klassi, käivitub animatsioon */
.animate-item.in-view {
  animation-name: globalSlideFromLeft;
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
  animation-fill-mode: forwards;
}

.animate-fade-in {
  opacity: 0; /* Alguses peidus */
}

/* Pildi või tausta pehme ilmumine */
.animate-fade-in.in-view {
  animation-name: globalSimpleFade;
  animation-duration: 1.2s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

/* ── 3. VIIVITUSED (Saad miksida ja kasutada ükskõik millisel elemendil) ── */
.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.35s; }
.delay-3 { animation-delay: 0.55s; }
.delay-4 { animation-delay: 0.75s; }