/********************************************************/
/*
/*      Cruise Contrôle App CSS - Profiles
/*
/********************************************************/
body.page-template-page-app .interface > .profiles {	
	grid-column: 1 / span 3;
	display: grid;
	grid-template-rows: 100svh;
	grid-template-columns: var(--app-columns);
	column-gap: var(--wp--preset--spacing--1);
	width: 100%;
	height: 100svh;
	padding-block-start: var(--wp--custom--header-height);
	overflow-y: clip;
	pointer-events: none;
	z-index: 4;
	
	/*-- Animation/transition --*/
	&.init {
		animation-name: fade-in;
		animation-duration: var(--anim-speed);
		animation-fill-mode: forwards;
		animation-play-state: paused;		
	}
	&.animate {
		animation-play-state: running;
	}
	/*-- Animation/transition --*/

	&:is(.visible, .animate) > * {
		grid-row: 1;
		pointer-events: all;
	}
	
	& .no-content {
		align-self: center;
	}
	
	/******************************/
	/* Yep/Nope buttons
	/******************************/
	&:has(.no-content) > .profiles-nav {
		display: none;
	}
	
	&:has(#end-of-list:only-child) > .profiles-nav > button {
		pointer-events: none !important;
		transition: opacity var(--anim-speed-fast) !important;
		
		:has(#end-of-list:only-child) > .profiles-nav > & {
			opacity: 0 !important;
		}
	}
	
	& > .profiles-nav {
		grid-column: 2;
		justify-self: start;
		align-self: center;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		position: relative;
		z-index: 4;
		
		& > button {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			width: 120px;
			aspect-ratio: 1;
			border: 8px solid #fff;
			border-radius: 50%;
			cursor: pointer;
			overflow: clip;
			opacity: 1;
			translate: -100%;
			transition: rotate var(--anim-speed-fast), scale var(--anim-speed-fast);
			
			&[disabled] {
				pointer-events: none;
			}
			
			/*-- Animation/transition --*/
			&.init {
				opacity: 0;
				translate: 100%;
				
				animation-name: fade-in, slide-in-out-left;
				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;
			}
			&:active {
				scale: 0.95;
			}
			&:is(:hover, :focus, :active) > img {
				scale: 1.05;
			}
			/*-- Animation/transition --*/
			
			&::after {
				content: '';
				display: block;
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				box-shadow: inset 4px 4px 6px 0px rgba(0 0 0 / 0.25);
			}
			
			& > img {
				width: 70%;
				max-width: 70%;
				scale: 1;
				transition: scale var(--anim-speed-fast);
				z-index: 1;
			}
			
			&.yep {
				background-color: var(--wp--preset--color--vert);
				
				animation-delay: .2s, .3s;
			}
			
			&.nope {
				background-color: var(--wp--preset--color--orange);
				
				& > img {
					width: 85%;
					max-width: 85%;
				}
			}
			
			/* Messages button (only visible on mobile) */
			&.messages {
				order: -1;
				display: none;
				width: 80px;
				background-color: var(--wp--preset--color--jaune);
				
				animation-delay: .3s, .4s;
				
				&::after {
					box-shadow: none;
				}
				
				& > img {
					translate: 0 2px;
				}
				
				@media (width <= 1000px) {
					&.messages {
						display: block;
					}
				}
			}
		}
		
		/* @media (width <= 1100px) {
			&.profiles-nav > button {
				width: 100px;
				border: 7px solid #fff;
			}
		} */
	}
	
	/******************************/
	/* Profiles list
	/******************************/
	& > #profiles-list {
		grid-column: 2;
		justify-self: center;
		display: grid;
		grid-template-rows: 100%;
		grid-template-columns: 100%;
		width: max-content;
		height: calc(100% - var(--wp--custom--header-height));
		
		&:has(.profile:nth-of-type(3)) { --adjustment: var(--wp--preset--spacing--0-25); }
		&:has(.profile:nth-of-type(4)) { --adjustment: var(--wp--preset--spacing--0-50); }
		&:has(.profile:nth-of-type(5)) { --adjustment: var(--wp--preset--spacing--0-75); }
		&:has(.profile:nth-of-type(6)) { --adjustment: var(--wp--preset--spacing--1); }
		&:has(.profile:nth-of-type(7)) { --adjustment: var(--wp--preset--spacing--1-5); }
		&:has(.profile:nth-of-type(8)) { --adjustment: var(--wp--preset--spacing--2); }
		
		/******************************/
		/* Profile
		/******************************/
		& > .profile  {
			--swipe-translation: 0%;
			--swipe-rotation: 0deg;
			
			grid-row: 1;
			grid-column: 1;
			justify-self: center;
			align-self: center;
			display: grid;
			grid-template-rows: 1fr auto min-content;
			position: relative;
			min-width: 100%;
			width: auto;
			max-width: 100%;
			height: 85%;
			aspect-ratio: 6/10;
			background: var(--wp--preset--color--blanc);
			border: 8px solid var(--wp--preset--color--blanc);
			border-radius: 2rem;
			box-shadow: 3px 3px 8px rgb(0 0 0 / 0.25);
			overflow: clip;
			isolation: isolate;
			transform-origin: top center;
			scale: calc(1 - (.05 * var(--index)));
			translate: 0 calc(((var(--wp--preset--spacing--0-75) * var(--index)) * -1) + var(--adjustment, 0px));
			transition: scale var(--anim-speed), translate var(--anim-speed);
			z-index: var(--z-index, 5);
			
			/*-- Animations/transitions --*/
			/* Init */
			&.init {
				opacity: 1 !important;
				translate: 0 100svh;

				animation-name: profile-init;
				animation-duration: var(--anim-speed-slow);
				animation-delay: calc(.1s * var(--index));
				animation-fill-mode: forwards;
				animation-play-state: paused;
				animation-timing-function: var(--anim-easing-overshoot);
			}
			
			&.animate,
			&.animate::after {
				animation-play-state: running;
				pointer-events: none;
			}
			
			/* Yep/Nope */
			&.yep {
				--swipe-translation: 100%;
				--swipe-rotation: 15deg;
			}
			
			&.nope {
				--swipe-translation: -100%;
				--swipe-rotation: -15deg;
			}
			
			&::before,
			&::after {
				content: '';
				display: block;
				position: absolute;
				opacity: 0;
				pointer-events: none;
			}
			
			&::before {
				inset: 0;
				width: 100%;
				height: 100%;
				transition: opacity var(--anim-speed);
				filter: brightness(.75);
				z-index: 2;
			}
			
			&::after {
				top: 50%;
				left: 50%;
				width: 90%;
				height: auto;
				aspect-ratio: 1;
				translate: -50% -50%;
				scale: 1;
			}
			
			&:is(.swipe-1, .swipe-2)::before {
				opacity: .5;
			}
			
			&:is(.swipe-1, .swipe-2).yep::before {
				background-color: var(--wp--preset--color--vert);
			}
			
			&:is(.swipe-1, .swipe-2).nope::before {
				background-color: var(--wp--preset--color--orange);
			}
			
			&:is(.swipe-1, .swipe-2).yep::after {
				background: url(../images/check.svg) no-repeat center / 100%;
				filter: var(--wp--custom--color--filter--vert) brightness(.75);
			}
			
			&:is(.swipe-1, .swipe-2).nope::after {
				background: url(../images/xmark.svg) no-repeat center / 100%;
				filter: var(--wp--custom--color--filter--orange) brightness(.75);
			}
			
			/* Swipe - Part 1 */
			&:is(.swipe-1, .swipe-2):is(.yep, .nope)::after {
				animation-name: profile-swipe-1;
				animation-duration: var(--anim-speed);
				animation-fill-mode: forwards;
			}
			
			/* Swipe - Part 2 */
			&.swipe-2:is(.yep, .nope) {
				opacity: 1;
				translate: 0;
				rotation: 0deg;
				
				animation-name: profile-swipe-2, fade-out;
				animation-duration: var(--anim-speed);
				animation-fill-mode: forwards;
				animation-delay: unset;
				animation-timing-function: unset;
			}
			/*-- Animations/transitions --*/
			
			& * {
				user-select: none;
			}
			
			& > .profile-bg {
				position: absolute;
				top: 0;
				left: 50%;
				height: 100%;
				translate: -50%;
			}
			
			& > .profile-picture {
				grid-column:  1 / span 1;
				grid-row: 1 / span 3;
				inset: 0;
				margin: 0;
				z-index: 0;
				pointer-events: none;
				
				&> img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					object-position: top center;
				}
			}
			
			& > .profile-meta {
				grid-column: 1 / span 1;
				grid-row: 2 / span 1;
				display: flex;
				flex-direction: column;
				position: relative;
				width: 100%;
				max-width: 100%;
				padding-inline: var(--wp--preset--spacing--1);
				margin-block-end: var(--wp--preset--spacing--1);
				margin-inline: auto;
				box-sizing: border-box;
				
				&::before,
				&::after {
					display: block;
					position: absolute;
					bottom: -1rem;
					font-size: var(--wp--preset--font-size--small);
					border-radius: 15px;
					padding-block: var(--wp--preset--spacing--0-25) calc(var(--wp--preset--spacing--0-25) / 2);
					padding-inline: var(--wp--preset--spacing--0-75);
					z-index: 1;
				}
				
				&:not([data-age=""])::before {
					content: attr(data-age);
					background: var(--wp--preset--color--rose);
					left: var(--wp--preset--spacing--2);
					translate: 25% 50%;
				}
				
				&[data-distance=""]::before {
					left: 50%;
					translate: -50% 50%;
				}
				
				&:not([data-distance=""])::after {
					content: attr(data-distance);
					background: var(--wp--preset--color--jaune);
					right: var(--wp--preset--spacing--2);
					translate: -25% 50%;
				}
			
				& > * {
					justify-self: center;
					display: block;
					font-family: var(--wp--preset--font-family--roc);
					font-size: 5rem;
					line-height: 0.8;
					font-weight: 700;
					text-align: center;
					text-transform: uppercase;
					text-shadow: 3px 3px 2px rgb(0 0 0 / 0.25);
					color: var(--wp--preset--color--blanc);
					overflow-wrap: break-word;
					hyphens: auto;
				}
				
				& > .first-name {
					font-size: 4rem;
				}
				
				@media (width <= 900px) {
					& > * {
						font-size: 4rem;
					}
					
					& > .first-name {
						font-size: 3rem;
					}
				}
			}
			
			& > .profile-description {
				grid-column: 1 / span 1;
				grid-row: 3 / span 1;
				position: relative;
				font-size: var(--wp--preset--font-size--medium-small);
				line-height: 1;
				text-align: center;
				background: rgb(255 255 255 / .5);
				background-image: linear-gradient(224.03492698355262deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.5) 100%);
				background-size: 100%%;
				backdrop-filter: blur(15px);
				padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--1-5) var(--wp--preset--spacing--3);
				border-radius: 32px 32px 0 0;
				
				mark.highlight-red-flag {
					display: contents;
					color: inherit;
					background-color: unset;
					line-height: inherit;
					padding: unset;
				}
			}
			
			&#end-of-list {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: var(--wp--preset--spacing--3);
				background: var(--wp--preset--color--rose);
				cursor: pointer;
				
				& > img {
					width: 50%;
				}
				
				& > h3 {
					width: 85%;
					text-align: center;
					margin-block: unset;
				}
			}
			
			&#end-of-list.active {
				cursor: pointer;
				pointer-events: all;
			}
		}
	}
}