/* ============================================================
   YAL Hero Text — front styles (2026-07-10)
   Scoped under .yal-ht; rendered inside .slideshow_video by
   slideshow.tpl when module_yal_herotext is enabled.
   Variants: --word --chapters --masthead --glass
   Typo voices: --typo-light --typo-caps --typo-mix
   Montserrat-only. Tokens per YAL canon (oklch).
   ============================================================ */
.yal-ht {
	--yht-cream: oklch(98.2% 0.006 75);
	--yht-bone: oklch(94.5% 0.009 72);
	--yht-slate: oklch(42% 0.020 50);
	--yht-ink: oklch(22% 0.022 40);
	--yht-clay: oklch(40% 0.10 28);
	--yht-clay-lt: oklch(78% 0.055 40);
	--yht-ease: cubic-bezier(0.19, 1, 0.22, 1);
	position: absolute;
	left: clamp(20px, 6vw, 96px);
	bottom: clamp(88px, 14vh, 140px);
	max-width: min(88vw, 720px);
	z-index: 10;
	text-align: left;
	text-transform: none;
	line-height: normal;
	color: var(--yht-cream);
	font-family: 'Montserrat', system-ui, sans-serif;
	pointer-events: none;
}
.yal-ht a { pointer-events: auto; }

/* scrim — легка тінь знизу відео для читабельності текстових варіантів */
.yal-ht-scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 5;
	background: linear-gradient(to top, oklch(14% 0.02 40 / 0.62) 0%, oklch(14% 0.02 40 / 0.28) 26%, transparent 55%);
}

/* ---------- eyebrow ---------- */
.yal-ht__eyebrow {
	font-size: clamp(9px, 0.95vw, 11px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	opacity: 0.72;
	margin: 0 0 clamp(18px, 2.6vh, 30px);
}
.yal-ht__eyebrow::before {
	content: '';
	display: inline-block;
	width: 24px;
	height: 1px;
	background: currentColor;
	opacity: 0.55;
	vertical-align: middle;
	margin-right: 12px;
	position: relative;
	top: -1px;
}

/* ---------- headline ---------- */
.yal-ht__h {
	margin: 0;
	color: inherit;
	font-family: inherit;
	font-weight: 300;
	font-size: clamp(30px, 4.8vw, 62px);
	line-height: 1.08;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

/* ---------- живе слово: grid-стек у потоці — базова лінія збігається ---------- */
.yal-ht__swap {
	display: inline-grid;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	transition: width 0.6s var(--yht-ease);
	padding-bottom: 0.16em;
	margin-bottom: -0.16em;
	padding-right: 0.06em;
	margin-right: -0.06em;
}
.yal-ht__swap > span {
	grid-area: 1 / 1;
	white-space: nowrap;
	color: var(--yht-clay-lt);
	filter: blur(0);
	transition: transform 0.6s var(--yht-ease), opacity 0.35s ease, filter 0.35s ease;
}
/* вихід швидший за вхід; blur маскує перекриття двох станів */
.yal-ht__swap > span.out {
	transform: translateY(-125%);
	opacity: 0;
	filter: blur(3px);
	transition-duration: 0.4s, 0.28s, 0.28s;
}
.yal-ht__swap > span.in-start {
	transform: translateY(130%);
	opacity: 0;
	filter: blur(3px);
	transition: none;
}
.yal-ht__swap::after {
	content: '';
	position: absolute;
	left: 1px;
	right: 10px;
	bottom: 1px;
	height: 1px;
	background: oklch(78% 0.055 40 / 0.5);
}
.yal-ht__measure {
	position: absolute;
	visibility: hidden;
	white-space: nowrap;
	pointer-events: none;
}

/* ---------- typo voices ---------- */
.yal-ht--typo-light .yal-ht__h { font-weight: 300; letter-spacing: -0.015em; }
.yal-ht--typo-light .yal-ht__swap > span, .yal-ht--typo-light .yal-ht__measure { font-weight: 500; }

/* couture caps: цифра/фраза — надтонкий великий caps, слово — свій рядок, малий щільний caps */
.yal-ht--typo-caps .yal-ht__h {
	text-transform: uppercase;
	font-weight: 250;
	letter-spacing: 0.055em;
	font-size: clamp(38px, 5.2vw, 80px);
	line-height: 1.06;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.26em;
}
.yal-ht--typo-caps .yal-ht__swap, .yal-ht--typo-caps .yal-ht__measure { font-size: 0.36em; }
.yal-ht--typo-caps .yal-ht__swap > span, .yal-ht--typo-caps .yal-ht__measure { font-weight: 600; letter-spacing: 0.3em; line-height: 1.1; }
.yal-ht--typo-caps .yal-ht__swap::after { display: none; }

.yal-ht--typo-mix .yal-ht__h { font-weight: 200; letter-spacing: -0.005em; }
.yal-ht--typo-mix .yal-ht__swap > span, .yal-ht--typo-mix .yal-ht__measure { font-weight: 600; }

/* masthead/chapters headline не містить swap — але flex column у caps безпечний:
   для C слова заголовка стакуються reveal-спанами в рядку, тому відключаємо колонку */
.yal-ht--masthead.yal-ht--typo-caps .yal-ht__h,
.yal-ht--chapters.yal-ht--typo-caps .yal-ht__h { display: block; }

/* ---------- subtitle ---------- */
.yal-ht__sub {
	font-size: clamp(13px, 1.25vw, 16px);
	font-weight: 400;
	line-height: 1.55;
	opacity: 0.85;
	margin: clamp(12px, 1.8vh, 18px) 0 0;
	max-width: 40ch;
	text-wrap: balance;
}

/* ---------- CTA ---------- */
.yal-ht__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: clamp(20px, 3.2vh, 32px);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--yht-cream);
	text-decoration: none;
	padding: 17px 30px;
	border: 1px solid oklch(98% 0.006 75 / 0.55);
	border-radius: 2px;
	position: relative;
	isolation: isolate;
	cursor: pointer;
	background: transparent;
	max-width: none;
	transition: color 0.45s var(--yht-ease), border-color 0.45s var(--yht-ease), transform 0.16s var(--yht-ease);
}
.yal-ht__cta::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--yht-cream);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.55s var(--yht-ease);
}
.yal-ht__cta:hover { color: var(--yht-ink); border-color: var(--yht-cream); }
.yal-ht__cta:hover::before { transform: scaleX(1); }
.yal-ht__cta:active { transform: scale(0.97); }
.yal-ht__cta .yal-ht__arr { transition: transform 0.45s var(--yht-ease); }
.yal-ht__cta:hover .yal-ht__arr { transform: translateX(4px); }

/* ============ D · glass panel ============ */
.yal-ht--glass { bottom: clamp(64px, 10vh, 104px); }
.yal-ht__panel {
	position: relative;
	pointer-events: auto;
	background: oklch(98.2% 0.006 75 / var(--yht-glass-op, 0.62));
	-webkit-backdrop-filter: blur(var(--yht-glass-blur, 26px)) saturate(1.05);
	backdrop-filter: blur(var(--yht-glass-blur, 26px)) saturate(1.05);
	border: 1px solid oklch(98% 0.006 75 / 0.5);
	border-radius: 0;
	padding: clamp(26px, 3.4vw, 42px) clamp(26px, 3.8vw, 52px) clamp(28px, 3.6vw, 46px);
	box-shadow: 0 24px 60px oklch(14% 0.02 35 / 0.25);
}
/* верхній світловий кант — фізика скла */
.yal-ht__panel::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: oklch(100% 0 0 / 0.55);
}
.yal-ht--glass .yal-ht__eyebrow { color: var(--yht-slate); opacity: 1; }
.yal-ht--glass .yal-ht__h { color: var(--yht-ink); }
.yal-ht--glass .yal-ht__sub { color: var(--yht-slate); opacity: 1; }
.yal-ht--glass .yal-ht__swap > span { color: var(--yht-clay); }
.yal-ht--glass .yal-ht__swap::after { background: oklch(40% 0.10 28 / 0.4); }
.yal-ht--glass .yal-ht__cta { color: var(--yht-ink); border-color: oklch(22% 0.022 40 / 0.45); }
.yal-ht--glass .yal-ht__cta::before { background: var(--yht-ink); }
.yal-ht--glass .yal-ht__cta:hover { color: var(--yht-cream); border-color: var(--yht-ink); }

/* ============ B · chapters ============ */
.yal-ht__dots {
	position: absolute;
	right: clamp(16px, 3vw, 44px);
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 14px;
	z-index: 11;
}
.yal-ht__dots button {
	width: 6px;
	height: 6px;
	border-radius: 99px;
	border: 0;
	cursor: pointer;
	padding: 0;
	pointer-events: auto;
	background: oklch(98% 0.006 75 / 0.45);
	transition: height 0.45s var(--yht-ease), background 0.3s ease;
}
.yal-ht__dots button.on { height: 26px; background: var(--yht-cream); }
.yal-ht__dots button:hover { background: var(--yht-cream); }
.yal-ht__body { transition: opacity 0.3s ease, transform 0.3s var(--yht-ease); }
.yal-ht__body.fade { opacity: 0; transform: translateY(10px); }

/* ============ C · masthead reveal ============ */
.yal-ht--masthead .yal-ht__w { display: inline-block; overflow: hidden; vertical-align: text-bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.yal-ht--masthead .yal-ht__w > span { display: inline-block; transform: translateY(115%); opacity: 0; }
.yal-ht--masthead.play .yal-ht__w > span {
	transform: translateY(0);
	opacity: 1;
	transition: transform 0.9s var(--yht-ease) var(--d, 0.15s), opacity 0.6s ease var(--d, 0.15s);
}
.yal-ht--masthead .yal-ht__rule {
	width: min(72px, 10vw);
	height: 1px;
	background: oklch(98% 0.006 75 / 0.7);
	margin-top: clamp(18px, 2.6vh, 26px);
	transform: scaleX(0);
	transform-origin: left center;
}
.yal-ht--masthead.play .yal-ht__rule { transform: scaleX(1); transition: transform 1s var(--yht-ease) 0.75s; }
.yal-ht--masthead .yal-ht__sub, .yal-ht--masthead .yal-ht__cta { opacity: 0; transform: translateY(14px); }
.yal-ht--masthead.play .yal-ht__sub { opacity: 0.85; transform: none; transition: opacity 0.8s ease 0.95s, transform 0.8s var(--yht-ease) 0.95s; }
.yal-ht--masthead.play .yal-ht__cta {
	opacity: 1;
	transform: none;
	transition: opacity 0.8s ease 1.15s, transform 0.8s var(--yht-ease) 1.15s,
		color 0.45s var(--yht-ease), border-color 0.45s var(--yht-ease);
}
.yal-ht--masthead .yal-ht__eyebrow { opacity: 0; }
.yal-ht--masthead.play .yal-ht__eyebrow { opacity: 0.72; transition: opacity 0.8s ease 0.1s; }

/* ============ mobile ============
   Три режими керуються класом yal-ht--m-{compact|full|bare} (адмінка → Mobile layout).
   compact = дефолт: щільна плашка знизу, sub прихований, менший кегль → відео дихає.
   full    = картка як на десктопі (для тих, хто хоче більше тексту).
   bare    = без плашки: текст світлий над градієнтним scrim, відео повністю видно. */
@media (max-width: 640px) {
	.yal-ht { left: 20px; right: 20px; bottom: 80px; max-width: none; }
	.yal-ht__h { font-size: clamp(28px, 8vw, 38px); }
	.yal-ht--typo-caps .yal-ht__h { font-size: clamp(30px, 9vw, 40px); }
	.yal-ht__dots { right: 14px; }

	/* glass — full-bleed до країв екрана */
	.yal-ht--glass { left: 0; right: 0; }
	.yal-ht--glass .yal-ht__panel { border-left: 0; border-right: 0; }

	/* ---- COMPACT (дефолт) ---- */
	.yal-ht--m-compact.yal-ht--glass { bottom: 0; }
	.yal-ht--m-compact.yal-ht--glass .yal-ht__panel { padding: 18px 20px 22px; }
	.yal-ht--m-compact .yal-ht__eyebrow { margin-bottom: 11px; letter-spacing: 0.26em; }
	.yal-ht--m-compact.yal-ht--typo-caps .yal-ht__h { font-size: clamp(27px, 8.2vw, 34px); gap: 0.16em; }
	.yal-ht--m-compact .yal-ht__sub { display: none; }
	.yal-ht--m-compact .yal-ht__cta { margin-top: 15px; padding: 13px 22px; }

	/* ---- FULL (як десктоп) ---- */
	.yal-ht--m-full.yal-ht--glass { bottom: 44px; }
	.yal-ht--m-full.yal-ht--glass .yal-ht__panel { padding: 26px 20px 30px; }

	/* ---- BARE (текст над відео, без плашки) ---- */
	.yal-ht--m-bare.yal-ht--glass { left: 20px; right: 20px; bottom: 72px; }
	.yal-ht--m-bare.yal-ht--glass::before {
		content: ''; position: absolute; left: -20px; right: -20px; bottom: -72px;
		height: calc(100% + 190px); z-index: 0; pointer-events: none;
		background: linear-gradient(to top, oklch(14% 0.02 40 / 0.66) 0%, oklch(14% 0.02 40 / 0.24) 52%, transparent 100%);
	}
	.yal-ht--m-bare.yal-ht--glass .yal-ht__panel {
		position: relative; z-index: 1;
		background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
		border: 0; box-shadow: none; padding: 0;
	}
	.yal-ht--m-bare.yal-ht--glass .yal-ht__panel::before { display: none; } /* світловий кант зайвий без скла */
	.yal-ht--m-bare.yal-ht--glass .yal-ht__eyebrow { color: var(--yht-cream); opacity: 0.82; }
	.yal-ht--m-bare.yal-ht--glass .yal-ht__h { color: var(--yht-cream); text-shadow: 0 1px 26px oklch(14% 0.02 40 / 0.4); }
	.yal-ht--m-bare.yal-ht--glass .yal-ht__swap > span { color: var(--yht-clay-lt); }
	.yal-ht--m-bare.yal-ht--glass .yal-ht__swap::after { background: oklch(78% 0.055 40 / 0.5); }
	.yal-ht--m-bare.yal-ht--glass .yal-ht__sub { display: none; }
	.yal-ht--m-bare.yal-ht--glass .yal-ht__cta { color: var(--yht-cream); border-color: oklch(98% 0.006 75 / 0.55); }
	.yal-ht--m-bare.yal-ht--glass .yal-ht__cta::before { background: var(--yht-cream); }
	.yal-ht--m-bare.yal-ht--glass .yal-ht__cta:hover { color: var(--yht-ink); border-color: var(--yht-cream); }
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
	.yal-ht *, .yal-ht__swap, .yal-ht__swap > span { transition: none !important; }
	.yal-ht--masthead .yal-ht__w > span, .yal-ht--masthead .yal-ht__sub,
	.yal-ht--masthead .yal-ht__cta, .yal-ht--masthead .yal-ht__eyebrow,
	.yal-ht--masthead .yal-ht__rule { opacity: 1 !important; transform: none !important; }
}