/* ==========================================================================
   Relatia — Gutenberg Block Scroll Animations (opt-in via CSS classes)

   Add these classes to any block via the Gutenberg editor
   ("Advanced > Additional CSS class(es)"):

   rga-fade-up      → rises from below
   rga-from-left    → slides in from the left
   rga-from-right   → slides in from the right
   rga-scale        → scales up from 90 %
   rga-fade         → simple opacity fade
   rga-stagger      → staggers children animation (add to parent)

   ========================================================================== */

/* ------------------------------------------------------------------
   1. Initial hidden states (JS adds .rga-observe on load)
   ------------------------------------------------------------------ */

.rga-observe.rga-fade-up,
.rga-observe.rga-from-left,
.rga-observe.rga-from-right,
.rga-observe.rga-scale,
.rga-observe.rga-fade {
	opacity: 0;
	will-change: transform, opacity;
}

.rga-observe.rga-fade-up {
	transform: translateY(40px);
	transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.rga-observe.rga-from-left {
	transform: translateX(-60px);
	transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.rga-observe.rga-from-right {
	transform: translateX(60px);
	transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.rga-observe.rga-scale {
	transform: scale(0.9);
	transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.rga-observe.rga-fade {
	transition: opacity 0.6s ease;
}

/* ------------------------------------------------------------------
   2. Visible state (added by IntersectionObserver)
   ------------------------------------------------------------------ */

.rga-visible.rga-fade-up,
.rga-visible.rga-from-left,
.rga-visible.rga-from-right,
.rga-visible.rga-scale,
.rga-visible.rga-fade {
	opacity: 1;
	transform: none;
}

/* ------------------------------------------------------------------
   3. Stagger delays for children
      Add "rga-stagger" to a parent block (e.g. columns, group)
      so its direct children animate sequentially.
   ------------------------------------------------------------------ */

.rga-stagger > .rga-visible:nth-child(1)  { transition-delay: 0ms; }
.rga-stagger > .rga-visible:nth-child(2)  { transition-delay: 60ms; }
.rga-stagger > .rga-visible:nth-child(3)  { transition-delay: 120ms; }
.rga-stagger > .rga-visible:nth-child(4)  { transition-delay: 180ms; }
.rga-stagger > .rga-visible:nth-child(5)  { transition-delay: 240ms; }
.rga-stagger > .rga-visible:nth-child(6)  { transition-delay: 300ms; }
.rga-stagger > .rga-visible:nth-child(7)  { transition-delay: 360ms; }
.rga-stagger > .rga-visible:nth-child(8)  { transition-delay: 420ms; }
.rga-stagger > .rga-visible:nth-child(9)  { transition-delay: 480ms; }
.rga-stagger > .rga-visible:nth-child(10) { transition-delay: 540ms; }

/* ------------------------------------------------------------------
   4. Accessibility — respect reduced-motion preference
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.rga-observe.rga-fade-up,
	.rga-observe.rga-from-left,
	.rga-observe.rga-from-right,
	.rga-observe.rga-scale,
	.rga-observe.rga-fade {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		will-change: auto;
	}
}