/*
 * Front Page — «Письменный стол поэта»
 * Стили главной страницы сайта.
 * Подключаются только на странице, использующей front-page.php.
 */

/* гарантируем предсказуемые размеры независимо от темы */
.poet-desk-page .desk,
.poet-desk-page .desk *,
.poet-desk-page .desk *::before,
.poet-desk-page .desk *::after {
	box-sizing: border-box;
}

.poet-desk-page {
	--paper:     #f3edde; /* тёплая слоновая кость */
	--card:      #fbf7ec; /* «бумага» предметов */
	--ink:       #2b2620; /* чернила */
	--ink-soft:  #5f584c;
	--pencil:    #8a8172;
	--accent:    #9a3b1e; /* красный карандаш редактора */
	--ring:      #a06a3c; /* кофейное кольцо */

	margin: 0;
	overflow-x: hidden;
	font-family: 'Neucha', Georgia, serif;
	color: var(--ink);

	/* бумага: виньетка + призрачные ноты + нотная линейка + волокно */
	background-color: var(--paper);
	background-image:
		radial-gradient(120% 90% at 50% 20%, rgba(0,0,0,0) 60%, rgba(96, 78, 52, 0.09) 100%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%234a4237' stroke-width='2' stroke-linecap='round' opacity='.08'%3E%3Cg transform='rotate(-8 60 70)'%3E%3Cellipse cx='54' cy='86' rx='7' ry='5' transform='rotate(-14 54 86)'/%3E%3Cpath d='M60.5 84 L60.5 46'/%3E%3Cpath d='M60.5 46 C69 49 73 57 70 65'/%3E%3C/g%3E%3Cg transform='rotate(6 170 150)'%3E%3Cpath d='M156 128 L156 160 M180 122 L180 154 M156 128 L180 122 L180 128 L156 134 Z'/%3E%3Cellipse cx='154' cy='162' rx='7' ry='5' transform='rotate(-14 154 162)'/%3E%3Cellipse cx='178' cy='156' rx='7' ry='5' transform='rotate(-14 178 156)'/%3E%3C/g%3E%3Cg transform='rotate(14 100 200)'%3E%3Cellipse cx='96' cy='206' rx='6.5' ry='4.6' transform='rotate(-14 96 206)'/%3E%3Cpath d='M102 204 L102 170'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
		repeating-linear-gradient(to bottom,
			transparent 0, transparent 9px,   rgba(63,56,45,0.085) 9px,   rgba(63,56,45,0.085) 10px,
			transparent 10px, transparent 19px, rgba(63,56,45,0.085) 19px, rgba(63,56,45,0.085) 20px,
			transparent 20px, transparent 29px, rgba(63,56,45,0.085) 29px, rgba(63,56,45,0.085) 30px,
			transparent 30px, transparent 39px, rgba(63,56,45,0.085) 39px, rgba(63,56,45,0.085) 40px,
			transparent 40px, transparent 49px, rgba(63,56,45,0.085) 49px, rgba(63,56,45,0.085) 50px,
			transparent 50px, transparent 104px),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.028'/%3E%3C/svg%3E");
	background-size: auto, 480px 480px, auto, 240px 240px;
}

.poet-desk-page .site-header,
.poet-desk-page .site-footer {
	display: none;
}

.desk {
	position: relative; /* кофейное пятно и абсолюты привязаны к столу, не к окну */
	display: flex;
	flex-direction: column;
	max-width: 1280px;
	min-height: 100vh;
	margin: 0 auto;
	padding: clamp(1.5rem, 4vh, 3rem) clamp(1rem, 4vw, 4rem) clamp(1rem, 2.5vh, 2rem);
}

/* --- Шапка-титул --------------------------------------------- */

.desk-hero {
	text-align: center;
	margin: clamp(0.5rem, 2vh, 1.8rem) 0 clamp(0.75rem, 2vh, 1.6rem);
}

.desk-hero h1 {
	margin: 0;
	font-family: 'Neucha', Georgia, serif;
	font-weight: 400;
	font-style: normal; /* перебиваем курсив из кита Elementor */
	letter-spacing: 0.03em;
	font-size: clamp(2.8rem, 6.5vw, 4.6rem);
	line-height: 1.12;
	color: var(--ink);
}

.desk-motto {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.1rem;
	margin: 0.55rem 0 0;
	font-size: 1.12rem;
	letter-spacing: 0.16em;
	color: var(--pencil);
}
.desk-motto::before,
.desk-motto::after {
	content: '';
	height: 1px;
	width: min(64px, 12vw);
}
.desk-motto::before { background: linear-gradient(90deg, transparent, rgba(93, 83, 66, 0.5)); }
.desk-motto::after  { background: linear-gradient(270deg, transparent, rgba(93, 83, 66, 0.5)); }

/* имя и девиз «проступают» как чернила */
.desk-hero h1,
.desk-motto {
	opacity: 0;
	animation: ink-appear 0.9s ease forwards;
}
.desk-hero h1 { animation-delay: 0.15s; }
.desk-motto   { animation-delay: 0.65s; }

@keyframes ink-appear {
	from { opacity: 0; filter: blur(4px); transform: translateY(5px); }
	to   { opacity: 1; filter: blur(0);   transform: translateY(0); }
}

.flourish {
	display: block;
	width: min(360px, 70%);
	height: auto;
	margin: 0.5rem auto 0;
	overflow: visible;
}

/* --- Предметы: сетка 2×2 по углам, «раскиданные» -------------- */

.desk-items {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	padding: clamp(0.5rem, 2vh, 2rem) clamp(0.5rem, 2.5vw, 3rem);
	position: relative; /* афиша якорится к зоне предметов, не к экрану */
}

.sketch-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.1rem;
	width: 200px;
	margin: 0;
	text-decoration: none;
	transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0deg));
	transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1.15);
}

/* органичный разброс по углам, без наездов подписей */
.sketch-item:nth-of-type(1) { justify-self: start; align-self: start; --dx: 9%;  --dy: 5%;   width: 224px; }
.sketch-item:nth-of-type(2) { justify-self: end;   align-self: start; --dx: -7%; --dy: 9%;   width: 208px; }
.sketch-item:nth-of-type(3) { justify-self: start; align-self: end;   --dx: 12%; --dy: -4%;  width: 214px; }
.sketch-item:nth-of-type(4) { justify-self: end;   align-self: end;   --dx: -10%; --dy: -6%; width: 220px; }

/* невысокие экраны (ноутбуки): компактнее титул и предметы */
@media (max-height: 840px) and (min-width: 1025px) {
	.desk-hero { margin: 0.4rem 0 0.5rem; }
	.desk-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
	.desk-motto { font-size: 1rem; margin-top: 0.3rem; }
	.flourish { margin-top: 0.25rem; }
	.desk-items { padding-top: 0.25rem; padding-bottom: 0.25rem; }
	.sketch-item:nth-of-type(1),
	.sketch-item:nth-of-type(2),
	.sketch-item:nth-of-type(3),
	.sketch-item:nth-of-type(4) { width: 178px; }
	.item-title { font-size: 1.25rem; }
	.desk-footer { margin-top: 0.6rem; }
	.desk-photo { width: 198px; }
}

.sketch-item:hover,
.sketch-item:focus-visible {
	transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0deg)) translateY(-8px) scale(1.045);
	z-index: 5;
}

.sketch-item:focus-visible {
	outline: 2px dashed var(--accent);
	outline-offset: 10px;
	border-radius: 8px;
}

/* тень «бумаги» — сразу, усиливается при наведении */
.sketch-item svg {
	width: 100%;
	height: auto;
	overflow: visible;
	filter: drop-shadow(4px 9px 14px rgba(58, 48, 34, 0.18));
	transition: filter 0.4s ease;
}
.sketch-item:hover svg,
.sketch-item:focus-visible svg {
	filter: drop-shadow(7px 16px 26px rgba(58, 48, 34, 0.30));
}

/* чернила: до старта штрихи скрыты (dasharray больше длины любой линии) */
.ink {
	fill: none;
	stroke: var(--ink);
	stroke-width: var(--w, 2.1);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 640 640;
	stroke-dashoffset: 640;
	transition: stroke 0.35s ease, stroke-width 0.35s ease;
}
.ink.thin {
	--w: 1.35;
	stroke: var(--ink-soft);
}

/* «бумага» предметов лежит на столе с самого начала */
.ink-fill       { fill-opacity: 1; }
.ink-fill.paper { fill: var(--card); }
.ink-fill.dark  { fill: var(--ink); fill-opacity: 0; transition: fill-opacity 0.8s ease; }
.inked .ink-fill.dark { fill-opacity: 0.92; }

/* наведение — «нажим пера» */
.sketch-item:hover .ink,
.sketch-item:focus-visible .ink {
	stroke: #201b15;
	stroke-width: calc(var(--w, 2.1) * 1.22);
}

.item-title {
	font-family: 'Neucha', Georgia, serif;
	font-size: 1.4rem;
	letter-spacing: 0.05em;
	color: #57503f;
	padding-bottom: 2px;
	background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat;
	transition: color 0.3s ease, background-size 0.35s ease;
}
.sketch-item:hover .item-title,
.sketch-item:focus-visible .item-title {
	color: var(--ink);
	background-size: 100% 2px;
}

/* --- Фото на столе (центр, между предметами) ------------------ */

.desk-photo {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 259px;
	margin: 0;
	padding: 7px; /* фотоснимок с полем снизу */
	background: var(--card);
	box-shadow: 4px 10px 18px rgba(58, 48, 34, 0.22), inset 0 0 0 1px rgba(58, 48, 34, 0.06);
	transform: translate(-50%, -50%) rotate(-3deg);
	opacity: 0;
	animation: desk-photo-in 0.9s ease 1.1s both;
	transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1.15), box-shadow 0.4s ease;
}
.desk-photo:hover {
	transform: translate(-50%, -50%) rotate(-1deg) translateY(-5px);
	box-shadow: 6px 14px 24px rgba(58, 48, 34, 0.3), inset 0 0 0 1px rgba(58, 48, 34, 0.06);
	z-index: 5;
}
.desk-photo img {
	display: block;
	width: 100%;
	height: auto;
	filter: grayscale(0.9) sepia(0.18) contrast(1.04);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0);
	transition: clip-path 0.35s ease;
}
.desk-photo:hover img {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 32px 100%, 0 calc(100% - 32px));
}

/* кофейное пятно на бумаге (правый верхний угол) */
.coffee-stain {
	position: absolute;
	top: 2.5%;
	right: 0;
	width: 175px;
	mix-blend-mode: multiply;
	opacity: 0;
	transition: opacity 1.6s ease;
}
.coffee-stain img {
	display: block;
	width: 100%;
	height: auto;
}
.coffee-stain.is-shown { opacity: 0.62; }
.desk-photo .fold {
	position: absolute;
	left: 7px;
	bottom: 7px;
	width: 32px;
	height: 32px;
	background: linear-gradient(225deg, #d8caa7 0%, #ece1c8 35%, #f4ecd9 100%);
	clip-path: polygon(0 100%, 100% 100%, 0 0);
	transform: scale(0);
	transform-origin: 0 100%;
	transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.3, 1.2);
}
.desk-photo:hover .fold { transform: scale(1); }
.desk-photo figcaption {
	margin-top: 0.3rem;
	text-align: center;
	font-family: 'Neucha', Georgia, serif;
	font-style: normal; /* reset.css темы курсивит figcaption */
	font-size: 1.4rem;
	letter-spacing: 0.05em;
	color: #57503f;
	padding-bottom: 2px;
	background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat;
	transition: color 0.3s ease, background-size 0.35s ease;
}
.desk-photo:hover figcaption {
	color: var(--ink);
	background-size: 100% 2px;
}
.desk-photo-frame {
	position: absolute;
	top: 7px;
	left: 7px;
	right: 7px;
	bottom: 7px;
	width: calc(100% - 14px);
	height: calc(100% - 14px);
	pointer-events: none;
}

@keyframes desk-photo-in {
	from { opacity: 0; transform: translate(-50%, -48%) rotate(-3deg); }
	to   { opacity: 1; transform: translate(-50%, -50%) rotate(-3deg); }
}

/* --- Мелочь на столе ------------------------------------------ */

.coffee-ring {
	position: absolute;
	top: 4.5%;
	right: 6%;
	width: 116px;
	height: auto;
	overflow: visible;
	opacity: 0.46;
}
.coffee-ring .ink { stroke: var(--ring); stroke-width: 3; }

.desk-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	margin-top: clamp(0.75rem, 2.5vh, 1.8rem);
	font-size: 1.02rem;
	color: #7c7466;
	opacity: 0;
	animation: ink-appear 1s ease 2.4s forwards;
}
.desk-footer::before,
.desk-footer::after {
	content: '';
	height: 1px;
	width: min(84px, 14vw);
	background: rgba(93, 83, 66, 0.35);
}
.desk-footer .dot { color: var(--accent); }

/* --- Смайлики-«ноты» ------------------------------------------
   Весёлый и грустный нарисованы тем же призрачным штрихом, что
   и ноты фона (#4a4237, лёгкая прозрачность), и «сидят» на
   линейках нотного стана, как две ноты в тетради. Линейка фона:
   период 104px, первая линия системы на 9-м px периода. */
.desk-smileys {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}
.desk-smiley {
	position: absolute;
	width: 58px;
	height: 58px;
	overflow: visible;
	opacity: 0;
	animation: smiley-appear 1.6s ease 3s forwards;
}
.desk-smiley path,
.desk-smiley ellipse {
	fill: none;
	stroke: #4a4237;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.desk-smiley .thin { stroke-width: 1.6; opacity: 0.8; }
/* весёлый — верхняя система слева, «голова» на линейке */
.desk-smiley.happy { top: calc(2 * 104px + 4px); left: calc(7% - 30px); transform: rotate(-8deg); }
/* грустный — нижняя система справа */
.desk-smiley.sad   { top: calc(4 * 104px + 30px); right: calc(8% - 30px); transform: rotate(6deg); }
/* удивлённый — вторая система справа (кружок-рот) */
.desk-smiley.surprised { top: calc(1 * 104px + 18px); right: 9%; transform: rotate(-5deg); }
/* думающий — пятая система слева (рука у подбородка) */
.desk-smiley.thinking  { top: calc(5 * 104px + 22px); left: 8%; transform: rotate(4deg); }
@keyframes smiley-appear {
	from { opacity: 0; filter: blur(2px); }
	to   { opacity: 0.14; filter: blur(0); }
}

/* мобильная версия: там предметы в столбик, смайлики не нужны */
@media (max-width: 1024px) {
	.desk-smileys { display: none; }
}

/* --- Доступность и мобильные ---------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.poet-desk-page *,
	.poet-desk-page *::before,
	.poet-desk-page *::after {
		animation: none !important;
		transition: none !important;
	}
	.desk-hero h1, .desk-motto, .desk-footer, .desk-photo { opacity: 1; }
	.coffee-stain { opacity: 0.62; }
}

@media (max-width: 1024px) {
	.desk {
		min-height: 100vh;
		padding-top: 3.2rem;
	}
	.desk-items {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3.2rem;
		padding: 0;
	}
	.sketch-item {
		position: static;
		align-self: auto;
		width: 172px;
		--dx: 0;
		--dy: 0;
	}
	.sketch-item:nth-of-type(1),
	.sketch-item:nth-of-type(2),
	.sketch-item:nth-of-type(3),
	.sketch-item:nth-of-type(4) {
		justify-self: auto;
		align-self: auto;
		--dx: 0;
		--dy: 0;
	}
	/* афиша — разделитель между титулом и предметами (переопределяется ниже) */
	.desk-photo {
		position: static;
		transform: rotate(-3deg);
		width: 231px;
		margin: -0.4rem auto 2.6rem;
		order: -1;
	}
	@keyframes desk-photo-in {
		from { opacity: 0; transform: rotate(-3deg) translateY(6px); }
		to   { opacity: 1; transform: rotate(-3deg) translateY(0); }
	}
	.coffee-ring {
		top: 1.2rem;
		right: 1rem;
		width: 78px;
		opacity: 0.26;
	}
	.coffee-stain {
		top: 1rem;
		right: 1rem;
		width: 112px;
	}
	/* в футере мобильной версии полоски по краям не нужны,
	   и подпись «написано от руки» прячем */
	.desk-footer::before,
	.desk-footer::after { display: none; }
	.desk-footer-hand { display: none; }
	/* футер — по центру, переносом на новую строку при нехватке места */
	.desk-footer {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 0.15rem;
		padding: 0 0.8rem;
		text-align: center;
	}
	/* фото-биография: гарантированно по центру и ниже заголовка,
	   чтобы ни при какой ширине не наезжало на «памяти Юлии Пискуновой» */
	.desk-photo {
		position: static;
		transform: rotate(-3deg);
		width: min(231px, 64vw);
		margin: 1.2rem auto 2.6rem;
		order: -1;
	}
}