/*
 * Generation 22 — Henna gesture system (reusable)
 *
 * Дозована henna-мова поверх строгого studio-скіна: "один жест на
 * секцію". Чотири примітиви, спільні для всього сайту:
 *   1. .g22-marker-word   — маркер-росчерк під словом (JS: henna-gestures.js)
 *   2. .g22-doodle        — дудли на полях (arrow / star / arc)
 *   3. .g22-tilt          — наклон однієї картки/плашки-винятку
 *   4. .g22-bignum        — гігантська цифра
 *
 * Підключається як окремий шар (dep: g22-theme), сторінки додають
 * власну розмітку/конфіг зверху — цей файл нічого не знає про
 * конкретні сторінки.
 */

/* -------------------------------------------------- */
/* 1. Маркер-росчерк                                    */
/* -------------------------------------------------- */

.g22-marker-word {
	position: relative;
	display: inline-block;
	isolation: isolate;
	z-index: 0;
}

.g22-marker-word::after {
	content: "";
	position: absolute;
	left: -0.05em;
	right: -0.05em;
	bottom: -0.08em;
	height: 0.28em;
	background-image: url("../images/brand/doodles/marker-stroke.svg");
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 100% 100%;
	z-index: -1;
	pointer-events: none;
	clip-path: inset(0 100% 0 0);
}

.g22-marker-word.g22-marker-word--drawn::after {
	clip-path: inset(0 0 0 0);
	transition: clip-path 600ms cubic-bezier(0.33, 1, 0.68, 1);
}

@media (prefers-reduced-motion: reduce) {
	.g22-marker-word::after {
		clip-path: inset(0 0 0 0);
		transition: none;
	}
}

/* -------------------------------------------------- */
/* 2. Дудл-набір — "нотатки на полях"                    */
/* -------------------------------------------------- */

.g22-doodle {
	display: inline-block;
	width: 44px;
	height: 44px;
	color: rgba(26, 26, 26, 0.25);
	pointer-events: none;
}

.g22-doodle--yellow {
	color: #ffd141;
}

.g22-doodle--arrow {
	width: 48px;
	height: 48px;
}

.g22-doodle--star {
	width: 36px;
	height: 36px;
}

.g22-doodle--arc {
	width: 44px;
	height: 20px;
}

.g22-doodle svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* -------------------------------------------------- */
/* 3. Наклон — виняток із правил, один елемент на сторінку */
/* -------------------------------------------------- */

.g22-tilt {
	transform: rotate(-2.5deg);
	transform-origin: 30% 50%;
	transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.g22-tilt--right {
	transform: rotate(2deg);
}

.g22-tilt:hover {
	transform: rotate(-0.75deg) translateY(-1px);
}

.g22-tilt--right:hover {
	transform: rotate(0.75deg) translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
	.g22-tilt,
	.g22-tilt--right {
		transition: none;
		transform: none;
	}
}

/* -------------------------------------------------- */
/* 4. Гігантська цифра                                   */
/* -------------------------------------------------- */

.g22-bignum {
	font-family: "Manrope", sans-serif;
	font-weight: 800;
	font-size: clamp(4rem, 10vw, 8rem);
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
	color: #1a1a1a;
}

.g22-bignum--ghost {
	opacity: 0.07;
}