/* ===========================================================================
   Mode: FOCUS — text-forward; the illustration recedes until you ask for it
   =========================================================================== */

body.m-focus { overflow: hidden; }

.focus {
	position: fixed;
	inset: 0;
	overflow: hidden;
	cursor: default;
}

.focus__img {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-position: center;
	background-size: cover;
	transform: scale(1.06);
	filter: brightness(0.34) saturate(0.9) blur(7px);
	transition: filter 0.9s var(--ease), transform 1.2s var(--ease);
}
.focus.study .focus__img {
	transform: scale(1);
	filter: brightness(1) saturate(1.04) blur(0);
}

/* Vignette + text scrim */
.focus__scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: radial-gradient(70% 60% at 50% 48%, rgba(6,10,16,0.55), rgba(6,10,16,0.15) 70%, transparent);
	opacity: 1;
	transition: opacity 0.7s var(--ease);
}
.focus.study .focus__scrim { opacity: 0; }

/* Text */
.focus__text {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(48px, 9vw, 120px) clamp(24px, 6vw, 80px);
	overflow-y: auto;
	transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.focus.study .focus__text {
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
}
.focus__inner {
	max-width: 40ch;
	text-align: center;
	font-size: clamp(1.2rem, 0.9rem + 1.15vw, 1.85rem);
	line-height: 1.6;
	text-wrap: pretty;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}
.focus__inner p { margin: 0; }

/* Bottom controls */
.focus__bar {
	position: absolute;
	left: 0; right: 0;
	bottom: max(22px, env(safe-area-inset-bottom));
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	transition: opacity 0.4s var(--ease);
}
.focus.is-idle .focus__bar { opacity: 0; }

.focus__toggle {
	font-family: var(--display);
	font-size: 1.02rem;
	letter-spacing: 0.06em;
	color: var(--ink);
	background: var(--panel);
	border: 1px solid var(--panel-line);
	border-radius: 999px;
	padding: 9px 20px;
	cursor: pointer;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: background 0.2s;
}
.focus__toggle:hover { background: rgba(20, 40, 55, 0.6); }
.focus__toggle .on  { display: none; }
.focus.study .focus__toggle .on  { display: inline; }
.focus.study .focus__toggle .off { display: none; }

.focus__count {
	position: absolute;
	left: max(20px, env(safe-area-inset-left));
	bottom: max(24px, env(safe-area-inset-bottom));
	z-index: 6;
	font-family: var(--display);
	font-size: 1rem;
	letter-spacing: 0.08em;
	color: var(--ink);
	text-shadow: 0 1px 10px rgba(0,0,0,0.6);
	transition: opacity 0.4s var(--ease);
}
.focus.is-idle .focus__count { opacity: 0; }
.focus__count .sep { opacity: 0.45; margin: 0 0.2em; }

/* Home */
.focus__home {
	position: absolute;
	top: max(64px, calc(env(safe-area-inset-top) + 56px));
	left: max(18px, env(safe-area-inset-left));
	z-index: 6;
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	color: var(--ink);
	background: var(--panel);
	border: 1px solid var(--panel-line);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	text-decoration: none;
	transition: opacity 0.4s var(--ease), background 0.2s;
}
.focus.is-idle .focus__home { opacity: 0; }
.focus__home:hover { background: rgba(20, 40, 55, 0.6); }

/* Edge navigation */
.fnav {
	position: absolute;
	top: 0; bottom: 0;
	width: 10%;
	min-width: 54px;
	z-index: 5;
	display: flex;
	align-items: center;
	color: var(--ink);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
.fnav--prev { left: 0; justify-content: flex-start; padding-left: clamp(10px, 2.5vw, 26px); }
.fnav--next { right: 0; justify-content: flex-end;  padding-right: clamp(10px, 2.5vw, 26px); }
.fnav span {
	font-family: var(--display);
	font-size: clamp(30px, 4vw, 46px);
	line-height: 1;
	opacity: 0.28;
	text-shadow: 0 2px 16px rgba(0,0,0,0.6);
	transition: opacity 0.3s var(--ease);
}
.fnav:hover span { opacity: 0.85; }
.focus.is-idle .fnav span { opacity: 0; }

/* Progress */
.focus__tide {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	z-index: 6;
	background: rgba(255,255,255,0.08);
}
.focus__tide::after {
	content: "";
	display: block;
	height: 100%;
	width: calc(var(--progress, 0) * 100%);
	background: linear-gradient(to right, var(--sea), var(--sea-light));
}

@media (max-width: 560px) {
	.focus__inner { font-size: 1.24rem; }
	.fnav span { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
	.focus__img { transition: filter 0.2s ease, transform 0.2s ease; }
}