/********************************************************/
/*
/*      Cruise Contrôle App CSS
/*
/********************************************************/
.wp-block-cke-app {
	/*-- Variables --*/
	--app-columns: 1fr 1.125fr 1fr;
	
	--anim-speed-very-fast	: .15s;
	--anim-speed-fast 		: .3s;
	--anim-speed 			: .5s;
	--anim-speed-slow 		: 1s;
	--anim-speed-very-slow 	: 3s;
	
	--shadow				: 4px 4px 6px rgb(0 0 0 / .25);
	
	/* Generated with EasingWizard: Overshoot | Out | Soft (Mass: 1, Damping: 60, Accuracy: 3) */
	--anim-easing-overshoot	: linear(0, 0.341 7.8%, 0.609 16.1%, 0.807 25%, 0.882 29.8%, 0.941 34.8%, 1.007 44%, 1.035 54.6%, 1.035 63.2%, 1.006 86.3%, 1); 
	--anim-easing-slow-down	: cubic-bezier(0.25, 1, 0.5, 1);
	/*-- Variables --*/
	
	position: relative;
	width: var(--wp--style--global--wide-size);
	max-width: var(--wp--style--global--wide-size);
	height: 100svh;
	max-height: 100svh;
	
	&:first-child {
		margin-block-start: calc(var(--wp--custom--header-height) * -1);
	}

	/******************************/
	/* Backgrounds
	/******************************/
	& > #backgrounds {
		position: absolute;
		max-width: 0;
		max-height: 0;
		z-index: -1;
		
		&.init > .app-background {
			opacity: 0 !important;
		}
		
		& > .app-background {
			position: absolute;
			top: 0;
			left: calc(var(--wp--custom--wide-pad) * -1);
			width: var(--wp--custom--viewport-width);
			height: 100svh;
			pointer-events: none;
			z-index: 1;
			
			/*-- Animation/transition --*/
			opacity: 0;
			transition: opacity var(--anim-speed);
			&.active {
				opacity: 1;
			}
			/*-- Animation/transition --*/
			
			&::after,
			& > img {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100svh;
			}
			
			&::after {
				content: '';
				display: block;
				background: #D8D8D8;
				mix-blend-mode: hard-light;
				opacity: .6;
				z-index: 1;
			}
			
			& > img {
				object-fit: cover;
				z-index: 0;
			}
		}
	}
	
	/******************************/
	/* Match overlay
	/******************************/
	& > #match-overlay {
		position: absolute;
		top: 0;
		left: calc(var(--wp--custom--wide-pad) * -1);
		width: var(--wp--custom--viewport-width);
		height: 100svh;
		background: rgba(0, 0, 0, .75);
		margin-block-start: unset;
		pointer-events: none;
		z-index: 99;
		
		/*-- Animation/transition --*/
		animation-name: fade-in;
		animation-duration: var(--anim-speed-slow);
		animation-fill-mode: forwards;
		animation-play-state: paused;
		&.reset {
			opacity: 0 !important;
			pointer-events: none !important;
			
			animation-name: unset;
			animation-duration: unset;
			animation-fill-mode: unset;
			animation-play-state: unset;
		}
		&.fade-out {
			animation-name: fade-out;
			animation-duration: var(--anim-speed-slow);
			animation-fill-mode: forwards;
			animation-play-state: paused;
		}
		&.animate {
			animation-play-state: running;
		}
		/*-- Animation/transition --*/
		
		&:is(.animate, .visible) {
			pointer-events: all;
		}
		
		&.visible {
			opacity: 1;
		}
		
		& > img {
			position: absolute;
			top: calc((var(--wp--custom--header-height) / 2) + 50%);
			left: 50%;
			width: 39%;
			height: auto;
			max-height: calc((100svh - var(--wp--custom--header-height)) * .75);
			aspect-ratio: 1037/630;
			translate: -50% -50%;
			user-select: none;
			rotate: -3deg;
			
			/*-- Animation/transition --*/
			animation-name: scale-up;
			animation-duration: var(--anim-speed);
			animation-fill-mode: forwards;
			animation-play-state: paused;
			animation-timing-function: var(--anim-easing-slow-down);
			&.reset {
				scale: 0 !important;
				
				animation-name: unset;
				animation-duration: unset;
				animation-fill-mode: unset;
				animation-play-state: unset;
				animation-timing-function: unset;
			}
			&.animate {
				animation-play-state: running;
			}
			/*-- Animation/transition --*/
		}
		
		@media (width <= 1300px) {
			&#match-overlay > img {
				width: 50%;
			}
		}
		
		@media (width <= 1100px) {
			&#match-overlay > img {
				width: calc(100% * (2/3));
			}
		}
	}
	
	/******************************/
	/* Interface
	/******************************/
	& > .interface {
		display: grid;
		grid-template-columns: var(--app-columns);
		gap: var(--wp--preset--spacing--2-5);
		min-height: 100%;
		margin-block-start: unset !important;
		
		& > * {
			grid-row: 1;
			margin-block-start: 0 !important;
			transition: opacity var(--anim-speed-fast);
		}
		
		& > :not(.visible, .animate) {
			opacity: 0 !important;
			pointer-events: none !important;
		}
		
		/******************************/
		/* Preferences
		/******************************/
		& > .preferences {
			grid-column: 1 / span 3;
			display: grid;
			grid-template-columns: 100%;
			grid-template-rows: repeat(3, 100%);
			justify-content: center;
			align-items: center;
			max-height: 100svh;
			padding-block: var(--wp--custom--header-height) calc(var(--wp--custom--header-height) / 2);
			box-sizing: border-box;
			overflow-y: clip;
			
			& > section {
				grid-column: 1;
				grid-row: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: var(--wp--preset--spacing--0-75);
				transition: opacity .3s;
				
				& > :is(p, h2) {
					margin-block: unset;
				}
				
				& > p {
					padding-block-end: var(--wp--preset--spacing--1);
					border-block-end: 1px solid currentcolor;
					margin-block-end: var(--wp--preset--spacing--2);
					user-select: none;
					
					@media (height <= 500px) {
						padding-block-end: var(--wp--preset--spacing--0-25);
						border-block-end: 1px solid currentcolor;
						margin-block-end: var(--wp--preset--spacing--0-75);
					}
				}
				
				& > h2 {
					line-height: 1;
					text-align: center;
					text-transform: lowercase;
					color: var(--wp--preset--color--noir);
					background-color: transparent;
					padding-inline: var(--wp--preset--spacing--2-5);
					padding-block: var(--wp--preset--spacing--0-75) var(--wp--preset--spacing--0-50);
					border-radius: 64px;
					cursor: pointer;
					user-select: none;
					transition: color .3s, background-color .3s;
					
					@media (width <= 800px) {
						font-size: 3.5rem;
						padding-inline: var(--wp--preset--spacing--0-75);
						padding-block: var(--wp--preset--spacing--0-25) 0;
					}
					
					@media (width <= 400px) {
						font-size: 2.75rem;
						padding-inline: var(--wp--preset--spacing--0-25);
					}
					
					@media (height <= 500px) {
						font-size: 2.25rem;
					}
				}
				
				& > h2:is(:hover, :focus, :active) {
					color: var(--wp--preset--color--beige);
				}
				
				&.gender-selection > h2:is(:hover, :focus, :active) {
					background-color: var(--wp--preset--color--bleu);
				}
				
				&.age-selection > h2:is(:hover, :focus, :active) {
					background-color: var(--wp--preset--color--vert);
				}
			}
			
			& > section:not(.visible) {
				opacity: 0;
				pointer-events: none;
			}
			
			& > section.visible ~ section:not(.visible),
			&:not(:has(> section.visible)) > section:not(:first-child):not(.revealed) {
				grid-row: 3;
			}
		}
		
		& > :is(.profiles, .discussions) {
			grid-column: 2;
		}
		
		/******************************/
		/* App menu
		/******************************/
		& > .app-menu {
			--avatar-size: 72px;
			--avatar-bg-color: var(--wp--preset--color--rose);
			--avatar-border: 6px solid var(--wp--preset--color--blanc);
			
			justify-self: start;
			align-self: center;
			grid-column: 3;
			position: relative;
			min-width: 95%;
			margin-block-start: var(--wp--custom--header-height) !important;
			opacity: 0;
			z-index: 6;
			
			&:is(.disabled, .init) {
				pointer-events: none !important;
			}
			
			/*-- Animation/transition --*/
			animation-name: fade-in, slide-in-right;
			animation-duration: var(--anim-speed-fast), var(--anim-speed-slow);
			animation-fill-mode: forwards, forwards;
			animation-play-state: paused, paused;
			animation-timing-function: linear, var(--anim-easing-overshoot);
			animation-delay: .1s, 0s;
			&.animate {
				animation-play-state: running, running;
			}
			/*-- Animation/transition --*/
			
			&::before,
			& > button#close-app-menu {
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				aspect-ratio: 1;
				background-color: var(--wp--preset--color--jaune);
				border: var(--avatar-border);	
				border-radius: 50%;
				box-shadow: var(--shadow);
				pointer-events: none;
				translate: -50% -50%;
			}
			
			&::before {
				content: '';
				width: var(--avatar-size);
				height: var(--avatar-size);
				background-image: url(../images/enveloppe.svg);
				background-repeat: no-repeat;
				background-position: center;
			}
			
			& > button#close-app-menu {
				width: 54px;
				height: 54px;
				border-width: 4px;
				
				& > img {
					width: calc(100% * (2/3));
					max-width: calc(100% * (2/3));
					translate: 0 2px;
				}
				
				@media (width > 1000px) {
					display: none;
				}
			}
			
			/******************************/
			/* Discussions list
			/******************************/
			& > #discussions-list {
				--default-max-height: 160px; /* Default height when no discussions in the list */
				
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: var(--wp--preset--spacing--0-75);
				max-height: var(--max-height, var(--default-max-height));
				padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--1) var(--wp--preset--spacing--2);
				background: var(--wp--preset--color--blanc);
				border-radius: 12px;
				box-shadow: var(--shadow);
				overflow: hidden;
				transition: max-height var(--anim-speed);
				
				& > .no-content {
					max-width: 80%;
					padding-block-end: var(--wp--preset--spacing--1);
					margin-block: unset;
					text-align: center;
					user-select: none;
				}
				
				/******************************/
				/* Discussion
				/******************************/
				& > .discussion {
					display: grid; 
					grid-template-columns: var(--avatar-size) 1fr min-content; 
					grid-template-rows: 1.5fr 1fr;
					column-gap: var(--wp--preset--spacing--0-75);
					row-gap: 0;
					align-items: center;
					justify-items: stretch;
					position: relative;
					width: 100%;
					padding-block: var(--wp--preset--spacing--0-50);
					cursor: pointer;
					
					/*-- Animation/transition --*/
					&.init {
						opacity: 0;
						translate: 100%;
						
						animation-name: fade-in, slide-in-left;
						animation-duration: var(--anim-speed-fast), var(--anim-speed);
						animation-fill-mode: forwards, forwards;
						animation-play-state: paused, paused;
						animation-timing-function: linear, var(--anim-easing-overshoot);
						animation-delay: .1s, 0s;
					}
					&.flash {
						animation-name: flash;
						animation-duration: var(--anim-speed);
						animation-fill-mode: forwards;
						animation-play-state: paused;
						animation-timing-function: linear;
						animation-iteration-count: 3;
						animation-timing-function: step-start;
					}
					&.animate {
						animation-play-state: running, running;
					}
					/*-- Animation/transition --*/
					
					&:is(:hover, :focus, .active) {
						--color: var(--wp--preset--color--blanc);
					}
					
					&:is(:hover, :focus) {
						--background: var(--wp--preset--color--orange);
					}
					
					&.active:not(:is(:hover, :focus)) {
						--background: var(--wp--preset--color--bleu);
					}
					
					&.active {
						& > .profile-name {
							translate: 0 25%;
						}
						
						& > .btn {
							border: 2px solid var(--wp--preset--color--blanc);
							
							&::before,
							&::after {
								aspect-ratio: 131/150;
								background: url(../images/xmark.svg) no-repeat center / 15px;
								filter: var(--wp--custom--color--filter--blanc);
							}
						}
						
						& > .new-messages {
							opacity: 0;
						}
					}
					
					&::before {
						content: '';
						display: inline-block;
						position: absolute;
						top: 0;
						left: calc(var(--wp--preset--spacing--1) * -1);
						width: calc(100% + (var(--wp--preset--spacing--1) * 2));
						height: 100%;
						background: var(--background, transparent);
						transition: background var(--anim-speed-very-fast);
						z-index: 0;
					}
					
					& > * {
						z-index: 1;
					}
					
					& > .avatar {
						align-self: center;
						grid-column: 1;
						grid-row: 1 / span 2;
						display: flex;
						justify-content: center;
						align-items: end;
						position: relative;
						width: var(--avatar-size);
						height: var(--avatar-size);
						aspect-ratio: 1;
						background-color: var(--avatar-bg-color);
						border : var(--avatar-border);	
						border-radius: 50%;
						margin-block: unset;
						box-shadow: var(--shadow);
						overflow: clip;
						
						& > img {
							position: absolute;
							width: 100%;
							height: 100%;
							object-fit: cover;
							z-index: 0;
							
							&.avatar-img {
								width: 95%;
								height: 95%;
								z-index: 1;
							}
						}
					}
					
					& > :is(.profile-name, .new-messages) {
						grid-column: 2;
						line-height: 1;
						margin-block: unset;
						user-select: none;
						transition: color var(--anim-speed-very-fast);
					}
					
					& > .profile-name {
						align-self: end;
						grid-row: 1;
						color: var(--color, var(--wp--preset--color--noir));
						transition: translate var(--anim-speed-fast), color var(--anim-speed-very-fast);
					}
					
					& > .new-messages {
						align-self: start;
						grid-row: 2;
						color: var(--color, var(--wp--preset--color--orange));
					}
					
					& > .btn {
						align-self: center;
						grid-column: 3;
						grid-row: 1 / span 2;
						position: relative;
						width: 36px;
						height: 36px;
						aspect-ratio: 1;
						border: 2px solid var(--color, var(--wp--preset--color--orange));
						border-radius: 50%;
						box-sizing: border-box;
						pointer-events: none;
						transition: border var(--anim-speed-very-fast);
						
						&::before,
						&::after {
							content: '';
							display: inline-block;
							position: absolute;
							top: 50%;
							left: 50%;
							width: 15px;
							height: auto;
							aspect-ratio: 13/8;
							background: url(../images/arrow.svg) no-repeat center / 15px;
							opacity: 1;
							translate: -50% -50%;
							transition: opacity var(--anim-speed-very-fast);
						}
						
						&::before {
							filter: var(--wp--custom--color--filter--orange);
						}
						
						&::after {
							filter: var(--wp--custom--color--filter--blanc);
						}
					}
					
					&.at-bottom {
						order: 999; /* Ensures that new discussions appear at the bottom of the list */
					}
					
					&:is(:hover, :focus) > .btn::before,
					&:not(:hover, :focus) > .btn::after {
						opacity: var(--opacity, 0);
					}
				}	
			}
			
			/******************************/
			/* "Back to profiles" button
			/******************************/
			& > #back-to-profiles {
				width: 100%;
				margin-block-start: var(--wp--preset--spacing--1-5);
				transition: opacity var(--anim-speed-fast);
				
				& > a {
					width: 100%;
				}
			}
			
			#chat:not(.visible) ~ & > #back-to-profiles {
				opacity: 0;
				pointer-events: none;
			}
			
			@media (width <= 1100px) {
				&.app-menu {
					min-width: 100%;
				}
			}
			
			@media (width <= 1000px) {
				&.app-menu {
					justify-self: center;
					grid-column: 1 / span 3;
					min-width: calc(100% * (2/3));
					width: calc(100% * (2/3));
					max-width: calc(100% * (2/3));
					margin-block-start: unset !important;
					
					&::before {
						display: none;
					}
				}
			}
		}
		
		/******************************/
		/* Match
		/******************************/
		& > .match {
			margin-block-start: 0;
			display: block;
			position: fixed;
			inset: 0;
			z-index: 40;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgb(0 0 0 / .75);
			text-transform: uppercase;
			font-family: var(--wp--preset--font-family--roc);
			pointer-events: none;
			
			& > div {
				width: min-content;
				position: relative;
				rotate: -2deg;
				
				& .line1 {
					display: block;
					font-size: 16rem;
					line-height: .8;
					font-weight: 500;
					color: var(--wp--preset--color--jaune);
					text-align: center;
				}
				
				& .inner {
					position: absolute;
					left: 10%;
					top: 30%;
					font-size: 5rem;
					font-weight: 700;
					line-height: 0.8;
					padding: 0.25em;
					border-radius: .45em;
					rotate: -5deg;
					color: var(--wp--preset--color--blanc);
					background-color: var(--wp--preset--color--vert);
				}
				
				& .line2 {
					display: block;
					font-size: 26rem;
					line-height: .7;
					font-weight: 700;
					color: var(--wp--preset--color--rose);
					text-align: center;
				}	
			}
		}
	}
	
	/******************************/
	/* Loader
	/******************************/
	& > .loader {
		display: none;
		position: absolute;
		top: 50%;
		left: 50%;
		pointer-events: none;
		translate: -50% -50%;
		z-index: 40;
		
		/*-- Animation/transition --*/
		animation-name: loader-out;
		animation-duration: .3s;
		animation-play-state: paused;
		animation-fill-mode: forwards;
		/*-- Animation/transition --*/
		
		&::before  {
			--scale: 2.5;
			
			content: '';
			display: block;
			width: calc(70px * var(--scale));
			height: calc(26px * var(--scale));
			background:  var(--wp--preset--color--orange);
			border-radius: calc(50px * var(--scale));
			
			--c: no-repeat radial-gradient(farthest-side,#000 92%,#0000);
			--s: calc(18px * var(--scale)) calc(18px * var(--scale));
			
			mask: var(--c) left calc(4px * var(--scale)) top 50%, var(--c) center, var(--c) right calc(4px * var(--scale)) top 50%, linear-gradient(#000 0 0);
			mask-composite: exclude;
			
			animation: loader-anim 1.5s infinite;
		}
	}
	
	&.htmx-request:has(#match-overlay[class=""], #match-overlay:not([class])) > .loader {
		display: block;
	}
	
	&.htmx-request:has(#match-overlay[class=""], #match-overlay:not([class])) > .interface > * {
		pointer-events: none !important;
	}
	
	&.htmx-request:has(#match-overlay[class=""], #match-overlay:not([class])) > .interface > :not(.app-menu) {
		opacity: 0 !important;
		
		& * {
			pointer-events: none !important;
		}
	}
	
	@media (width <= 1400px) {
		&.wp-block-cke-app {
			--app-columns: .5fr 1.125fr 1.25fr;
		}
	}
	
	@media (width <= 1100px) {
		&.wp-block-cke-app {
			--app-columns: 120px 1fr 1fr; /* 120px = width of Yep/Nope buttons */
		}
	}
	
	@media (width <= 1000px) {
		&.wp-block-cke-app {
			--app-columns: .5fr 1fr .5fr;
		}
	}
}