/* ==========================================================================
   Hotel Emerald — Animation System
   ========================================================================== */

/* Easing tokens */
:root {
	--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   Scroll Reveal
   -------------------------------------------------------------------------- */
.reveal > * {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s var(--ease-out-quart),
		transform 0.7s var(--ease-out-quart);
}
.reveal.visible > * {
	opacity: 1;
	transform: translateY(0);
}

.reveal-left > * {
	opacity: 0;
	transform: translateX(-32px);
	transition: opacity 0.7s var(--ease-out-quart),
		transform 0.7s var(--ease-out-quart);
}
.reveal-left.visible > * {
	opacity: 1;
	transform: translateX(0);
}

.reveal-right > * {
	opacity: 0;
	transform: translateX(32px);
	transition: opacity 0.7s var(--ease-out-quart),
		transform 0.7s var(--ease-out-quart);
}
.reveal-right.visible > * {
	opacity: 1;
	transform: translateX(0);
}

.reveal-delay > * {
	transition-delay: 0.15s;
}

/* --------------------------------------------------------------------------
   Hero Entrance (stagger)
   -------------------------------------------------------------------------- */
@keyframes hero-fade-up {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: none; /* none instead of translateY(0) — avoids creating stacking context that breaks backdrop-filter */
	}
}

.hero-stagger > *:nth-child(1) {
	animation: hero-fade-up 0.8s var(--ease-out-quart) 0.3s both;
}
.hero-stagger > *:nth-child(2) {
	animation: hero-fade-up 0.8s var(--ease-out-quart) 0.5s both;
}
.hero-stagger > *:nth-child(3) {
	animation: hero-fade-up 0.8s var(--ease-out-quart) 0.7s both;
}
.hero-booking {
	animation: hero-fade-up 0.8s var(--ease-out-quart) 0.9s both;
}

/* --------------------------------------------------------------------------
   Ken Burns (Hero Carousel)
   -------------------------------------------------------------------------- */
@keyframes ken-burns {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.1);
	}
}

.ken-burns {
	animation: ken-burns 6s ease-out forwards;
}

/* --------------------------------------------------------------------------
   Hover Effects
   -------------------------------------------------------------------------- */
.hover-scale {
	transition: transform 0.5s var(--ease-out-quart);
}
.hover-scale:hover {
	transform: scale(1.05);
}

.hover-lift {
	transition: transform 0.3s var(--ease-out-quart);
}
.hover-lift:hover {
	transform: translateY(-4px);
}

/* --------------------------------------------------------------------------
   Scroll-to-Top Button
   -------------------------------------------------------------------------- */
.scroll-to-top {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.3s var(--ease-out-quart),
		transform 0.3s var(--ease-out-quart);
	pointer-events: none;
}
.scroll-to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Header Scroll Shadow
   -------------------------------------------------------------------------- */
.site-header {
	transition: box-shadow 0.3s ease;
}
.site-header.has-shadow {
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

/* --------------------------------------------------------------------------
   Reduced Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.reveal > *,
	.reveal-left > *,
	.reveal-right > *,
	.reveal-delay > * {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.hero-stagger > *,
	.hero-booking {
		animation: none !important;
		opacity: 1;
		transform: none;
	}

	.ken-burns {
		animation: none;
		transform: none;
	}

	.hover-scale,
	.hover-lift {
		transition: none;
	}

	.scroll-to-top {
		transition: none;
	}

	.site-header {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Editor: disable scroll animations inside the editor iframe
   -------------------------------------------------------------------------- */
.editor-styles-wrapper .reveal > *,
.editor-styles-wrapper .reveal-left > *,
.editor-styles-wrapper .reveal-right > *,
.editor-styles-wrapper .reveal-delay > * {
	opacity: 1;
	transform: none;
	transition: none;
}

.editor-styles-wrapper .hero-stagger > *,
.editor-styles-wrapper .hero-booking {
	animation: none;
	opacity: 1;
	transform: none;
}