/* v4 — landing page: original MUZZIN / SAMIRI titles + an "ENTER" cursor. */

/* "ENTER" cursor (mouse) / label (touch screens) */
#enter-cursor {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 20;
	transform: translate(-50%, -50%);
	pointer-events: none;
	white-space: nowrap;
	text-transform: uppercase;
	font-size: 3rem;
	line-height: 1;
	color: var(--plasma-color);   /* same animated colour as the site's other cursor labels */
}
@media (hover: hover) and (pointer: fine) {
	#page-content[page-type=home],
	#page-content[page-type=home] a.link-overlay { cursor: none; }
	#enter-cursor.is-hidden { opacity: 0; }
}
@media (hover: none), (pointer: coarse) {
	#enter-cursor {
		font-size: 2.5rem;
		animation: enter-pulse 2.4s ease-in-out infinite;
	}
}
@keyframes enter-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
	#enter-cursor { animation: none; }
}

/* ENTER written on a circle that turns around the cursor (like the project titles) */
#enter-cursor { width: 0; height: 0; }
#enter-cursor::before {               /* small cross in the centre, like the projects */
	content: '';
	position: absolute;
	left: -1rem; top: -1rem;
	width: 2rem; height: 2rem;
	background: url(../images/cross.svg) center / 2rem no-repeat;
}
#enter-cursor .enter-ring {
	position: absolute;
	left: -2.75em;            /* half of the 5.5em box: the circle's centre sits on the cross */
	top: -2.75em;
	width: 5.5em;
	height: 5.5em;
	transform-origin: 50% 50%;
}
#enter-cursor .enter-ring.is-spinning {
	animation: enter-spin 15s linear infinite;   /* same speed as the project titles */
}
#enter-cursor .enter-ring > div {               /* same box as the project titles (33rem at 6rem) */
	min-width: 5.5em;
	min-height: 5.5em;
}
@keyframes enter-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
@media (hover: none), (pointer: coarse) {
	#enter-cursor { animation: none; }                 /* no pulse when the text turns */
}
@media (prefers-reduced-motion: reduce) {
	#enter-cursor .enter-ring { animation: none; }
}