/*
 * Плитки в шапці головної як навігація: лінія від плитки до картки з
 * посиланням.
 *
 * Окремий файл і окремий скрипт — не з любові до порядку, а щоб це можна було
 * прибрати одним рухом: у wp-config.php оголосити SOFTEXTHEME_HERO_NAV як
 * false, і шапка стає точно такою, якою була. Тому тут немає жодного правила,
 * яке щось міняє в самих плитках у спокої: усе нове висить на класах, яких
 * без цього скрипта на сторінці не буває.
 *
 * Геометрію — де стане картка і як до неї піде лінія — рахує hero-nav.js.
 * Тут лише вигляд.
 */

/* Обгортка малюнка стає системою координат для лінії й картки. */
.sx-hero__visual {
	position: relative;
}

/* Плитка стає кнопкою. Курсор і фокус — єдине, що додається до спокійного
   стану; підйом на наведення в неї вже свій, із home-effects.css. */
.sx-hero__tile[ data-sx-nav ] {
	cursor: pointer;
}

/*
 * Рамка фокуса — тільки для клавіатури, і визначає це скрипт, а не браузер.
 *
 * Рамку малювало загальне правило теми для [tabindex]:focus-visible, і на
 * плитці воно спрацьовувало навіть після звичайного кліку мишею: плитка — це
 * група в SVG, не поле й не кнопка, і браузер вважає її фокус «видимим».
 * Виходило, що клацнувши по плитці, людина діставала чорну рамку навколо неї —
 * ні до чого при живому курсорі.
 *
 * Тому спершу глушимо те правило (воно в :where і не має ваги зовсім), а тоді
 * повертаємо рамку під класом is-keyed, який скрипт вішає лише на Tab.
 */
.sx-hero__tile[ data-sx-nav ]:focus,
.sx-hero__tile[ data-sx-nav ]:focus-visible {
	outline: none;
}

/* Обидва псевдокласи навмисно: який із них браузер вирішить застосувати до
   групи в SVG — його справа, а вирішує тут is-keyed. */
.sx-hero__tiles.is-keyed .sx-hero__tile[ data-sx-nav ]:focus,
.sx-hero__tiles.is-keyed .sx-hero__tile[ data-sx-nav ]:focus-visible {
	outline: 2px solid var( --sx-text );
	outline-offset: 4px;
	border-radius: 4px;
}

/*
 * Обрана плитка тримається піднятою, поки відкрита картка.
 *
 * Підйом менший за той, що дає наведення: наведення триває мить, а цей стан
 * стоїть, і на 6px він би читався як збій розкладки.
 */
.sx-hero__tile.is-picked {
	transform: translateY( -5px ) scale( 1.025 );
	opacity: 1 !important;
	/*
	 * Підйом миттєвий — переходу тут немає навмисно.
	 *
	 * Лінія кріпиться до краю плитки, і точку кріплення скрипт знімає одразу
	 * після кліку. Поки плитка їхала вгору свої 300ms, у цей момент вона була
	 * ще внизу — а коли зупинялась, розрахунок уже не збігався: лінія
	 * перестрибувала, а іноді й виходила з іншого краю. Плитка підскакує на
	 * п'ять пікселів за один кадр, решта руху лишається лінії. Опускається
	 * вона, як і раніше, плавно — базове правило повертається разом із класом.
	 */
	transition: opacity var( --sx-transition-base ) var( --sx-ease );
}

/* Поки картка відкрита, решта плиток відступає на другий план — трохи глибше
   за наведення, яке глушить їх до 0.7. */
.sx-hero__tiles.is-open .sx-hero__tile {
	opacity: 0.45;
}

.sx-hero__tiles.is-open .sx-hero__tile.is-picked {
	opacity: 1 !important;
}

/*
 * Дихання спиняється, поки плитка обрана.
 *
 * Не заради спокою: лінія кріпиться до краю плитки, і поки плитка пливе, точка
 * кріплення пливе разом із нею — лінія відривається від плитки й тягнеться за
 * повітрям.
 */
.sx-hero__tile.is-picked .sx-hero__tile-float {
	animation-play-state: paused;
}

/* ---- знак, що плитка натискається ----
 *
 * Плитка не схожа на кнопку, і поки на неї не навели мишею, ніщо про це не
 * каже — а на телефоні наводити нічим. Крапка з колом, що розходиться, —
 * звичний знак гарячої точки.
 */

.sx-hero__hint {
	transition: opacity 0.45s ease;
}

.sx-hero__hint-dot {
	fill: rgba( 255, 255, 255, 0.92 );
}

.sx-hero__hint-ring {
	fill: none;
	stroke: rgba( 255, 255, 255, 0.9 );
	stroke-width: 1.4;
	transform-box: fill-box;
	transform-origin: center;
	animation: sx-hint-pulse 2.6s cubic-bezier( .4, 0, .2, 1 ) infinite;
	/* Та сама черга, що й у дихання плиток, тільки швидша: разом вони
	   блимали б, по черзі — малюнок дихає. */
	animation-delay: calc( var( --sx-tile-i, 0 ) * 0.42s );
}

@keyframes sx-hint-pulse {
	0% { transform: scale( 0.5 ); opacity: 0; }
	18% { opacity: 0.95; }
	70%, 100% { transform: scale( 2.8 ); opacity: 0; }
}

/*
 * Запрошення знімається з тієї плитки, яку вже відкривали, — і тільки з неї.
 *
 * Спершу воно гасло на всіх одразу після першого ж кліку, і решта чотирьох
 * ставали такими самими німими, якими були до того: людина знає про одну
 * плитку й не здогадується про інші. Тепер крапка гасне рівно там, де вже
 * побували. І на відкритій — бо там уже є лінія й картка.
 */
.sx-hero__tile.is-seen .sx-hero__hint,
.sx-hero__tile.is-picked .sx-hero__hint {
	opacity: 0;
}

/* ---- лінія ---- */

/* Полотно лежить над малюнком і пропускає кліки крізь себе. overflow: visible
   тому, що картка буває поза межами малюнка — над ним або під ним. */
.sx-hero-wire {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	z-index: 2;
}

.sx-hero-wire path {
	fill: none;
	stroke: var( --sx-brand );
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sx-hero-wire circle {
	fill: var( --sx-brand );
	transition: opacity 0.2s ease, transform 0.2s ease;
	transform-box: fill-box;
	transform-origin: center;
}

.sx-hero-wire .sx-hero-wire__end {
	opacity: 0;
	transform: scale( 0.4 );
}

.sx-hero-wire.is-linked .sx-hero-wire__end {
	opacity: 1;
	transform: scale( 1 );
}

/* Точка початку теж ховається, поки лінії немає: інакше вона лежить у нуля
   координат полотна — у лівому верхньому куті малюнка — і читається як
   загублена крапка збоку від плиток. */
.sx-hero-wire .sx-hero-wire__start {
	opacity: 0;
}

.sx-hero-wire.is-live .sx-hero-wire__start {
	opacity: 1;
}

/* Одноразовий імпульс уздовж лінії; веде його скрипт. */
.sx-hero-wire .sx-hero-wire__pulse {
	opacity: 0;
}

/* ---- картка ---- */

.sx-hero-tip {
	position: absolute;
	z-index: 3;
	width: 210px;
	padding: 12px 14px;
	border: 1px solid var( --sx-border );
	border-radius: 14px;
	background: var( --sx-white );
	/* Тінь зміщена вниз і не надто розмита: з розмиттям у 40px вона діставала
	   на 26px вище картки й сірою плямою лягала на рядок тексту над нею — з
	   вигляду наче рядок обрізали. */
	box-shadow: 0 10px 24px rgba( 20, 25, 35, 0.14 );
	color: inherit;
	text-decoration: none;
	opacity: 0;
	transform: translateY( 6px ) scale( 0.98 );
	/*
	 * visibility, а не сама лише прозорість.
	 *
	 * Картка — справжнє посилання. Невидиме, але лишене в потоці, воно
	 * ловило б фокус із клавіатури: Tab зупинявся б посеред шапки ні на чому.
	 * visibility забирає його з черги фокуса, а нульова затримка на появу й
	 * повна на зникання лишають згасання видимим.
	 */
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.27s cubic-bezier( .4, 0, .2, 1 ),
		transform 0.27s cubic-bezier( .4, 0, .2, 1 ),
		visibility 0s linear 0.27s;
}

.sx-hero-tip.is-shown {
	opacity: 1;
	transform: none;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.27s cubic-bezier( .4, 0, .2, 1 ),
		transform 0.27s cubic-bezier( .4, 0, .2, 1 ),
		visibility 0s;
}

.sx-hero-tip__row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sx-hero-tip__icon {
	display: flex;
	flex: 0 0 auto;
	color: var( --sx-brand-text );
}

.sx-hero-tip__icon svg {
	width: 17px;
	height: 17px;
}

.sx-hero-tip__title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.sx-hero-tip__arrow {
	flex: 0 0 auto;
	color: var( --sx-brand-text );
	font-size: 1rem;
	line-height: 1;
	transition: transform 0.2s var( --sx-ease );
}

.sx-hero-tip:hover .sx-hero-tip__arrow {
	transform: translateX( 3px );
}

.sx-hero-tip__text {
	/* block, бо на рядковому елементі відступ діє лише на перший рядок — опис
	   не ставав під заголовок, а починався від краю картки. */
	display: block;
	margin: 5px 0 0;
	padding-inline-start: 25px;
	color: var( --sx-text-secondary );
	font-size: 0.8125rem;
	line-height: 1.4;
}

/*
 * На телефоні картка ширша, а не вужча.
 *
 * Причина не в смаку: між абзацом і плитками лишається близько 68px, а картка
 * на 210px має 88 — назва переноситься в два рядки. Ширші 280px тримають її в
 * один, картка стає на 20px нижчою й уміщається в цю смугу цілком.
 */
@media ( max-width: 560px ) {
	.sx-hero-tip {
		width: min( 280px, calc( 100vw - 32px ) );
		/* Ще шість пікселів висоти. Смуга над плитками — 73px, і з 72 картка
		   вміщалася в неї рівно настільки, щоб не лишилося просвіту ні згори,
		   ні знизу. */
		padding: 10px 14px;
	}

	.sx-hero-tip__text {
		margin-top: 4px;
		line-height: 1.35;
	}
}

/*
 * Менше руху: усе те саме, але без креслення, без підйому й без пульсації —
 * стан з'являється одразу.
 */
@media ( prefers-reduced-motion: reduce ) {
	.sx-hero-tip {
		transition: none;
	}

	.sx-hero-wire circle {
		transition: none;
	}

	.sx-hero__tile.is-picked {
		transform: none;
	}

	/* Знак лишається, рух — ні: нерухоме кільце так само каже «сюди». */
	.sx-hero__hint-ring {
		animation: none;
		opacity: 0.55;
		transform: none;
	}
}