/*
 * HTL Villach - department hero shapes.
 *
 * The wrapper keeps the theme's .mil-dodecahedron class because
 * assets/js/main.js clones exactly that selector into every .mil-animation.
 * Two variants exist:
 *
 *   .htlv-shape--solid  a css 3d body (faces and edges in space). It keeps the
 *                       theme's own "rotate" tumble, which is what makes the
 *                       original dodecahedron read as a real volume.
 *   .htlv-shape--flat   a plain svg. A full tumble would collapse it into a
 *                       line twice per turn, so it gets a gentle float instead.
 *
 * Selectors are scoped to .mil-animation on purpose - that is the cloned copy
 * inside the hero, not the hidden template in the footer.
 */

/* ---------- shared ---------- */

.mil-animation .mil-dodecahedron.htlv-shape {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0;
	height: 0;
	-webkit-transform-style: preserve-3d;
	        transform-style: preserve-3d;
}

/* ---------- solid: css 3d bodies ---------- */

/*
 * Faces and edges are hairlines in white. The theme dims the whole animation
 * to opacity .2, so full white here lands at the same weight as the original
 * pentagon edges.
 */
.mil-animation .htlv-face {
	position: absolute;
	left: 0;
	top: 0;
	box-sizing: border-box;
	border: 1px solid rgb(255, 255, 255);
}

.mil-animation .htlv-edge {
	position: absolute;
	left: 0;
	top: 0;
	height: 0;
	box-sizing: border-box;
	border-top: 1px solid rgb(255, 255, 255);
	/* Edges rotate around their left end, so a transform places the start
	   point and the rotation gives the direction. */
	-webkit-transform-origin: 0 0;
	        transform-origin: 0 0;
}

/* Dark hero variant - the theme flags it on the .mil-animation wrapper. */
.mil-animation.mil-dark .htlv-face {
	border-color: rgb(0, 0, 0);
}

.mil-animation.mil-dark .htlv-edge {
	border-top-color: rgb(0, 0, 0);
}

/* ---------- flat: svg shapes ---------- */

.mil-animation .mil-dodecahedron.htlv-shape--flat {
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-transform-style: flat;
	        transform-style: flat;
	-webkit-animation: htlv-shape-float 24s ease-in-out infinite;
	        animation: htlv-shape-float 24s ease-in-out infinite;
}

.mil-animation .htlv-shape__svg {
	width: 62%;
	height: 62%;
	overflow: visible;
	fill: none;
	stroke: rgb(255, 255, 255);
	stroke-width: 0.14;
}

.mil-animation.mil-dark .htlv-shape__svg {
	stroke: rgb(0, 0, 0);
}

@-webkit-keyframes htlv-shape-float {
	0%, 100% {
		-webkit-transform: perspective(600px) rotateX(9deg) rotateY(-17deg) rotateZ(-5deg);
		        transform: perspective(600px) rotateX(9deg) rotateY(-17deg) rotateZ(-5deg);
	}
	50% {
		-webkit-transform: perspective(600px) rotateX(-9deg) rotateY(17deg) rotateZ(5deg);
		        transform: perspective(600px) rotateX(-9deg) rotateY(17deg) rotateZ(5deg);
	}
}

@keyframes htlv-shape-float {
	0%, 100% {
		-webkit-transform: perspective(600px) rotateX(9deg) rotateY(-17deg) rotateZ(-5deg);
		        transform: perspective(600px) rotateX(9deg) rotateY(-17deg) rotateZ(-5deg);
	}
	50% {
		-webkit-transform: perspective(600px) rotateX(-9deg) rotateY(17deg) rotateZ(5deg);
		        transform: perspective(600px) rotateX(-9deg) rotateY(17deg) rotateZ(5deg);
	}
}

/* ---------- background lines ---------- */

/*
 * The theme only strokes path, rect and line inside .mil-lines. Department
 * templates also use polyline and circle, so those need the same treatment -
 * in both the dark and the light placement.
 */
.mil-lines-place .htlv-lines polyline,
.mil-lines-place .htlv-lines circle,
.mil-lines-place .htlv-lines polygon {
	stroke: rgb(0, 0, 0);
}

.mil-lines-place.mil-light .htlv-lines polyline,
.mil-lines-place.mil-light .htlv-lines circle,
.mil-lines-place.mil-light .htlv-lines polygon {
	stroke: rgb(255, 255, 255);
}

.mil-lines-place .htlv-lines rect,
.mil-lines-place .htlv-lines circle,
.mil-lines-place .htlv-lines polyline,
.mil-lines-place .htlv-lines polygon {
	fill: none;
}

@media (prefers-reduced-motion: reduce) {
	.mil-animation .mil-dodecahedron.htlv-shape {
		-webkit-animation: none;
		        animation: none;
	}
}