/* ==========================================================================
   Scroll reveal animations
   Content eases into view as it enters the viewport, with a mix of effects
   (rise, slide, zoom, blur) so the page feels layered rather than uniform.

   Hidden state applies ONLY while `html.reveal-enabled` is set (added by an
   inline script when JS + IntersectionObserver are available and the visitor
   has not requested reduced motion). Without it, everything stays visible.
   ========================================================================== */

/* Shared easing / timing for every reveal target */
html.reveal-enabled :is(
	.wrap-text-welcome, .wrap-pic-welcome, .blo1, .title-section-ourmenu,
	.title-review, .content-video, .section-booking .col-lg-6, .wrap-form-reservation,
	.menu-product-card, .blo5, .wrap-text-romantic, .wrap-text-delicious,
	.wrap-pic-romantic, .wrap-pic-delicious, .menu-category-card, .item-ourmenu,
	.section-contact .map
) {
	opacity: 0;
	transition:
		opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
		filter 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: var(--reveal-delay, 0s);
	will-change: opacity, transform;
}

/* Contain the slide-in transforms so they never trigger a horizontal scrollbar.
   `clip` is used where supported (doesn't break sticky/scroll); `hidden` is the
   fallback. Applied to both html and body to be reliable across browsers. */
html.reveal-enabled {
	overflow-x: hidden;
	overflow-x: clip;
}

/* --- Rise up (default for stacked content & grids) ----------------------- */
html.reveal-enabled :is(
	.blo1,
	.wrap-form-reservation,
	.menu-product-card,
	.blo5
) {
	transform: translate3d(0, 46px, 0);
}

/* --- Ease down (section titles) ----------------------------------------- */
html.reveal-enabled :is(
	.title-section-ourmenu
) {
	transform: translate3d(0, -32px, 0);
}

/* --- Slide in from the left --------------------------------------------- */
html.reveal-enabled :is(
	.wrap-text-welcome,
	.wrap-text-romantic,
	.wrap-pic-delicious,
	.section-booking .col-lg-6:first-child
) {
	transform: translate3d(-48px, 0, 0);
}

/* --- Slide in from the right -------------------------------------------- */
html.reveal-enabled :is(
	.wrap-pic-welcome,
	.wrap-pic-romantic,
	.wrap-text-delicious,
	.section-booking .col-lg-6:last-child
) {
	transform: translate3d(48px, 0, 0);
}

/* --- Zoom in (image / picture cards) ------------------------------------ */
html.reveal-enabled :is(
	.menu-category-card,
	.item-ourmenu,
	.section-contact .map
) {
	transform: scale(0.92);
}

/* --- Blur + rise (feature moments) -------------------------------------- */
html.reveal-enabled :is(
	.title-review,
	.content-video
) {
	transform: translate3d(0, 28px, 0);
	filter: blur(14px);
}

/* --- Mobile: no sideways motion (prevents any horizontal overflow) ------ */
@media (max-width: 768px) {
	html.reveal-enabled :is(
		.wrap-text-welcome, .wrap-pic-welcome,
		.wrap-text-romantic, .wrap-pic-romantic,
		.wrap-text-delicious, .wrap-pic-delicious,
		.section-booking .col-lg-6:first-child,
		.section-booking .col-lg-6:last-child
	) {
		transform: translate3d(0, 36px, 0);
	}
}

/* --- Revealed state ----------------------------------------------------- */
html.reveal-enabled .is-visible {
	opacity: 1 !important;
	transform: none !important;
	filter: none !important;
}

/* --- Respect users who prefer reduced motion ---------------------------- */
@media (prefers-reduced-motion: reduce) {
	html.reveal-enabled :is(
		.wrap-text-welcome, .wrap-pic-welcome, .blo1, .title-section-ourmenu,
		.title-review, .content-video, .section-booking .col-lg-6, .wrap-form-reservation,
		.menu-product-card, .blo5, .wrap-text-romantic, .wrap-text-delicious,
		.wrap-pic-romantic, .wrap-pic-delicious, .menu-category-card, .item-ourmenu,
		.section-contact .map
	) {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}
}