/**
 * @author alisch berlec hönow <info@abh.eu>
 * @version 7.2
 *
 * Mdj Component: Slide: Eclat 2024
 */

.home.style--eclat-2024 #header__branding {
	opacity: 0;
}

#eclat-visual--2024__slide {
	--padding-horizontal: var( --v-sp );
	--part-spacing: calc( var( --v-sp ) * 0.5 );
}



#eclat-visual--2024__gyro-trigger {
	position: absolute;
	bottom: 0;
	right: 0px;
	z-index: 100;

	margin-bottom: 0;
}

	#eclat-visual--2024__gyro-trigger > .button {
		pointer-events: all;
	}

.eclat-visual--2024__button {
	--font-weight: 600;
}

	.eclat-visual--2024__button .button {
		--button-background: var( --highlight-color );
		--font-color: var( --white );
	}

		.eclat-visual--2024__button .button .button__background {
			border-color: var( --button-background );
		}



/* ---------- */
#eclat-visual--2024 {
	--font-weight: 1000;
	--font-stretch: 5;
	--font-color: var( --highlight-color );
	--letter-spacing: -0.02em;

	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;

	padding: calc( var( --header-height ) + var( --v-sp ) ) var( --padding-horizontal ) calc( var( --header-height ) * 0.9 );
	pointer-events: none;
	color: var( --highlight-color );

	-webkit-filter: saturate( 2 );
	-moz-filter: saturate( 2 );
	filter: saturate( 2 );
}

#eclat-visual--2024-inner {
	width: 100%;
	height: calc( 100% + var( --part-spacing ) );
	position: relative;

	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 20;
}

	#eclat-visual--2024-inner > * {
		margin-bottom: var( --part-spacing );
	}



#eclat-visual--2024 .flex-word {
	display: inline-flex;
}

	#eclat-visual--2024 .flex-word .flex-letter:first-child {
		margin-left: -0.05em;
	}

	#eclat-visual--2024 .flex-word .flex-letter {
		--min-fs: var( --min-font-size );
		--max-fs: var( --max-font-size );
		--fs--calc: calc( var( --min-fs ) + ( var( --max-fs ) - var( --min-fs ) ) * ( var( --factor ) / ( var( --letter-count ) - 1 ) ) );

		font-size: var( --fs--calc );
		margin-top: -0.235em;
		margin-bottom: -0.235em;

		-webkit-filter: var( --filter );
		-moz-filter: var( --filter );
		filter: var( --filter );

		-webkit-transform: translate3d( 0, 0, 0 );
		-moz-transform: translate3d( 0, 0, 0 );
		transform: translate3d( 0, 0, 0 );

		/*transition: font-size 0.15s cubic-bezier(0.16, 1, 0.3, 1);*/
	}

	#eclat-visual--2024 .flex-word .flex-letter[data-content="T"] {
		margin-left: -0.1em;
	}



#eclat-visual--2024 .info {
	--font-size: 5vh;
	--line-height: 0.9;
}

	#eclat-visual--2024 .info > p {
		/*margin-top: -0.22em;*/
		margin-left: -0.05em;
		/*margin-bottom: -0.255em;*/
	}

#eclat-visual--2024 .flex-word[data-content="ECLAT"] {
	--min-font-size: 9vw;
	--max-font-size: 44vw;
}

	#eclat-visual--2024 .flex-word[data-content="ECLAT"] .flex-letter {
		--blur-intensity: calc( var( --letter-count ) - 1 - var( --factor ) );
		--filter: blur( calc( 0.15vh * var( --blur-intensity ) * var( --blur-intensity ) ) );
	}



/* ---------- */
#eclat-visual--2024__background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: white;
	z-index: 5;
}

	#eclat-visual--2024__background-images {
		--transform: translate3d( 0, -3%, 0 ) scale( 1.03 );

		height: 100%;
		display: flex;
		align-items: flex-start;

		-webkit-transform: var( --transform );
		-moz-transform: var( --transform );
		transform: var( --transform );
	}

	#eclat-visual--2024__background-images .background-image {
		--transform: translate3d( 0, 0, 0 );
		--flex--calc: calc( var( --flex-min ) + ( var( --flex-max ) - var( --flex-min ) ) * var( --factor ) );

		flex: var( --flex--calc );
		margin: 0 calc( var( --factor ) * -5vw );

		-webkit-transform: var( --transform );
		-moz-transform: var( --transform );
		transform: var( --transform );
		filter: blur( calc( var( --factor ) * 2vh + 0.5vh ) );
	}

	#eclat-visual--2024__background-images .background-image-inner {
		padding-top: calc( 100% / var( --ratio ) );
		position: relative;
	}

		#eclat-visual--2024__background-images .background-image-inner > img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}



/* ------------------------- */
@media ( min-width: 500px ) {
	#eclat-visual--2024__slide {
		--padding-horizontal: calc( var( --v-sp ) + var( --box-horizontal-padding ) );
	}

	#eclat-visual--2024 .flex-word[data-content="ECLAT"] {
		--min-font-size: 11vw;
		--max-font-size: 42vw;
	}
}

@media ( min-width: 1000px ) {
	#eclat-visual--2024 .flex-word[data-content="ECLAT"] {
		--min-font-size: 11vw;
		--max-font-size: 43vw;
	}
}

@media ( min-width: 1300px ) {
	#eclat-visual--2024 .flex-word[data-content="ECLAT"] {
		--min-font-size: 9vw;
		--max-font-size: 46vw;
	}
}



/* ------------------------- */
#eclat-visual--2024__background-images {
	--flex-min: 1;
	--flex-max: 10;
	--ratio: 0.25;
}

#eclat-visual--2024__eclat-01 {
	align-items: flex-end;
}

#eclat-visual--2024__festival-01 {
	margin-top: auto;
}

@media ( min-aspect-ratio: 2/3 ) {
	#eclat-visual--2024__background-images {
		--ratio: 0.3;
	}

	#eclat-visual--2024 .info {
		--font-size: 6vh;
	}
}

@media ( min-aspect-ratio: 4/5 ) {
	#eclat-visual--2024__background-images {
		--ratio: 0.35;
	}

	#eclat-visual--2024 .info {
		--font-size: 9vh;
	}

	#eclat-visual--2024__runtime-01 {
		order: 1;
	}

	#eclat-visual--2024__eclat-01 {
		order: 2;
		align-items: center;
	}

	#eclat-visual--2024__festival-01 {
		margin-top: 0;
		order: 3;
	}

	#eclat-visual--2024__eclat-03 {
		display: none !important;	
	}
}

@media ( min-aspect-ratio: 1/1 ) {
	#eclat-visual--2024__background-images {
		--ratio: 0.45;
	}
}

@media ( min-aspect-ratio: 5/4 ) {
	#eclat-visual--2024__background-images {
		--ratio: 0.55;
	}
}

@media ( min-aspect-ratio: 5/3 ) {
	#eclat-visual--2024 .flex-word[data-content="ECLAT"] .flex-letter {
		--max-fs: min( 80vh, var( --max-font-size ) );
	}

	#eclat-visual--2024__eclat-01 {
		align-self: center;
	}
}

@media ( min-aspect-ratio: 3/2 ) {
	#eclat-visual--2024__background-images {
		--ratio: 0.66;
	}
}

@media ( min-aspect-ratio: 7/4 ) {
	#eclat-visual--2024__background-images {
		--ratio: 0.75;
	}
}