/**
 * FIVA Scroll Animations
 *
 * Utility classes for scroll-triggered reveal animations on FIVA museum pages.
 * Uses IntersectionObserver in JS to add --visible modifier on scroll.
 *
 * Only animates opacity and transform (GPU-accelerated, compositor-only).
 *
 * @package Astra-Child
 * @since 1.0.0
 * @author Synergy Marketing info@synergymarketing.mk
 */

/* ==========================================================================
   Base Reveal State
   Elements start invisible and offset. JS adds --visible when in viewport.
   ========================================================================== */

.fiva-reveal {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1),
	            transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
	will-change: opacity, transform;
}

.fiva-reveal--visible {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   Direction Modifiers
   ========================================================================== */

.fiva-reveal--right {
	transform: translateX(30px);
}

.fiva-reveal--right.fiva-reveal--visible {
	transform: none;
}

.fiva-reveal--left {
	transform: translateX(-30px);
}

.fiva-reveal--left.fiva-reveal--visible {
	transform: none;
}

/* ==========================================================================
   Scale Variant (Gallery items)
   ========================================================================== */

.fiva-reveal--scale {
	transform: scale(0.9);
	transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1),
	            transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.fiva-reveal--scale.fiva-reveal--visible {
	transform: scale(1);
}

/* ==========================================================================
   Stagger Modifiers (100ms gaps for sequential element reveals)
   ========================================================================== */

.fiva-reveal--stagger-1 { transition-delay: 100ms; }
.fiva-reveal--stagger-2 { transition-delay: 200ms; }
.fiva-reveal--stagger-3 { transition-delay: 300ms; }
.fiva-reveal--stagger-4 { transition-delay: 400ms; }
.fiva-reveal--stagger-5 { transition-delay: 500ms; }
.fiva-reveal--stagger-6 { transition-delay: 600ms; }
.fiva-reveal--stagger-7 { transition-delay: 700ms; }
.fiva-reveal--stagger-8 { transition-delay: 800ms; }

/* ==========================================================================
   Gold Divider Grow Animation (P2-F)
   The section divider line scales from left to right when revealed.
   ========================================================================== */

.fiva-section-divider.fiva-reveal {
	transform: scaleX(0);
	transform-origin: left;
	transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1),
	            transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.fiva-section-divider.fiva-reveal.fiva-reveal--visible {
	transform: scaleX(1);
}

/* ==========================================================================
   Scroll Indicator Bounce (P1-A)
   Continuous bounce on the hero chevron, fades out on scroll via JS.
   ========================================================================== */

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

.fiva-scroll-indicator {
	animation: fiva-bounce 2s ease-in-out infinite;
	transition: opacity 400ms ease;
}

/* ==========================================================================
   Contact Bar Slide-Up (P3-C)
   Appears 600ms after page load with upward slide.
   ========================================================================== */

@keyframes fiva-contact-slide-up {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fiva-contact-bar {
	opacity: 0;
	animation: fiva-contact-slide-up 500ms ease-out 600ms forwards;
}

/* ==========================================================================
   Certification Badge Shimmer (P3-K)
   Single gold shimmer sweep when badge enters viewport.
   ========================================================================== */

@keyframes fiva-shimmer {
	0% {
		background-position: -200% center;
	}
	100% {
		background-position: 200% center;
	}
}

.fiva-cert-badge.fiva-shimmer-active {
	background-image: linear-gradient(
		110deg,
		transparent 20%,
		rgba(196, 170, 94, 0.3) 40%,
		rgba(196, 170, 94, 0.5) 50%,
		rgba(196, 170, 94, 0.3) 60%,
		transparent 80%
	);
	background-size: 200% 100%;
	animation: fiva-shimmer 1.2s ease-in-out 1;
}

/* ==========================================================================
   Scroll Progress Bar (P3-M)
   Fixed bar at top of page showing scroll depth.
   ========================================================================== */

.fiva-scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 0%;
	height: 3px;
	background: linear-gradient(90deg, #136F3A, #C4AA5E);
	z-index: 9999;
	transition: none;
	pointer-events: none;
}

@media (max-width: 767px) {
	.fiva-scroll-progress {
		display: none;
	}
}

/* ==========================================================================
   Mobile Adjustments (<768px)
   Reduce translate distances for subtler motion on small screens.
   ========================================================================== */

@media (max-width: 767px) {
	.fiva-reveal {
		transform: translateY(20px);
	}

	.fiva-reveal--right {
		transform: translateX(15px);
	}

	.fiva-reveal--left {
		transform: translateX(-15px);
	}
}

/* ==========================================================================
   Accessibility: Respect prefers-reduced-motion
   All elements visible immediately with no transitions.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.fiva-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		will-change: auto;
	}

	.fiva-scroll-indicator {
		animation: none;
	}

	.fiva-contact-bar {
		opacity: 1 !important;
		animation: none !important;
	}

	.fiva-cert-badge.fiva-shimmer-active {
		animation: none;
		background-image: none;
	}

	.fiva-scroll-progress {
		display: none;
	}
}