/* Milad Theme — front-page word-trail hero.
   Enqueued from functions.php on is_front_page(); the option-driven text
   sizes are layered on top with wp_add_inline_style(). */
/* ── RESET ── */
html, body {
	overflow: hidden !important;
	height: 100vh;
	margin: 0;
	padding: 0;
}

/* ── HERO — right of sidebar ── */
.ml-hero {
	position: fixed;
	top: 0;
	left: var(--sidebar-width, 240px);
	right: 0;
	bottom: 0;
	z-index: 10;
	background-color: var(--hero-bg, var(--bg));
	overflow: hidden;
	transition: background 0.3s;
}

/* The trail engine draws its own dot, so hide the native pointer when active */
.ml-hero--trail { cursor: none; }

/* ── CUSTOM CURSOR DOT ── */
#ml-cursor {
	position: fixed;
	width: 5px;
	height: 5px;
	background: var(--hero-ink, var(--text));
	border-radius: 50%;
	pointer-events: none;
	transform: translate(-50%, -50%);
	z-index: 9500;
	opacity: 0;
	transition: opacity 0.18s;
}
#ml-cursor.visible { opacity: 1; }

/* ── FRAME LINES ── */
.ml-frame-line {
	position: absolute;
	background: var(--hero-ink, var(--text));
	opacity: 0.09;
	pointer-events: none;
	z-index: 5;
}
.ml-frame-top    { top: 16px;    left: 16px; right: 16px;  height: 1px; }
.ml-frame-bottom { bottom: 16px; left: 16px; right: 16px;  height: 1px; }
.ml-frame-left   { left: 16px;   top: 16px;  bottom: 16px; width:  1px; }
.ml-frame-right  { right: 16px;  top: 16px;  bottom: 16px; width:  1px; }

/* ── LOCATION — bottom right ── */
#ml-location {
	position: absolute;
	bottom: 26px;
	right: 28px;
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 300;
	font-size: clamp(7px, 0.7vw, 10px);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--hero-ink, var(--text));
	opacity: 0.32;
	pointer-events: none;
	z-index: 20;
	text-align: right;
}

/* ── CENTER IDENTITY ── */
#ml-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	pointer-events: none;
	user-select: none;
	z-index: 10;
	transition: opacity 0.5s ease;
	max-width: 90vw;
	word-break: break-word;
}
#ml-center-image {
	display: block;
	max-width: 80vw;
	max-height: 50vh;
	width: auto;
	height: auto;
	margin: 0 auto 20px auto;
	object-fit: contain;
}
#ml-center .ml-hero-name {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 300;
	font-size: clamp(11px, 1.5vw, 20px);
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: var(--hero-ink, var(--text));
	opacity: 0.5;
	margin-bottom: 5px;
}
#ml-center .ml-hero-title {
	display: block;
	font-family: 'Cinzel Decorative', serif;
	font-weight: 400;
	font-size: clamp(16px, 2.8vw, 40px);
	letter-spacing: 0.1em;
	color: var(--hero-ink, var(--text));
	line-height: 1.1;
}

/* ── TOUCH HINT — below center text, touch devices only ── */
#ml-touch-hint {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 300;
	font-size: clamp(7px, 0.65vw, 9px);
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--hero-ink, var(--text));
	pointer-events: none;
	z-index: 20;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.8s ease;
	display: none;
}
#ml-touch-hint.visible { opacity: 0.28; }

/* ── TRAIL WORDS ── */
.ml-word {
	position: fixed;
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
	transform: translate(-50%, -50%);
	text-transform: uppercase;
	line-height: 1;
	z-index: 9000;
}

/* ── MOBILE ── */
@media (max-width: 1024px) {
	.ml-hero {
		left: 0;
		top: 64px;
	}
	.ml-frame-line { display: none; }
	#ml-location {
		font-size: 7px;
		letter-spacing: 0.12em;
	}
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
	.ml-hero,
	#ml-cursor,
	#ml-center,
	#ml-touch-hint { transition: none; }
}