/*!
 * Home slider CSS singleton
 * Author: Abel Brencsan
 * Licensed under the MIT license
 */

/* Home slider singleton prototype */
div.home-slider.glider {
	--glider-width: 80%;
	--home-slide-item-image-lazy-load-transition: 1000ms ease;
	--home-slider-buttons-transition: 300ms ease 1200ms;
	--home-slider-gap: 4rem;
	--home-slider-heading-transition: 300ms ease 400ms;
	--home-slider-item-bg-color: var(--scheme-dark-border-bg-color);
	--home-slider-item-fg-color: var(--scheme-dark-fg-color);
	--home-slider-reveal-transition: 600ms ease;
	--home-slider-subheading-transition: 300ms ease 800ms;
	background-image: linear-gradient(180deg, var(--border-color) 0%, transparent 100%);
	overflow: hidden;
	padding: calc((var(--section-padding) * 0.5) + var(--navbar-height)) var(--home-slider-gap) 0 var(--home-slider-gap);
	position: relative;

	ul.glider-list {
		margin-bottom: 0;
		position: relative;
		z-index: 1;

		> li {

			div.home-slider-item.glider-item {
				scroll-snap-align: center;

				&:after {
					backdrop-filter: blur(12px);
					content: "";
					height: 100%;
					left: 0;
					opacity: 1;
					position: absolute;
					top: 0;
					transition: opacity var(--home-slider-reveal-transition), visibility var(--home-slider-reveal-transition);
					visibility: visible;
					width: 100%;
				}
			}

			&.is-visible {

				div.home-slider-item.glider-item {

					div.home-slider-item-text {

						h1, h2, h3, h4, h5, h6, p, ul.home-slider-item-button-list.button-list {
							opacity: 1;
							transform: translate3d(0, 0, 0);
						}

						h1, h2, h3, h4, h5, h6 {
							transition: opacity var(--home-slider-heading-transition), transform var(--home-slider-heading-transition);
						}

						p {
							transition: opacity var(--home-slider-subheading-transition), transform var(--home-slider-subheading-transition);
						}

						ul.home-slider-item-button-list.button-list {
							transition: opacity var(--home-slider-buttons-transition), transform var(--home-slider-buttons-transition);
						}
					}

					&:after {
						opacity: 0;
						visibility: hidden;
					}
				}
			}

			&:not(.is-visible) {

				div.home-slider-item.glider-item {
					cursor: pointer;

					div.home-slider-item-text {

						h1, h2, h3, h4, h5, h6, p, ul.home-slider-item-button-list.button-list {
							opacity: 0;
							transition: opacity 200ms, transform 0ms 200ms;
						}

						h1, h2, h3, h4, h5, h6, p {
							transform: translate3d(0, 2rem, 0);
						}

						ul.home-slider-item-button-list.button-list {
							transform: translate3d(-2rem, 0, 0);
						}
					}
				}
			}
		}
	}

	div.home-slider-item.glider-item {
		align-items: center;
		background-color: var(--home-slider-item-bg-color);
		color: var(--home-slider-item-fg-color);
		display: grid;
		grid-template-areas: "image text";
		grid-template-columns: 60% 40%;
		overflow: hidden;
		position: relative;

		div.home-slider-item-image {
			grid-area: image;
			height: 100%;
			position: relative;

			img, canvas {
				height: 100%;
				object-fit: cover;
				width: 100%;

				&[loading=lazy] {
					opacity: 0;
					transition: opacity var(--home-slide-item-image-lazy-load-transition);

					&.is-loaded {
						opacity: 1;
					}
				}
			}

			&:after {
				background-image: linear-gradient(-90deg, var(--home-slider-item-bg-color) 5%, transparent 100%);
				bottom: 0;
				content: "";
				height: 100%;
				position: absolute;
				right: 0;
				width: 25%;
			}
		}
	
		div.home-slider-item-text {
			padding: calc(var(--box-padding) * 2);
			text-align: center;

			h1, h2, h3, h4, h5, h6 {
				color: inherit;
				font-size: 1.6vw;
			}

			p {
				font-size: 1.2vw;
			}

			ul.home-slider-item-button-list.button-list {
				justify-content: center;

				> li {

					a.button, button.button {
						min-width: 9rem;
					}
				}
			}

			> :last-child,
			> :last-child > :last-child,
			> :last-child > :last-child > :last-child {
				margin-bottom: 0;
			}
		}
	}

	ul.glider-action-list {
		bottom: var(--grid-gap);
		display: flex;
		flex-flow: column wrap;
		left: calc(var(--grid-gap) + var(--home-slider-gap));
		list-style: none;
		margin-bottom: 0;
		padding-left: 0;
		position: absolute;
		z-index: 1;
	
		> li {
			padding-left: 0;

			a.button, button.button {
				--button-bg-color: var(--scheme-dark-translucent-bg-color);
				--button-bg-hover-color: var(--scheme-dark-border-color);
				--button-fg-color: var(--scheme-dark-fg-color);
				backdrop-filter: blur(6px);
				font-size: var(--large-font-size);
			}
		}
	}

	&:before, &:after {
		background-image: linear-gradient(180deg, #000000 25%, transparent 100%);
		content: "";
		height: 100%;
		left: 50%;
		opacity: 0.02;
		position: absolute;
		top: 0%;
		transform-origin: 50% 100%;
		width: 100vw;
	}

	&:before {
		transform: skew(37deg);
	}

	&:after {
		transform: skew(-14deg);
	}

	@media (max-width: 82em) {
		padding-left: 0;
		padding-right: 0;

		ul.glider-action-list {
			left: var(--grid-gap);
		}
	}

	@media (max-width: 62em) {
		--glider-width: 70%;

		div.home-slider-item.glider-item {
			grid-template-areas: "image" "text";
			grid-template-columns: 1fr;

			div.home-slider-item-image {

				&:after {
					background-image: linear-gradient(0deg, var(--home-slider-item-bg-color) 5%, transparent 100%);
					height: 25%;
					width: 100%;
				}
			}

			div.home-slider-item-text {
				padding: var(--box-padding);

				h1, h2, h3, h4, h5, h6 {
					font-size: var(--heading-2-font-size);
				}

				p {
					font-size: var(--subheading-2-font-size);
				}
			}
		}

		ul.glider-action-list {
			bottom: auto;
			left: 0;
			top: calc(var(--element-margin) + var(--navbar-height));
		
			> li {

				a.button, button.button {
					font-size: var(--normal-font-size);
				}
			}
		}
	}

	@media (max-width: 32em) {
		--glider-gap: calc(var(--grid-gap) * 0.5);
		--glider-width: 90%;
	}

	@media (prefers-reduced-motion) {

		ul.glider-list {

			> li {

				div.home-slider-item.glider-item {

					&:after {
						display: none;
					}
				}

				&:not(.is-visible) {

					div.home-slider-item.glider-item {

						div.home-slider-item-text {

							h1, h2, h3, h4, h5, h6, p, ul.home-slider-item-button-list.button-list {
								opacity: 1;
								transform: translate3d(0, 0, 0);
							}
						}
					}
				}
			}
		}
	}
}

/* Home slider singleton extensions */
div.home-slider.glider {
}