/* ==========================================================================
   Riviera Concierge – rc-motion.css
   Loaded separately from style.css (enqueued as 'rc-motion' after
   'houzez-child-style'), so it can be edited without touching style.css.

   33. MOTION
   33a. Scroll fade-ins (driven by js/rc-motion.js)
   33b. Video hero (HTML-widget video or Elementor background video)
   33c. Phones, slow connections and reduced motion
   ========================================================================== */

/* 33a. Scroll fade-ins
   - Only active once the script has added html.rc-motion, so no JS = no hidden content.
   - opacity + transform only: no layout shift (transforms are excluded from CLS). */
html.rc-motion .rc-fade {
	opacity: 0;
	transform: translate3d(0, 16px, 0);
	transition:
		opacity .9s cubic-bezier(.22, .61, .36, 1),
		transform .9s cubic-bezier(.22, .61, .36, 1);
	will-change: opacity, transform;
}
html.rc-motion .rc-fade.is-in {
	opacity: 1;
	transform: none;
	will-change: auto;
}
@media print {
	html.rc-motion .rc-fade { opacity: 1 !important; transform: none !important; }
}

/* 33b. Video hero
   Stacking inside .e-con.rc-hero (see style.css 20m):
     container background (the photo, = fallback)  ->  video (z -1)
     ->  ::before dark overlay (z 0)  ->  content (z 1).
   isolation keeps the negative z-index inside the hero. */
.e-con.rc-hero.rc-has-video,
.e-con.rc-hero:has(.rc-hero-video),
.e-con.rc-hero:has(> .elementor-background-video-container) {
	isolation: isolate;
	overflow: hidden;
}

/* The HTML widget that carries the video fills the hero, behind everything.
   (Overrides 20m's "children are position:relative; z-index:1".) */
.e-con.rc-hero > .elementor-widget-html:has(.rc-hero-video),
.e-con.rc-hero > .e-con-inner > .elementor-widget-html:has(.rc-hero-video),
.e-con.rc-hero > .elementor-element.rc-hero-video-widget,
.e-con.rc-hero > .e-con-inner > .elementor-element.rc-hero-video-widget {
	position: absolute !important;
	inset: 0 !important;
	z-index: -1 !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: none;
}
.e-con.rc-hero .elementor-widget-html:has(.rc-hero-video) > .elementor-widget-container,
.e-con.rc-hero .rc-hero-video-widget > .elementor-widget-container {
	position: absolute;
	inset: 0;
	margin: 0 !important;
	padding: 0 !important;
}

.rc-hero-video {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	background-color: transparent;
	background-position: 55% 58%;   /* matches the homepage photo focus in 20m */
	background-size: cover;
	background-repeat: no-repeat;
}
.rc-hero-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 55% 58%;
	opacity: 0;                      /* fades in once frames are playing: no black flash */
	transition: opacity 1.2s ease;
}
.rc-hero-video.is-playing video { opacity: 1; }

/* Invest hero focus (matches 31a: 60% centre) */
.rc-inv-hero .rc-hero-video,
.rc-inv-hero .rc-hero-video video {
	background-position: 60% center;
	object-position: 60% center;
}

/* Elementor's native container background video: same cover + below the overlay */
.e-con.rc-hero > .elementor-background-video-container {
	z-index: -1 !important;
	pointer-events: none;
}
.e-con.rc-hero > .elementor-background-video-container video.elementor-background-video-hosted {
	width: 100% !important;
	height: 100% !important;
	top: 0 !important;
	left: 0 !important;
	object-fit: cover;
	object-position: 55% 58%;
}

/* 33c. Phones (<768px): no video at all, the hero photo / poster shows.
   (preload="none" + data-src in the markup means nothing is downloaded either.) */
@media (max-width: 767px) {
	.rc-hero-video video,
	.e-con.rc-hero > .elementor-background-video-container {
		display: none !important;
	}
}
/* Reduced motion: keep the still poster, never animate */
@media (prefers-reduced-motion: reduce) {
	.rc-hero-video video,
	.e-con.rc-hero > .elementor-background-video-container {
		display: none !important;
	}
	html.rc-motion .rc-fade { opacity: 1 !important; transform: none !important; transition: none !important; }
}