/* ==========================================================
   BAHAMON.DEV — ANIMATIONS
   Global reusable animation states
   ========================================================== */


/* ==========================================================
   01. REVEAL
   ========================================================== */

[data-reveal] {
	opacity: 0;

	will-change:
		opacity,
		transform;
}


/* ==========================================================
   02. REVEAL — CLIP
   ========================================================== */

[data-reveal-clip] {
	overflow: hidden;
}

[data-reveal-clip] > * {
	will-change: transform;
}


/* ==========================================================
   03. SPLITTING
   ========================================================== */

[data-splitting] .word,
[data-splitting] .char {
	will-change:
		transform,
		opacity;
}


/* ==========================================================
   04. MEDIA
   ========================================================== */

[data-media-reveal] {
	overflow: hidden;
}

[data-media-reveal] img,
[data-media-reveal] video {
	width: 100%;
	height: 100%;

	will-change:
		transform,
		clip-path;
}


/* ==========================================================
   05. REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

	[data-reveal] {
		opacity: 1;

		transform: none !important;

		will-change: auto;
	}

	[data-reveal-clip] > *,
	[data-splitting] .word,
	[data-splitting] .char,
	[data-media-reveal] img,
	[data-media-reveal] video {
		transform: none !important;

		will-change: auto;
	}

}