/*
Theme Name: Dreeze - Custom Theme
Author: AXE-WEB
Author URI: https://axe-web.com
Description: Dreeze child theme for Hello Elementor.
Version: 1.0.0
Tested up to: 7.0
Requires PHP: 8.2
Template: hello-elementor
Text Domain: axe-web
*/

/* Homepage hero: on desktop the artwork is a video played once by
   hero-video.js (its poster is the first frame); tablets and phones keep the
   static background image. Like Figma, the 1920 × 1126 artwork keeps its full
   height and may run past the hero's bottom edge over the next section. The
   artwork scales with the screen width, so the hero keeps Figma's 1920 × 1080
   proportions on screens where the content stops growing (above 1920px). */
.dreeze-hero {
	isolation: isolate;
}

.dreeze-hero__video {
	display: none;
	position: absolute;
	inset: 0 0 auto;
	z-index: -1;
	width: 100%;
	height: auto;
	min-height: 100%;
	object-fit: cover;
	object-position: top center;
	pointer-events: none;
}

@media (min-width: 64rem) {
	.dreeze-hero {
		/* Elementor sets 67.5rem; above 1920px the rem stops growing but the artwork does not. */
		min-height: max(67.5rem, 56.25vw);
	}

	.dreeze-hero > .dreeze-hero__video {
		display: block;
	}
}

/* Elementor editor: the animation doesn't run there, so the hero shows a
   still of the finished artwork from the HTML widget instead (hidden, and so
   never downloaded thanks to loading="lazy", on the live site). */
.dreeze-hero__still {
	display: none;
}

@media (min-width: 64rem) {
	.elementor-editor-active .dreeze-hero > .elementor-widget-html {
		inset: 0 !important;
		z-index: 0;
		width: 100% !important;
		height: 100%;
	}

	.elementor-editor-active .dreeze-hero__still {
		display: block;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: top center;
	}
}

/* Animated arrival (animated-arrival.js): content fades in from below as it
   scrolls into view. Add `animatedArrival` to an element to animate it, or
   `animation-none` to keep it (and its contents) still. Desktop only. */
@media (min-width: 64rem) and (prefers-reduced-motion: no-preference) {
	/* !important: Elementor's own element transition (transform only) would
	   otherwise win and the opacity would jump instead of fading. */
	.animatedArrival {
		opacity: 0;
		transform: translate(0, 6.25rem);
		transition:
			opacity 1s ease-out var(--arrival-delay, 0s),
			transform 1s ease-out var(--arrival-delay, 0s) !important;
	}

	.animatedArrival.visible {
		opacity: 1;
		transform: none;
	}

	.elementor-editor-active .animatedArrival,
	.animation-none .animatedArrival,
	.animatedArrival.animation-none {
		opacity: 1;
		transform: none;
		transition: none !important;
	}
}

/* Homepage hero intro (desktop): the heading, text and button are hidden from
   the first paint (head flag `dreeze-hero-intro`) and fade up one after the
   other once hero-video.js adds `dreeze-hero-ready`, 0.6s into the background
   animation. !important beats Elementor's own element transition. */
.dreeze-hero-intro .dreeze-hero > .e-con > .elementor-widget {
	opacity: 0;
	transform: translate(0, 2.5rem);
	transition:
		opacity 0.7s ease-out var(--hero-intro-delay, 0s),
		transform 0.7s ease-out var(--hero-intro-delay, 0s) !important;
}

.dreeze-hero-intro .dreeze-hero > .e-con > .elementor-widget:nth-child(2) {
	--hero-intro-delay: 0.1s;
}

.dreeze-hero-intro .dreeze-hero > .e-con > .elementor-widget:nth-child(3) {
	--hero-intro-delay: 0.2s;
}

.dreeze-hero-ready .dreeze-hero > .e-con > .elementor-widget {
	opacity: 1;
	transform: none;
}

/* Elementor form submits rendered as Dreeze buttons (inc/Form_Buttons.php).
   The `.bridgeable` wrapper only scopes the button styles, so it takes no
   space of its own; the form's Button → Position setting still aligns it. */
.dreeze-form-button__wrap {
	display: contents;
}

.dreeze-form-button .dreeze-button {
	border: 0;
	cursor: pointer;
}

/* Platform hero Salespeak chat (HTML widget on the page): Salespeak keeps
   its floating input 32px narrower than the screen, and that limit also
   applies when the chat opens full width, leaving a gap on the right. */
#salespeak-widget.floating-input.iframe-visible {
	max-width: none;
}