/* ============================================================
   GG Section Block — Animations
   IntersectionObserver-ready CSS transitions & keyframes
   ============================================================ */

/* ── Core Classes ─────────────────────────────────────────── */

.gg-section-animated {
	/* The outer block remains static to preserve background-attachment: fixed */
	opacity: 1;
	visibility: visible;
}

.gg-section-animated .gg-section-inner {
	opacity: 0;
	visibility: hidden;
	transition-property: opacity, transform, visibility;
	transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
	will-change: opacity, transform;
}

.gg-section-animated.is-visible .gg-section-inner {
	opacity: 1;
	visibility: visible;
}

/* ── Entrance Animations (Keyframes) ────────────────────────── */

@keyframes gg-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes gg-slide-up {
	from { opacity: 0; transform: translateY(40px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes gg-slide-down {
	from { opacity: 0; transform: translateY(-40px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes gg-slide-left {
	from { opacity: 0; transform: translateX(40px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes gg-slide-right {
	from { opacity: 0; transform: translateX(-40px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes gg-zoom-in {
	from { opacity: 0; transform: scale(0.9); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes gg-zoom-out {
	from { opacity: 0; transform: scale(1.1); }
	to   { opacity: 1; transform: scale(1); }
}

/* ── Exit Animations (Keyframes) ───────────────────────────── */

@keyframes gg-fade-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}

@keyframes gg-slide-up-exit {
	from { opacity: 1; transform: translateY(0); }
	to   { opacity: 0; transform: translateY(-40px); }
}

@keyframes gg-slide-down-exit {
	from { opacity: 1; transform: translateY(0); }
	to   { opacity: 0; transform: translateY(40px); }
}

/* ── Utility Classes for the Engine ─────────────────────────── */

.gg-anim-fade-in.is-visible .gg-section-inner     { animation-name: gg-fade-in; }
.gg-anim-slide-up.is-visible .gg-section-inner    { animation-name: gg-slide-up; }
.gg-anim-slide-down.is-visible .gg-section-inner  { animation-name: gg-slide-down; }
.gg-anim-slide-left.is-visible .gg-section-inner  { animation-name: gg-slide-left; }
.gg-anim-slide-right.is-visible .gg-section-inner { animation-name: gg-slide-right; }
.gg-anim-zoom-in.is-visible .gg-section-inner     { animation-name: gg-zoom-in; }
.gg-anim-zoom-out.is-visible .gg-section-inner    { animation-name: gg-zoom-out; }

/* Exit utility classes */
.gg-anim-exit-fade-out.is-exiting .gg-section-inner      { animation-name: gg-fade-out; }
.gg-anim-exit-slide-up.is-exiting .gg-section-inner      { animation-name: gg-slide-up-exit; }
.gg-anim-exit-slide-down.is-exiting .gg-section-inner    { animation-name: gg-slide-down-exit; }

/* ── Accessibility ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.gg-section-animated {
		opacity: 1 !important;
		visibility: visible !important;
		transition: none !important;
		animation: none !important;
	}

	.gg-section-animated.is-visible {
		opacity: 1 !important;
		transform: none !important;
	}
}