/* ==========================================================================
   ANIMATIONS — Keyframes, scroll-triggered classes
   BlushTheme v1.0.0
   ========================================================================== */

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

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

@keyframes slideFromRight {
	from {
		opacity: 0;
		transform: translateX(40px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

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

@keyframes pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.4; }
}

@keyframes scrollPulse {
	0%   { opacity: 1; transform: scaleY(1); }
	50%  { opacity: 0.3; transform: scaleY(0.6); }
	100% { opacity: 1; transform: scaleY(1); }
}

@keyframes kenBurns {
	0%   { transform: scale(1); }
	100% { transform: scale(1.05); }
}

/* Age Gate curtain animations */
@keyframes curtainLeft {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

@keyframes curtainRight {
	from { transform: translateX(0); }
	to   { transform: translateX(100%); }
}


/* Gold shimmer for Opulence */
@keyframes goldShimmer {
	0%, 100% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
}

/* Scroll progress bar */
@keyframes progressGrow {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   Scroll-Triggered Animation Classes
   -------------------------------------------------------------------------- */

.animate-on-scroll {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 800ms var(--ease-out),
		transform 800ms var(--ease-out);
}

.animate-on-scroll.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Slide variants */
.animate-on-scroll--left {
	opacity: 0;
	transform: translateX(-40px);
	transition:
		opacity 800ms var(--ease-out),
		transform 800ms var(--ease-out);
}

.animate-on-scroll--left.is-visible {
	opacity: 1;
	transform: translateX(0);
}

.animate-on-scroll--right {
	opacity: 0;
	transform: translateX(40px);
	transition:
		opacity 800ms var(--ease-out),
		transform 800ms var(--ease-out);
}

.animate-on-scroll--right.is-visible {
	opacity: 1;
	transform: translateX(0);
}

/* Scale variant — "presenting" effect for invitation cards */
.animate-on-scroll--scale {
	opacity: 0;
	transform: scale(0.97);
	transition:
		opacity 900ms var(--ease-out),
		transform 900ms var(--ease-out);
}

.animate-on-scroll--scale.is-visible {
	opacity: 1;
	transform: scale(1);
}

/* --------------------------------------------------------------------------
   Text Split & Reveal — Chars, Words, Lines
   -------------------------------------------------------------------------- */

/* Outer wrappers: clip the reveal */
.split-char,
.split-word {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
}

.split-line {
	display: block;
	overflow: hidden;
}

/* Inner elements: start below, reveal upward */
.split-char__inner,
.split-word__inner {
	display: inline-block;
	transform: translateY(110%);
	transition: transform 500ms var(--ease-out);
}

.split-line__inner {
	display: block;
	transform: translateY(100%);
	transition: transform 600ms var(--ease-out);
}

/* Revealed state — triggered by .is-revealed on the parent */
.is-revealed .split-char__inner,
.is-revealed .split-word__inner,
.is-revealed .split-line__inner {
	transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Parallax Image Layers
   -------------------------------------------------------------------------- */

[data-parallax] {
	overflow: hidden;
}

[data-parallax] > img {
	scale: 1.15;
	will-change: translate;
}

/* --------------------------------------------------------------------------
   Stagger Delay Classes
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   Page Transitions
   -------------------------------------------------------------------------- */

@keyframes pageEnter {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes pageExit {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(-20px);
	}
}

/* Entrance: content fades in from below on every page load */
.site-content {
	animation: pageEnter 400ms var(--ease-out) both;
}

/* Exit: content fades out upward before navigation */
.site-content.page-exit {
	animation: pageExit 300ms var(--ease-out) forwards;
}

/* --------------------------------------------------------------------------
   Hero Animation Sequence
   (Used for initial load — these animate once with specific delays)
   -------------------------------------------------------------------------- */

.hero-animate {
	opacity: 0;
	transform: translateY(20px);
}

.hero-animate.is-loaded {
	animation: fadeUp 800ms var(--ease-out) both;
}

.hero-animate--image.is-loaded {
	animation: scaleIn 1000ms var(--ease-out) 200ms both;
}

.hero-animate--name-1.is-loaded {
	animation: fadeUp 800ms var(--ease-out) 600ms both;
}

.hero-animate--name-2.is-loaded {
	animation: fadeUp 800ms var(--ease-out) 800ms both;
}

.hero-animate--tagline.is-loaded {
	animation: fadeIn 800ms var(--ease-out) 1000ms both;
}

.hero-animate--cta.is-loaded {
	animation: fadeUp 600ms var(--ease-out) 1200ms both;
}

.hero-animate--nav.is-loaded {
	animation: fadeIn 600ms var(--ease-out) 1000ms both;
}

.hero-animate--scroll.is-loaded {
	animation: fadeIn 600ms var(--ease-out) 1500ms both;
}

/* --------------------------------------------------------------------------
   Scroll Progress Indicator
   -------------------------------------------------------------------------- */

.scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	z-index: 10000;
	transform-origin: left;
	transform: scaleX(0);
	background-color: var(--color-accent);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Reduced Motion Override
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.animate-on-scroll,
	.animate-on-scroll--left,
	.animate-on-scroll--right,
	.animate-on-scroll--scale {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.hero-animate {
		opacity: 1;
		transform: none;
	}

	.hero-animate.is-loaded {
		animation: none;
		opacity: 1;
	}

	.site-content {
		animation: none;
		opacity: 1;
	}

	.site-content.page-exit {
		animation: none;
	}

	.split-char__inner,
	.split-word__inner,
	.split-line__inner {
		transform: none;
		transition: none;
	}

	[data-parallax] > img {
		scale: 1;
	}
}

/* --------------------------------------------------------------------------
   Mobile: Simpler animations
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.animate-on-scroll--left,
	.animate-on-scroll--right {
		transform: translateY(20px);
	}

	.animate-on-scroll--left.is-visible,
	.animate-on-scroll--right.is-visible {
		transform: translateY(0);
	}
}