/**
 * Parallax stage.
 *
 * Elementor makes the items move (Motion Effects). This file only says WHERE
 * each item sits and WHICH one is in front.
 *
 * Setup in Elementor:
 *   The container that holds the items   ID  parallax_container
 *                                         (or the class cretamel-parallax)
 *   Background layer, far away            class level-1
 *   Background layer, nearer              class level-2
 *   Foreground layer, in front of text    class level-3
 *   Product on the left                   class theme-left
 *   Product on the right                  class theme-right
 *   Product at the bottom                 class theme-bottom
 *
 * Front-to-back order:
 *   level-3  >  headline text  >  left / right  >  bottom  >  level-2  >  level-1
 *
 * Fixed edges, on every device:
 *   theme-left    touches the left edge   (0px)
 *   theme-right   touches the right edge  (0px)
 *   theme-bottom  sits on the bottom wave, and sinks 20px behind it
 *
 * The white wave at the bottom is an image 1920x68 at full width, so it grows
 * with the screen: 3.54vw tall. The bottom product follows it.
 *
 * Image sizes: a "max-width" set on the images in Elementor still works.
 * The right product is pushed to the right edge whatever its size.
 *
 * What still changes per device:
 *   --cm-left-y / --cm-right-y   how far down the CENTRE of the product sits
 *   --cm-bottom-x                how far across the CENTRE of the product sits
 *   --cm-*-w                     width, as a part of the stage width
 *   --cm-layer-w                 width of the level-1/2/3 layers
 */

/* 1. The values. Zero specificity, so your Elementor Custom CSS always wins. */

:where(#parallax_container, .cretamel-parallax) {
	--cm-layer-w: 100%;

	--cm-left-y: 65%;
	--cm-left-w: 20%;

	--cm-right-y: 35%;
	--cm-right-w: 20%;

	--cm-bottom-x: 35%;
	--cm-bottom-w: 20%;
	/* How far the bottom product sinks behind the wave. Bigger = hides more. */
	--cm-bottom-sink: 20px;
	/* Height of the wave: 68 / 1920 of the width. */
	--cm-wave-h: 3.54vw;
}

/* Laptop (Elementor breakpoint 1366px). */
@media (max-width: 1366px) {
	:where(#parallax_container, .cretamel-parallax) {
		--cm-layer-w: 115%;
	}
}

/* Tablet (Elementor breakpoint 1025px). The text is wider, so the products
   step up and down. */
@media (max-width: 1025px) {
	:where(#parallax_container, .cretamel-parallax) {
		--cm-layer-w: 150%;

		--cm-left-y: 30%;
		--cm-left-w: 22%;

		--cm-right-y: 70%;
		--cm-right-w: 24%;

		--cm-bottom-x: 50%;
		--cm-bottom-w: 30%;
	}
}

/* Phone (Elementor breakpoint 767px). The text fills the width, so the
   products go to the top corners, clear of the text. */
@media (max-width: 767px) {
	:where(#parallax_container, .cretamel-parallax) {
		--cm-layer-w: 230%;

		--cm-left-y: 75%;
		--cm-left-w: 34%;

		--cm-right-y: 12%;
		--cm-right-w: 37%;

		--cm-bottom-x: 70%;
		--cm-bottom-w: 38%;
	}
}

/* 2. The stage. The ID beats the values Elementor writes for each element. */

:is(#parallax_container, .cretamel-parallax) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* No z-index here. Then the layers and the headline share one stack, and
	   level-3 can come in front of the text. */
	--z-index: auto;
	z-index: auto;
	overflow: hidden;
	pointer-events: none;
}

/* 3. Every item. Elementor moves the item box. Any centring is done on the
   image inside it, so the two never fight over "transform". */

:is(#parallax_container, .cretamel-parallax) > :is(.level-1, .level-2, .level-3, .theme-left, .theme-right, .theme-bottom) {
	position: absolute;
	inset: auto;
	margin: 0;
	max-width: none;
	pointer-events: none;
	/* The scale set in Elementor would grow from the wrong centre. Size is
	   set with the w variables instead. */
	--e-transform-scale: 1;
}

:is(#parallax_container, .cretamel-parallax) > :is(.level-1, .level-2, .level-3, .theme-left, .theme-right, .theme-bottom) img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
}

/* 4. Positions. */

/* Layers: centred on the stage. */
:is(#parallax_container, .cretamel-parallax) > :is(.level-1, .level-2, .level-3) {
	left: 50%;
	top: 50%;
	width: var(--cm-layer-w);
}

:is(#parallax_container, .cretamel-parallax) > :is(.level-1, .level-2, .level-3) img {
	translate: -50% -50%;
}

/* Left product: always on the left edge. */
:is(#parallax_container, .cretamel-parallax) > .theme-left {
	left: 0;
	top: var(--cm-left-y);
	width: var(--cm-left-w);
}

/* Right product: always on the right edge. */
:is(#parallax_container, .cretamel-parallax) > .theme-right {
	right: 0;
	top: var(--cm-right-y);
	width: var(--cm-right-w);
}

/* y is the centre, so move the image up by half its height. */
:is(#parallax_container, .cretamel-parallax) > :is(.theme-left, .theme-right) img {
	translate: 0 -50%;
}

/* When the image is narrower than its box (a max-width set in Elementor),
   keep it against the right edge, not the left. */
:is(#parallax_container, .cretamel-parallax) > .theme-right img {
	margin-left: auto;
	margin-right: 0;
}

/* Bottom product: on the wave, sunk by --cm-bottom-sink. */
:is(#parallax_container, .cretamel-parallax) > .theme-bottom {
	left: var(--cm-bottom-x);
	bottom: calc(var(--cm-wave-h) - var(--cm-bottom-sink));
	width: var(--cm-bottom-w);
}

/* x is the centre, so move the image left by half its width. */
:is(#parallax_container, .cretamel-parallax) > .theme-bottom img {
	translate: -50% 0;
}

/* 5. Front-to-back order. The headline container keeps the z-index 20 set in
   Elementor, and the bottom wave keeps 50. */

:is(#parallax_container, .cretamel-parallax) > .level-1      { z-index: 1; }
:is(#parallax_container, .cretamel-parallax) > .level-2      { z-index: 2; }
:is(#parallax_container, .cretamel-parallax) > .theme-bottom { z-index: 3; }
:is(#parallax_container, .cretamel-parallax) > .theme-left   { z-index: 10; }
:is(#parallax_container, .cretamel-parallax) > .theme-right  { z-index: 11; }
:is(#parallax_container, .cretamel-parallax) > .level-3      { z-index: 30; }

/* People who ask for less motion get the still picture. */
@media (prefers-reduced-motion: reduce) {
	:is(#parallax_container, .cretamel-parallax) > * {
		transform: none !important;
	}
}