/* ===== GENERAL ===== */

/* General */
:root {
	--previewBackgroundColor1 : 192, 255, 192 ;
	--previewBackgroundColor2 : 0, 128, 0 ;
}

/* Page navigation */
.page_navigation_heading {
	--backgroundColorActive : 167, 255, 167 ;
	--colorHover : #B0E6B0 ;
	--colorActive : #102770 ;
	--colorActiveHover : #000000 ;
}

/* Articles */
article {
	--textBackgroundColor : 64, 128, 64 ;
}


/* ===== ARTICLE : RADEX ===== */
.image_and_mask_container {
	display : flex ;
	flex-direction : column ;
	flex-wrap : nowrap ;
	justify-content : center ;
	align-items : center ;
	width : 100% ;
}

.image_and_mask_wrapper {
	--extraBorderSize : 100px ;
	
	position : relative ;
	height : auto ;
	width : 40vw ;
	aspect-ratio : 8 / 7 ;
	overflow : hidden ;
	
	margin : var(--extraBorderSize) ;
	
	cursor : zoom-in ;
	
	box-shadow : 10px 10px 20px var(--backgroundColor) ;
}

.image_and_mask_background_container,
.image_and_mask_mask_container {
	position : absolute ;
	top : 0 ;
	left : 0 ;
	height : 100% ;
	width : 100% ;
	
	display : flex ;
	flex-direction : column ;
	flex-wrap : nowrap ;
	justify-content : center ;
	align-items : center ;
}

.image_and_mask_background_container {
	justify-content : flex-start ;
}

.image_and_mask_mask_container {
	--minRadius : 75px ;
	
	--mousePositionX : calc(var(--minRadius) / 2) ;
	--mousePositionY : calc(var(--minRadius) / 2) ;
	
	--radiusFullTransparent : var(--minRadius) ;
	--radiusSemiTransparent : var(--minRadius) ;
	--radiusTransparent : calc(var(--radiusFullTransparent) + var(--radiusSemiTransparent)) ;
	
	align-items : flex-start ;
	
	mask-image : radial-gradient(circle at var(--mousePositionX) var(--mousePositionY),
									rgba(0, 0, 0, 0.9) var(--radiusFullTransparent),
									rgba(0, 0, 0, 0) var(--radiusTransparent)) ;
	-webkit-mask-image : radial-gradient(circle at var(--mousePositionX) var(--mousePositionY),
							rgba(0, 0, 0, 0.9) var(--radiusFullTransparent),
							rgba(0, 0, 0, 0) var(--radiusTransparent)) ;
	
	clip-path : circle(var(--radiusTransparent) at var(--mousePositionX) var(--mousePositionY)) ;
	
	filter : drop-shadow(0 0 1px) ;
}

.image_and_mask_background {
	width : 110% ;
}

.image_and_mask_mask {
	width : 125% ;
}


/* ===== ARTICLE : BOTS ===== */
.bot_images_container {
	--botImagesContainerAnimationDuration : 5s ;
	--botImagesContainerNumber : 2 ;
	
	--index : 0 ;
	
	position : relative ;
	
	opacity : 0 ;
	
	pointer-events : none ;
	
	animation : botImagesContainerAnimation calc(var(--botImagesContainerAnimationDuration) * var(--botImagesContainerNumber)) ease-in-out calc((var(--botImagesContainerAnimationDuration) * var(--index)) - var(--botImagesContainerAnimationDuration)) infinite ;
}
	@keyframes botImagesContainerAnimation {
		0%,
		10% {
			opacity : 0 ;
		}
		25% {
			opacity : 1 ;
		}
		35% {
			pointer-events : none ;
		}
		40%,
		60% {
			opacity : 1 ;
			
			pointer-events : auto ;
		}
		65% {
			pointer-events : none ;
		}
		70% {
			opacity : 0 ;
		}
		90%,
		100% {
			opacity : 0 ;
		}
	}
	.bot_images_container.paused_animation {
		animation-play-state : paused ;
	}
	.bot_images_container:nth-of-type(2) {
		--index : 1 ;
	}

.bot_background_wrapper {
	position : absolute ;
	top : 0 ;
	left : 0 ;
	
	height : auto ;
	width : 600px ;
	aspect-ratio : 4 / 3 ;
	overflow : hidden ;
	
	display : flex ;
	flex-direction : column ;
	flex-wrap : nowrap ;
	justify-content : flex-start ;
	align-items : flex-start ;
	
	background : rgba(255, 255, 255, 0.75) ;
	
	mask-image : radial-gradient(closest-side at center, rgba(0, 0, 0, 0.9) 70%, rgba(0, 0, 0, 0) 99%) ;
	-webkit-mask-image : radial-gradient(closest-side at center, rgba(0, 0, 0, 0.9) 70%, rgba(0, 0, 0, 0) 99%) ;
	
	clip-path : ellipse(closest-side closest-side at center) ;
	
	filter : drop-shadow(0 0 1px) ;
	
	opacity : 0.75 ;
	
	translate : -50% 0 ;
	
	transition : opacity 0.2s ease ;
	
	animation : botBackgroundWrapperAnimation calc(var(--botImagesContainerAnimationDuration) * var(--botImagesContainerNumber)) ease-in-out calc((var(--botImagesContainerAnimationDuration) * var(--index)) - var(--botImagesContainerAnimationDuration)) infinite ;
}
	@keyframes botBackgroundWrapperAnimation {
		0%,
		10% {
			filter : drop-shadow(0 0 1px) blur(5px) ;
		}
		25%,
		40%,
		60% {
			filter : drop-shadow(0 0 1px) blur(0px) ;
		}
		70%,
		90%,
		100% {
			filter : drop-shadow(0 0 1px) blur(5px) ;
		}
	}
	.bot_images_container:hover .bot_background_wrapper {
		opacity : 1 ;
	}
	.bot_images_container.paused_animation .bot_background_wrapper {
		animation-play-state : paused ;
	}
	.bot_images_container:nth-of-type(2) .bot_background_wrapper {
		--index : 1 ;
	}

.bot_background {
	height : auto ;
	width : 125% ;
}

.bot_images_wrapper {
	--index : 0 ;
	
	position : relative ;
	
	transition : opacity 0.2s ease ;
	
	animation : botImagesWrapperAnimation calc(var(--botImagesContainerAnimationDuration) * var(--botImagesContainerNumber)) ease-in-out calc((var(--botImagesContainerAnimationDuration) * var(--index)) - var(--botImagesContainerAnimationDuration)) infinite ;
}
	@keyframes botImagesWrapperAnimation {
		0%,
		10% {
			translate : -100px 0px ;
		}
		40%,
		60% {
			translate : 0px 10px ;
		}
		90%,
		100% {
			translate : 100px 0px ;
		}
	}
	.bot_images_wrapper:hover {
		opacity : 1 ;
	}
	.bot_images_container.paused_animation .bot_images_wrapper {
		animation-play-state : paused ;
	}
	.bot_images_container:nth-of-type(2) .bot_images_wrapper {
		--index : 1 ;
	}

.bot_image {
	--translate : 50px ;
	
	--index : 0 ;
	--transformationMultiplier : 1 ;
	
	position : absolute ;
	top : 0 ;
	left : 0 ;
	
	border : 1px solid grey ;
	border-radius : 10px ;
	box-shadow : 0 0 10px grey ;
	
	translate : calc(-50% + ((var(--translate) * var(--index)) * var(--transformationMultiplier)))
				calc((var(--translate) / 2) + ((var(--translate) * var(--index)) * var(--transformationMultiplier))) ;
	
	rotate : calc((1deg * var(--transformationMultiplier))
				+ ((10deg * var(--index)) * var(--transformationMultiplier))) ;
	
	scale : 0.9 ;
	
	transition : rotate 0.2s ease, scale 0.2s ease, translate 0.2s ease ;
}
	.bot_image:hover {
		z-index : 2 ;
		scale : 1 ;
	}
	.bot_images_container:hover .bot_image {
		--transformationMultiplier : 1.5 ;
	}

.diablo3 .bot_image:nth-of-type(1) {
	--index : -1 ;
}
.diablo3 .bot_image:nth-of-type(2) {
	--index : 0 ;
}
.diablo3 .bot_image:nth-of-type(3) {
	--index : 1 ;
}

.dota2 .bot_image:nth-of-type(1) {
	--index : -0.5 ;
}
.dota2 .bot_image:nth-of-type(2) {
	--index : 0.5 ;
}

/* ===== SMALL SCREENS ===== */

/* The bot collages are built with absolutely positioned children : the container
   is 0px high, so on small screens the images overflowed below the article and
   ended up hidden behind the footer. The container gets an intrinsic box, and
   the collage is scaled and centered inside it. */
@media screen and (max-width : 1024px) {
	
	/* The reveal effect : the background must fill its wrapper, and the oversized
	   effect border (100px around) must shrink to fit a phone card */
	.image_and_mask_wrapper {
		--extraBorderSize : 20px ;
		width : min(600px, 76vw) ;
	}
	.image_and_mask_background_container {
		width : 100% ;
	}
	.image_and_mask_background_container img {
		width : 100% ;
		height : auto ;
	}
}

/* ===== BOTS COLLAGE (all sizes) : contained, centered, sweeping ===== */
/* The desktop absolute layout misaligned the fan inside the cards : the mobile
   containment model (intrinsic 4/3 box, centered half-width anchor, original
   sweep animation) now applies everywhere */
.article_preview:has(.bot_images_container) {
	display : grid ;
	/* Explicit track : an implicit column is content-sized, and the collages are
	   absolutely positioned children (content width : zero) */
	grid-template-columns : 100% ;
	padding-bottom : 20px ;
}
/* Stretched grid item : the box takes the column width (a percentage inside
   min() computed to zero in this grid context), the ratio gives its height */
.bot_images_container {
	grid-row : 1 ;
	grid-column : 1 ;
	width : auto ;
	max-width : 600px ;
	aspect-ratio : 4 / 3 ;
}
.bot_background_wrapper {
	width : 100% ;
	height : 100% ;
	top : 0 ;
	left : 50% ;
	translate : -50% 0 ;
}
.bot_images_wrapper {
	position : absolute ;
	top : 0 ;
	left : 50% ;
	width : 50% ;
}
.bot_image {
	width : 100% ;
	height : auto ;
}

/* The reveal effect stays inside its column at every size (the 40vw wrapper and
   its 100px effect border were overflowing the card on desktop) */
.image_and_mask_wrapper {
	--extraBorderSize : 20px ;
	width : 100% ;
}