/* ==========================================================================
   Spinner layout styles
   ========================================================================== */

#qodef-page-spinner {

	&.qodef-layout--ginevra {

		&.qodef--loaded {

			.qodef-m-ginevra-intro {

				img {
					clip-path: inset(15% 35% 15% 35%);

					@include qodefScreenSize680 {
						clip-path: inset(15% 15% 15% 15%);
					}
				}
			}

			.qodef-m-ginevra {
				opacity: 1;

				.word {

					.char {
						transform: translateY(-2%); //because of letters with lower letter par ex. j
					}
				}
			}
		}

		.qodef-m-inner {
			display: block;
		}

		.qodef-m-ginevra {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: currentColor;
			font-family: $heading-font;
			font-size: 160px;
			line-height: 150px;
			font-weight: 700;
			text-transform: uppercase;
			text-align: center;
			z-index: 4;
			opacity: 0;
			transition: opacity .05s ease-out;

			@include qodefScreenSize680 {
				font-size: 50px;
				line-height: 50px;
			}

			.word {
				display: inline-flex;
				overflow: hidden;

				.char {
					display: inline-flex;
					transform: translateY(110%);
					transition: transform .8s cubic-bezier(.65, .05, .36, 1);
					transition-delay: calc(60ms * var(--char-index) + 100ms);
					padding-top: .2%; //because of letters with lower letter par ex. j
				}
			}
		}

		.qodef-m-ginevra-intro {

			.qodef-m-ginevra-image {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
				transform: scale(1);
				transition: opacity 1s ease-out, transform 1s ease-out;

				&.qodef--animate {
					opacity: 1;
					transform: scale(1.05);
				}

				&:last-child {
					position: relative;
				}
			}

			img {
				height: 100vh;
				width: 100vw;
				object-fit: cover;
				clip-path: inset(0 0 0 0);
				transition: clip-path .8s cubic-bezier(0.37, 0, 0.63, 1);
			}
		}
	}
}