/* =================================================================
 * Creative Addons — Reveal Animation Styles
 * ================================================================*/

@media (prefers-reduced-motion: reduce) {
	.ca-reveal-init {
		clip-path: none !important;
	}
	.ca-reveal-overlay {
		display: none !important;
	}
}

/* ------------------------------------------------------------------
 * Mask Reveal
 * ----------------------------------------------------------------*/

.ca-reveal--mask {
	position: relative;
	overflow: hidden;
}

.ca-reveal--mask > *:not(.ca-reveal-overlay) {
	opacity: 0;
	transition: opacity calc(var(--ca-reveal-duration, 800ms) * 0.5) ease var(--ca-reveal-delay, 0ms);
}

.ca-reveal--mask .ca-reveal-overlay {
	transition: transform var(--ca-reveal-duration, 800ms) cubic-bezier(0.77, 0, 0.175, 1) var(--ca-reveal-delay, 0ms);
}

/* Directions — mask overlay starts from edge, covers, then reveals. */
.ca-reveal--mask.ca-reveal--dir-left .ca-reveal-overlay {
	transform: scaleX(0);
	transform-origin: left;
}
.ca-reveal--mask.ca-reveal--dir-right .ca-reveal-overlay {
	transform: scaleX(0);
	transform-origin: right;
}
.ca-reveal--mask.ca-reveal--dir-top .ca-reveal-overlay {
	transform: scaleY(0);
	transform-origin: top;
}
.ca-reveal--mask.ca-reveal--dir-bottom .ca-reveal-overlay {
	transform: scaleY(0);
	transform-origin: bottom;
}

/* Phase 1: overlay covers element */
.ca-reveal--mask.ca-reveal-visible .ca-reveal-overlay {
	transform: scale(1);
	animation: ca-reveal-mask-phase2 var(--ca-reveal-duration, 800ms) cubic-bezier(0.77, 0, 0.175, 1) var(--ca-reveal-delay, 0ms) forwards;
}

.ca-reveal--mask.ca-reveal-visible > *:not(.ca-reveal-overlay) {
	opacity: 1;
	transition-delay: calc(var(--ca-reveal-delay, 0ms) + var(--ca-reveal-duration, 800ms) * 0.4);
}

@keyframes ca-reveal-mask-phase2 {
	0% { transform: scaleX(0); }
	45%, 55% { transform: scaleX(1); }
	100% { transform: scaleX(0); transform-origin: right; }
}

/* Y-axis version */
.ca-reveal--mask.ca-reveal--dir-top.ca-reveal-visible .ca-reveal-overlay,
.ca-reveal--mask.ca-reveal--dir-bottom.ca-reveal-visible .ca-reveal-overlay {
	animation-name: ca-reveal-mask-phase2-y;
}

@keyframes ca-reveal-mask-phase2-y {
	0% { transform: scaleY(0); }
	45%, 55% { transform: scaleY(1); }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ------------------------------------------------------------------
 * Clip Path Reveal
 * ----------------------------------------------------------------*/

.ca-reveal--clip {
	transition: clip-path var(--ca-reveal-duration, 800ms) cubic-bezier(0.77, 0, 0.175, 1) var(--ca-reveal-delay, 0ms),
				opacity var(--ca-reveal-duration, 800ms) ease var(--ca-reveal-delay, 0ms);
}

.ca-reveal--clip.ca-reveal--dir-left {
	clip-path: inset(0 100% 0 0);
	opacity: 0;
}
.ca-reveal--clip.ca-reveal--dir-right {
	clip-path: inset(0 0 0 100%);
	opacity: 0;
}
.ca-reveal--clip.ca-reveal--dir-top {
	clip-path: inset(0 0 100% 0);
	opacity: 0;
}
.ca-reveal--clip.ca-reveal--dir-bottom {
	clip-path: inset(100% 0 0 0);
	opacity: 0;
}

.ca-reveal--clip.ca-reveal-visible {
	clip-path: inset(0 0 0 0);
	opacity: 1;
}

/* ------------------------------------------------------------------
 * Text Reveal
 * ----------------------------------------------------------------*/

.ca-reveal--text {
	overflow: hidden;
}

.ca-reveal--text > * {
	opacity: 0;
	transform: translate3d(0, 100%, 0);
	transition: opacity var(--ca-reveal-duration, 800ms) ease var(--ca-reveal-delay, 0ms),
				transform var(--ca-reveal-duration, 800ms) cubic-bezier(0.23, 1, 0.32, 1) var(--ca-reveal-delay, 0ms);
}

.ca-reveal--text.ca-reveal--dir-top > * {
	transform: translate3d(0, -100%, 0);
}
.ca-reveal--text.ca-reveal--dir-left > * {
	transform: translate3d(-100%, 0, 0);
}
.ca-reveal--text.ca-reveal--dir-right > * {
	transform: translate3d(100%, 0, 0);
}

.ca-reveal--text.ca-reveal-visible > * {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* Staggered children */
.ca-reveal--text .ca-reveal-child {
	opacity: 0;
	transform: translate3d(0, 30px, 0);
	transition: opacity var(--ca-reveal-duration, 800ms) ease,
				transform var(--ca-reveal-duration, 800ms) cubic-bezier(0.23, 1, 0.32, 1);
}

.ca-reveal--text.ca-reveal-visible .ca-reveal-child {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* ------------------------------------------------------------------
 * Line Reveal
 * ----------------------------------------------------------------*/

.ca-reveal--line {
	position: relative;
	overflow: hidden;
}

.ca-reveal--line .ca-reveal-overlay {
	height: 3px !important;
	top: auto !important;
	bottom: 0 !important;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ca-reveal-duration, 800ms) cubic-bezier(0.77, 0, 0.175, 1) var(--ca-reveal-delay, 0ms);
}

.ca-reveal--line.ca-reveal--dir-right .ca-reveal-overlay {
	transform-origin: right;
}

.ca-reveal--line.ca-reveal-visible .ca-reveal-overlay {
	transform: scaleX(1);
}

.ca-reveal--line > *:not(.ca-reveal-overlay) {
	opacity: 0;
	transform: translate3d(0, 15px, 0);
	transition: opacity var(--ca-reveal-duration, 800ms) ease calc(var(--ca-reveal-delay, 0ms) + 200ms),
				transform var(--ca-reveal-duration, 800ms) cubic-bezier(0.23, 1, 0.32, 1) calc(var(--ca-reveal-delay, 0ms) + 200ms);
}

.ca-reveal--line.ca-reveal-visible > *:not(.ca-reveal-overlay) {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* ------------------------------------------------------------------
 * Gradient Reveal
 * ----------------------------------------------------------------*/

.ca-reveal--gradient {
	-webkit-mask-image: linear-gradient(to right, black 0%, transparent 0%);
	mask-image: linear-gradient(to right, black 0%, transparent 0%);
	transition: -webkit-mask-image var(--ca-reveal-duration, 800ms) ease var(--ca-reveal-delay, 0ms),
				mask-image var(--ca-reveal-duration, 800ms) ease var(--ca-reveal-delay, 0ms),
				opacity var(--ca-reveal-duration, 800ms) ease var(--ca-reveal-delay, 0ms);
	opacity: 0;
}

.ca-reveal--gradient.ca-reveal--dir-right {
	-webkit-mask-image: linear-gradient(to left, black 0%, transparent 0%);
	mask-image: linear-gradient(to left, black 0%, transparent 0%);
}
.ca-reveal--gradient.ca-reveal--dir-top {
	-webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 0%);
	mask-image: linear-gradient(to bottom, black 0%, transparent 0%);
}
.ca-reveal--gradient.ca-reveal--dir-bottom {
	-webkit-mask-image: linear-gradient(to top, black 0%, transparent 0%);
	mask-image: linear-gradient(to top, black 0%, transparent 0%);
}

.ca-reveal--gradient.ca-reveal-visible {
	-webkit-mask-image: linear-gradient(to right, black 100%, transparent 100%);
	mask-image: linear-gradient(to right, black 100%, transparent 100%);
	opacity: 1;
}

.ca-reveal--gradient.ca-reveal--dir-right.ca-reveal-visible {
	-webkit-mask-image: linear-gradient(to left, black 100%, transparent 100%);
	mask-image: linear-gradient(to left, black 100%, transparent 100%);
}
.ca-reveal--gradient.ca-reveal--dir-top.ca-reveal-visible {
	-webkit-mask-image: linear-gradient(to bottom, black 100%, transparent 100%);
	mask-image: linear-gradient(to bottom, black 100%, transparent 100%);
}
.ca-reveal--gradient.ca-reveal--dir-bottom.ca-reveal-visible {
	-webkit-mask-image: linear-gradient(to top, black 100%, transparent 100%);
	mask-image: linear-gradient(to top, black 100%, transparent 100%);
}