/* 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; }
}

/* Landing test — logo halves in place of the typed MUZZIN / SAMIRI.
   Same position, rotation and colour as the original titles (they inherit everything);
   letter height ≈ 60% of the typed capitals, as in Ben's mock-up. */
#page-content[page-type=home] .title.logo-title .logo-part {
	display: inline-block;
	height: 0.45em;
	overflow: hidden;
	vertical-align: middle;
	position: relative;
	top: -0.1em;          /* centred on where the typed capitals were */
}
#page-content[page-type=home] .title.logo-title .logo-part--muzzin { width: calc(0.45em * 2782.59 / 400); }
#page-content[page-type=home] .title.logo-title .logo-part--samiri { width: calc(0.45em * 2420.66 / 400); }

/* Glass landing (desktop, WebGL): the canvas draws the logo and the images itself,
   so the page's own copies stay in place (for layout and clicks) but invisible. */
body.glass-landing #page-content[page-type=home] #glass-background {
	position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;
}
body.glass-landing #page-content[page-type=home] .title,
body.glass-landing #page-content[page-type=home] #home-feed { visibility: hidden; }