/*!
 * Sterling Sports Group — Universal Scroll Reveal Component Styles.
 *
 * Provides silky-smooth, fade-based scroll reveals globally across the site.
 * Hardware-accelerated transitions with graceful fallbacks and accessibility support.
 *
 * @package SterlingSportsGroup
 */

:root {
	--ssg-reveal-duration: 1.15s;
	--ssg-reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--ssg-reveal-delay: 0ms;
	--ssg-reveal-distance: 20px;
}

/* --------------------------------------------------------------
 * Base reveal element styles
 * Applied only when JS is active and scroll-reveal is ready
 * ----------------------------------------------------------- */
html.ssg-reveal-ready .ssg-reveal,
html.ssg-reveal-ready [data-ssg-reveal] {
	opacity: 0;
	transform: translate3d(0, var(--ssg-reveal-distance), 0);
	transition-property: opacity, transform;
	transition-duration: var(--ssg-reveal-duration);
	transition-timing-function: var(--ssg-reveal-ease);
	transition-delay: var(--ssg-reveal-delay);
	will-change: opacity, transform;
	backface-visibility: hidden;
}

/* --------------------------------------------------------------
 * Revealed state
 * ----------------------------------------------------------- */
html.ssg-reveal-ready .ssg-reveal.is-revealed,
html.ssg-reveal-ready [data-ssg-reveal].is-revealed {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

/* --------------------------------------------------------------
 * Effect variants
 * ----------------------------------------------------------- */

/* Pure Fade (no movement) */
html.ssg-reveal-ready .ssg-reveal--fade,
html.ssg-reveal-ready [data-ssg-reveal="fade"] {
	transform: none;
}

/* Fade Up (subtle upward glide - default) */
html.ssg-reveal-ready .ssg-reveal--fade-up,
html.ssg-reveal-ready [data-ssg-reveal="fade-up"] {
	transform: translate3d(0, var(--ssg-reveal-distance), 0);
}

/* Fade Down */
html.ssg-reveal-ready .ssg-reveal--fade-down,
html.ssg-reveal-ready [data-ssg-reveal="fade-down"] {
	transform: translate3d(0, calc(-1 * var(--ssg-reveal-distance)), 0);
}

/* Fade Left */
html.ssg-reveal-ready .ssg-reveal--fade-left,
html.ssg-reveal-ready [data-ssg-reveal="fade-left"] {
	transform: translate3d(var(--ssg-reveal-distance), 0, 0);
}

/* Fade Right */
html.ssg-reveal-ready .ssg-reveal--fade-right,
html.ssg-reveal-ready [data-ssg-reveal="fade-right"] {
	transform: translate3d(calc(-1 * var(--ssg-reveal-distance)), 0, 0);
}

/* Scale / Soft Zoom Fade */
html.ssg-reveal-ready .ssg-reveal--scale,
html.ssg-reveal-ready [data-ssg-reveal="scale"] {
	transform: scale(0.97);
}

/* --------------------------------------------------------------
 * Stagger groups
 * Automatic staggered timing for list and grid items
 * ----------------------------------------------------------- */
.ssg-reveal-group > .ssg-reveal:nth-child(1),
.ssg-reveal-group > [data-ssg-reveal]:nth-child(1),
[data-ssg-reveal-group] > .ssg-reveal:nth-child(1),
[data-ssg-reveal-group] > [data-ssg-reveal]:nth-child(1) {
	--ssg-reveal-delay: 0ms;
}

.ssg-reveal-group > .ssg-reveal:nth-child(2),
.ssg-reveal-group > [data-ssg-reveal]:nth-child(2),
[data-ssg-reveal-group] > .ssg-reveal:nth-child(2),
[data-ssg-reveal-group] > [data-ssg-reveal]:nth-child(2) {
	--ssg-reveal-delay: 120ms;
}

.ssg-reveal-group > .ssg-reveal:nth-child(3),
.ssg-reveal-group > [data-ssg-reveal]:nth-child(3),
[data-ssg-reveal-group] > .ssg-reveal:nth-child(3),
[data-ssg-reveal-group] > [data-ssg-reveal]:nth-child(3) {
	--ssg-reveal-delay: 240ms;
}

.ssg-reveal-group > .ssg-reveal:nth-child(4),
.ssg-reveal-group > [data-ssg-reveal]:nth-child(4),
[data-ssg-reveal-group] > .ssg-reveal:nth-child(4),
[data-ssg-reveal-group] > [data-ssg-reveal]:nth-child(4) {
	--ssg-reveal-delay: 360ms;
}

.ssg-reveal-group > .ssg-reveal:nth-child(5),
.ssg-reveal-group > [data-ssg-reveal]:nth-child(5),
[data-ssg-reveal-group] > .ssg-reveal:nth-child(5),
[data-ssg-reveal-group] > [data-ssg-reveal]:nth-child(5) {
	--ssg-reveal-delay: 480ms;
}

.ssg-reveal-group > .ssg-reveal:nth-child(6),
.ssg-reveal-group > [data-ssg-reveal]:nth-child(6),
[data-ssg-reveal-group] > .ssg-reveal:nth-child(6),
[data-ssg-reveal-group] > [data-ssg-reveal]:nth-child(6) {
	--ssg-reveal-delay: 600ms;
}

.ssg-reveal-group > .ssg-reveal:nth-child(7),
.ssg-reveal-group > [data-ssg-reveal]:nth-child(7),
[data-ssg-reveal-group] > .ssg-reveal:nth-child(7),
[data-ssg-reveal-group] > [data-ssg-reveal]:nth-child(7) {
	--ssg-reveal-delay: 720ms;
}

.ssg-reveal-group > .ssg-reveal:nth-child(8),
.ssg-reveal-group > [data-ssg-reveal]:nth-child(8),
[data-ssg-reveal-group] > .ssg-reveal:nth-child(8),
[data-ssg-reveal-group] > [data-ssg-reveal]:nth-child(8) {
	--ssg-reveal-delay: 840ms;
}

/* --------------------------------------------------------------
 * Accessibility: Respect user motion preferences
 * ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html.ssg-reveal-ready .ssg-reveal,
	html.ssg-reveal-ready [data-ssg-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}