/**
 * Custom styles to immediately follow Tailwind’s `base` layer
 *
 * “Add things like base typography styles [or] opinionated global resets.”
 *
 * — from https://tailwindcss.com/docs/plugins#adding-base-styles
 */

/**
 * This uses the background and foreground colors declared in the
 * `theme.json` file and is applied both to the frontend and in the block
 * editor.
*/
body {
	@apply font-body bg-white text-sm;
	@media (min-width: theme("screens.lg")) {
		@apply text-lg;
	}
}

#content {
	@apply lg:pl-[100px];
}
address {
	font-style: normal;
}

.edito {
	h1 {
		@apply mb-6 font-serif text-3xl;
	}
	h2,
	h3 {
		@apply text-red mb-2 mt-20 font-medium uppercase;
	}
	p {
		@apply text-green font-medium;
	}
}

@layer utilities {
	.full-centered {
		@apply flex items-center justify-center;
	}
	.section-title {
		@apply text-center font-serif text-xl lg:text-3xl;
	}
	.stretched-link {
		&:after {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 1;
			content: "";
		}
	}
	.anim-underline {
		@apply relative;
		line-height: 1.2;
		display: inline-block;
		&:after {
			background-color: theme("colors.black");
			content: "";
			position: absolute;
			width: 100%;
			height: 1px;
			bottom: -2px;
			left: 0;
			transform: scaleX(0);
			transition: transform 0.3s ease-out;
			transform-origin: top left;
		}
		&.light {
			&:after {
				background-color: theme("colors.white");
			}
		}
		&:hover {
			&:after {
				transform: scaleX(1);
			}
		}
	}
	.round-after {
		position: relative;

		&:after {
			transition: all 0.3s ease;
			position: absolute;
			left: 50%;
			bottom: -2px;
			transform: translate(-50%, 100%);
			content: "";
			background-color: theme("colors.green");
			width: 16px;
			height: 7px;
			border-bottom-left-radius: 14px;
			border-bottom-right-radius: 14px;

			@screen md {
				width: 30px;
				height: 15px;
				border-bottom-left-radius: 30px;
				border-bottom-right-radius: 30px;
			}
		}
		&.round-after-sm {
			&:after {
				bottom: 0px;
				width: 20px;
				height: 9px;
				border-bottom-left-radius: 18px;
				border-bottom-right-radius: 18px;
			}
		}
		&.round-after-lg {
			&:after {
				width: 16px;
				height: 7px;
				bottom: -10px;
				border-bottom-left-radius: 14px;
				border-bottom-right-radius: 14px;
				@screen md {
					width: 45px;
					height: 20px;
					border-bottom-left-radius: 40px;
					border-bottom-right-radius: 40px;
				}
			}
		}
		&.round-after-orange {
			&:after {
				background-color: theme("colors.orangeLight");
			}
		}
	}
	.bl-shadow {
		position: relative;
		z-index: 1;
		&::before,
		&:after {
			z-index: 0;
			content: "";
			position: absolute;
			background-color: theme("colors.red");
			left: 0;
			bottom: 0;
			transform: translate(-7px, 7px);
		}
		&:before {
			width: 7px;
			border-top-left-radius: 7px;
			height: 80%;
		}
		&:after {
			width: 35%;
			height: 7px;
		}
		&.b_lg {
			&:after {
				width: 55%;
			}
		}
	}
	.tl-shadow {
		z-index: 1;
		&::before,
		&:after {
			z-index: 0;
			content: "";
			position: absolute;
			background-color: theme("colors.red");
			left: 0;
			top: 0;
			transform: translate(-7px, -7px);
		}
		&:before {
			width: 7px;
			height: 60%;
			max-height: 160px;
		}
		&:after {
			width: 35%;
			height: 7px;
			border-top-right-radius: 7px;
			max-width: 170px;
		}
		&-orange {
			&::before,
			&:after {
				background-color: theme("colors.orange");
			}
		}
	}

	.liseret {
		text-align: left;
		position: relative;
		padding-left: 15px;

		&:before {
			top: 0;
			left: 0;
			content: "";
			position: absolute;
			height: calc(100% - 5px);
			width: 4px;
			border-top-left-radius: 4px;
			background-color: theme("colors.red");
			@media (min-width: theme("screens.lg")) {
				width: 7px;
				border-top-left-radius: 7px;
			}
		}
		&.orange {
			&:before {
				background-color: theme("colors.orange");
			}
			.card-uptitle {
				color: theme("colors.orange");
			}
		}
		&.red {
			&:before {
				background-color: theme("colors.red") !important;
			}
			.card-uptitle {
				color: theme("colors.red") !important;
			}
		}
		&.liseret__lg {
			&:before {
				top: -10px;
				height: calc(100% + 20px);
			}
		}
	}
}

.img_parallax {
	width: 100%;
	height: 100%;
	position: absolute;
}
.scroll-appear {
	opacity: 0;
	will-change: opacity;
	&-ok {
		opacity: 1;
		transition: opacity 1s ease;
	}
	&-dezoom {
		opacity: 1;
		transition: all 8s ease-in-out 0.3s;
		transform: scale(1.15);
		will-change: transform, opacity;
		&.scroll-appear-ok {
			transform: scale(1);
		}
	}
	&-fade-up {
		transition: all 1.5s ease;
		transform: translateY(-10px);
		will-change: transform, opacity;
		&.scroll-appear-ok {
			transform: translateY(0);
		}
	}
	&-fade-right {
		transition: all 1.5s ease;
		transform: translateX(10px);
		will-change: transform, opacity;
		&.scroll-appear-ok {
			transform: translateX(0);
		}
	}
	&-fade-left {
		transition: all 1.5s ease;
		transform: translateX(-10px);
		will-change: transform, opacity;
		&.scroll-appear-ok {
			transform: translateX(0);
		}
	}
	&-scale {
		opacity: 1;
		transition: all 1.5s ease;
		transform: scaleX(0) !important;
		will-change: width;
		&.scroll-appear-ok {
			opacity: 1;
			transform: scaleX(1) !important;
		}
	}
	&-right {
		opacity: 1;
		transition: all 2s ease-in-out;
		transform: translateX(25%);
		will-change: transform;
		&.scroll-appear-ok {
			opacity: 1;
			transform: translateX(0);
		}
	}
	&-left {
		opacity: 1;
		transition: all 2s ease-in-out;
		transform: translateX(-25%);
		will-change: transform;
		&.scroll-appear-ok {
			opacity: 1;
			transform: translateX(0);
		}
	}
	&-image {
		opacity: 1;
		transition: clip-path 1.5s ease-in-out;
		will-change: clip-path;
		clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
		&.scroll-appear-ok {
			clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
		}
	}
	&-clippath-h {
		opacity: 1;
		transition: clip-path 1.5s ease;
		will-change: clip-path;
		clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
		&.scroll-appear-ok {
			clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
		}
	}
	&-clippath-V {
		opacity: 1;
		transition: clip-path 1.5s ease;
		will-change: clip-path;

		&.scroll-appear-ok {
		}
	}
}
