/* ==========================================================================
   Sekce „Co ještě řeším“

   Tichý protějšek sekce Co nabízím. Ta je světlá, vede čtenáře kreslenou
   linkou a ilustrace má vpravo. Tahle je tmavá, nic nevede — jen čtyři
   řádky pod sebou oddělené vlasovou linkou, a ilustrace je zrcadlově
   vlevo. Žádné karty, rámečky ani lepivé stohy: obsah stačí sám.

    1. Sekce
    2. Řádek
    3. Ilustrace — společné
    4. Ilustrace 01 — jeden údaj, tři místa
    5. Ilustrace 02 — připomínka
    6. Ilustrace 03 — podklad k faktuře
    7. Ilustrace 04 — chatbot
    8. Responzivita
    9. Omezený pohyb
   ========================================================================== */

/* 1. Sekce ----------------------------------------------------------------

   Sekce Co nabízím je bílá plocha s mátovým akcentem. Tahle je její
   přesná inverze: skoro černá plocha s týmž mátovým akcentem. Barvu nese
   jen akcent, plocha ne — zelená deska vedle zeleného webu splynula. */

.solve {
	background-color: #0e1113;

	/* Zrcadlo přechodu ze sekce Co nabízím: tam se horní okraj nepatrně
	   zatáhne, tady se stejně nepatrně rozsvítí. */
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 26rem);
	background-repeat: no-repeat;
	color: var(--white);

	/* Barvy kresby. Akcent je světlejší než --accent: na tmavém podkladu
	   by tmavě zelená zmizela. Šedé jsou neutrální, aby plochu netahaly
	   zpátky do zelené. */
	--sv-lit: var(--mint);
	--sv-text: #98a1a5;
	--sv-dim: #717b7f;
}

/*
 * Záhlaví. Sekce Co nabízím má název vycentrovaný a rozsah kroků pod ním;
 * tady stojí název vlevo a rozsah na druhém konci téže linky. Lineálek je
 * ta samá vlasová linka, která pak odděluje řádky — záhlaví a seznam si
 * tak podají ruku.
 */
.solve__head {
	display: flex;
	align-items: baseline;
	gap: clamp(1.25rem, 2.5vw, 2.5rem);
	margin-bottom: clamp(2rem, 4vw, 4rem);
}

.solve__title {
	/* Flex, ne inline — mezi inline-block písmeny by se držela mezera
	   z odřádkování ve zdroji a nadpis by se roztrhal. */
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	font-size: clamp(3rem, 5.2vw, 5rem);
	color: var(--white);
}

.solve__rule {
	flex: 1;
	height: 1px;
	background: rgba(255, 255, 255, 0.14);
	transform-origin: left;
}


/* Nástup má pořadí: nejdřív se poskládají písmena názvu, pak se rozjede
   lineálek a nakonec dosedne rozsah. Celý blok se přitom neposouvá —
   dva pohyby najednou by se praly. */
.js .solve__head.reveal {
	opacity: 1;
	transform: none;
}

.js .solve__rule {
	transform: scaleX(0);
	transition: transform 0.9s var(--ease) 0.35s;
}

.js .solve__head.is-visible .solve__rule {
	transform: none;
}


/* 2. Řádek ---------------------------------------------------------------- */

.qa {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 5vw, 6rem);
	align-items: center;
	padding-block: clamp(3.5rem, 6vw, 6rem);
}

/*
 * Vlasová linka nad řádkem. Je to jediný pohyb, který si sekce dovolí
 * navíc — dokreslí se zleva doprava, jakmile řádek najede.
 */
.qa::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(255, 255, 255, 0.12);
	transform-origin: left;
}

.js .qa::before {
	transform: scaleX(0);
	transition: transform 1.1s var(--ease);
}

.js .qa:nth-of-type(even)::before {
	transform-origin: right;
}

.js .qa.is-visible::before {
	transform: none;
}

/*
 * Řádky se u kresby střídají po stranách. Sekce Co nabízím má ilustraci
 * pořád vpravo; tady se strana obrací, a širší sloupec putuje s ní —
 * kresba potřebuje místo víc než tři řádky textu.
 */
.qa__viz {
	order: -1;
}

.qa:nth-of-type(even) {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}

.qa:nth-of-type(even) .qa__viz {
	order: 1;
}

/* Stejný rejstřík jako číslo kroku v sekci Co nabízím — včetně linky před ním. */
/* Krátké jméno problému. Pořadové číslo tu dřív nic neříkalo. */
.qa__num {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin: 0 0 1.5rem;
	font-family: var(--font-display);
	font-size: 0.875rem;
	line-height: 1;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sv-lit);
}

.qa__rule {
	display: block;
	width: 2rem;
	height: 1px;
	flex: none;
	background: var(--sv-lit);
}

/*
 * Stejné písmo, řez i proklad jako nadpis kroku v sekci Co nabízím, jen
 * o stupeň míň: ta sekce vede, tahle doplňuje. Poměr držím kolem 0.74,
 * ať je rozdíl vidět jako záměr, ne jako náhoda.
 */
.qa__q {
	max-width: 18ch;
	margin: 0 0 1.5rem;
	font-weight: 700;
	font-size: clamp(2.25rem, 3.9vw, 3.5rem);
	line-height: 1.14;
	letter-spacing: -0.02em;
	color: var(--white);
	text-wrap: balance;
}

.qa__a {
	max-width: 28rem;
	margin: 0;
	font-size: clamp(1.125rem, 1.5vw, 1.375rem);
	line-height: 1.58;
	color: #96a0a4;
	text-wrap: pretty;
}

/*
 * Nástup jde do stran, ne odspodu — to dělá sekce nad námi. Kresba se
 * odkrývá setřením od svého okraje (clip-path, ne opacita: výsledek pak
 * vypadá, že se kreslí, ne že zesvětluje) a text přijíždí z protilehlé
 * strany. Maška sedí na obalu, ne na .reveal prvku: oříznutý prvek nemá
 * viditelnou plochu a pozorovatel by ho nikdy neohlásil.
 */
.js .qa__viz {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 1s var(--ease) 0.1s;
}

.js .qa:nth-of-type(even) .qa__viz {
	clip-path: inset(0 0 0 100%);
}

.js .qa.is-visible .qa__viz {
	clip-path: inset(0 0 0 0);
}

.js .qa__num,
.js .qa__q,
.js .qa__a {
	opacity: 0;
	transform: translateX(1.75rem);
	transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}

.js .qa:nth-of-type(even) .qa__num,
.js .qa:nth-of-type(even) .qa__q,
.js .qa:nth-of-type(even) .qa__a {
	transform: translateX(-1.75rem);
}

.js .qa__q { transition-delay: 0.08s; }
.js .qa__a { transition-delay: 0.16s; }

.js .qa.is-visible .qa__num,
.js .qa.is-visible .qa__q,
.js .qa.is-visible .qa__a {
	opacity: 1;
	transform: none;
}

/* 3. Ilustrace — společné -------------------------------------------------

   Paleta je obrácená proti sekci Co nabízím: světlá kresba do tmy.
   Linky nesmí být vlásečnice, jinak se kresba na tmavém podkladu ztratí. */

.sviz {
	display: block;
	width: 100%;
	height: auto;
}

.sviz text {
	font-family: var(--font-body);
	fill: var(--sv-text);
}

.sviz .t-strong { fill: #ffffff; }
.sviz .t-soft { fill: var(--sv-text); }
.sviz .t-dim { fill: var(--sv-dim); }
.sviz .t-accent { fill: var(--sv-lit); }

.sviz .stroke { fill: none; stroke: rgba(255, 255, 255, 0.34); stroke-width: 2; }
.sviz .stroke-thin { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1.75; }
.sviz .stroke-accent { fill: none; stroke: var(--sv-lit); stroke-width: 2.5; }

.sviz .block { fill: rgba(255, 255, 255, 0.07); }
.sviz .block-hi { fill: rgba(72, 224, 184, 0.16); }
.sviz .card-fill { fill: rgba(255, 255, 255, 0.05); }
.sviz .fill-soft { fill: rgba(255, 255, 255, 0.28); }
.sviz .fill-accent { fill: var(--sv-lit); }
.sviz .chrome-dot { fill: rgba(255, 255, 255, 0.24); }
.sviz .btn-fill { fill: var(--sv-lit); }
.sviz .btn-text { fill: #08211d; }
.sviz .toast-fill { fill: #171b1e; }

/*
 * Výchozí (skrytý) stav platí jen když běží JS — bez něj zůstane kresba
 * celá vykreslená. Spouští ji .is-visible na panelu, kterou panel dostane
 * při prvním odkrytí a už ji neztratí.
 */
.js .sviz .draw {
	stroke-dasharray: var(--len, 900);
	stroke-dashoffset: var(--len, 900);
}

.qa.is-visible .sviz .draw {
	animation: draw 0.9s var(--ease) forwards;
}

.js .sviz .rise {
	opacity: 0;
	transform: translateY(10px);
	transform-box: fill-box;
	transform-origin: center;
}

.qa.is-visible .sviz .rise {
	animation: rise 0.45s var(--ease) forwards;
}

.sviz .d1 { animation-delay: 0.1s; }
.sviz .d2 { animation-delay: 0.2s; }
.sviz .d3 { animation-delay: 0.3s; }
.sviz .d4 { animation-delay: 0.4s; }
.sviz .d5 { animation-delay: 0.5s; }
.sviz .d6 { animation-delay: 0.6s; }
.sviz .d7 { animation-delay: 0.7s; }
.sviz .d8 { animation-delay: 0.8s; }

/*
 * Trubka a jiskra. Dráhy mají pathLength="1", takže dasharray i offset
 * počítají s podílem délky a nemusí znát skutečné rozměry křivky.
 */
.sviz .pipe {
	fill: none;
	stroke: rgba(255, 255, 255, 0.16);
	stroke-width: 2;
}

.sviz .spark {
	fill: none;
	stroke: var(--sv-lit);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 0.12 0.88;
	stroke-dashoffset: 0.12;
	opacity: 0;
}

.qa.is-visible .sviz .spark {
	animation: sv-spark 2.6s linear 0.9s infinite;
}

.qa.is-visible .sviz .spark--late {
	animation-delay: 1.9s;
}

@keyframes sv-spark {
	0% { stroke-dashoffset: 0.12; opacity: 0; }
	12%, 82% { opacity: 1; }
	100% { stroke-dashoffset: -0.88; opacity: 0; }
}

/* 4. Ilustrace 01 — jeden údaj, tři místa ---------------------------------
   Smyčku obstarají jiskry v trubkách, nic dalšího se nehýbe. */

/* 5. Ilustrace 02 — připomínka -------------------------------------------- */

.js .sviz .toast {
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}

.qa.is-visible .sviz .toast {
	animation: sv-toast 5.5s var(--ease) 1s infinite;
}

@keyframes sv-toast {
	0%, 16% { opacity: 0; transform: translate(18px, 12px); }
	28%, 76% { opacity: 1; transform: none; }
	90%, 100% { opacity: 0; transform: translate(0, -10px); }
}

.js .sviz .bell {
	transform-box: fill-box;
	transform-origin: 50% 15%;
}

.qa.is-visible .sviz .bell {
	animation: sv-bell 5.5s var(--ease) 1s infinite;
}

@keyframes sv-bell {
	0%, 28% { transform: none; }
	32% { transform: rotate(15deg); }
	36% { transform: rotate(-12deg); }
	40% { transform: rotate(7deg); }
	44%, 100% { transform: none; }
}

/* 6. Ilustrace 03 — podklad k faktuře ------------------------------------- */

.js .sviz .row-new {
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}

.qa.is-visible .sviz .row-new {
	animation: sv-row 5s var(--ease) 0.8s infinite;
}

@keyframes sv-row {
	0%, 14% { opacity: 0; transform: translateY(12px); }
	28%, 100% { opacity: 1; transform: none; }
}

/* Součet se rozsvítí ve chvíli, kdy položka dosedne — jinak by čtenář
   nespojil jedno s druhým. */
.js .sviz .sum {
	transform-box: fill-box;
	transform-origin: 100% 50%;
}

.qa.is-visible .sviz .sum {
	animation: sv-sum 5s var(--ease) 0.8s infinite;
}

@keyframes sv-sum {
	0%, 22% { opacity: 0.45; transform: none; }
	32% { opacity: 1; transform: scale(1.06); }
	42%, 100% { opacity: 1; transform: none; }
}

/* 7. Ilustrace 04 — chatbot ----------------------------------------------- */

.js .sviz .pulse {
	transform-box: fill-box;
	transform-origin: center;
	opacity: 0;
}

.qa.is-visible .sviz .pulse {
	animation: sv-pulse 2.4s var(--ease) infinite;
}

@keyframes sv-pulse {
	0% { transform: scale(1); opacity: 0.5; }
	70%, 100% { transform: scale(3.4); opacity: 0; }
}

.js .sviz .ask,
.js .sviz .typing,
.js .sviz .reply {
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}

.qa.is-visible .sviz .ask {
	animation: sv-ask 6.5s var(--ease) 0.6s infinite;
}

.qa.is-visible .sviz .typing {
	animation: sv-typing 6.5s var(--ease) 0.6s infinite;
}

.qa.is-visible .sviz .reply {
	animation: sv-reply 6.5s var(--ease) 0.6s infinite;
}

@keyframes sv-ask {
	0%, 4% { opacity: 0; transform: translateY(8px); }
	14%, 100% { opacity: 1; transform: none; }
}

@keyframes sv-typing {
	0%, 20% { opacity: 0; }
	26%, 46% { opacity: 1; }
	52%, 100% { opacity: 0; }
}

@keyframes sv-reply {
	0%, 50% { opacity: 0; transform: translateY(8px); }
	60%, 100% { opacity: 1; transform: none; }
}

.qa.is-visible .sviz .dot {
	animation: sv-dot 1.1s var(--ease) infinite;
	transform-box: fill-box;
	transform-origin: center;
}

.sviz .dot--b { animation-delay: 0.15s; }
.sviz .dot--c { animation-delay: 0.3s; }

@keyframes sv-dot {
	0%, 55%, 100% { transform: none; opacity: 0.5; }
	28% { transform: translateY(-3px); opacity: 1; }
}

/*
 * Uspaná kresba. animation-play-state, ne animation: none — po probuzení
 * pokračuje tam, kde stála, místo aby skočila na začátek. Třídu přepíná
 * initLoops() v main.js.
 */
.sviz.is-idle,
.sviz.is-idle * {
	animation-play-state: paused;
}

/* 8. Responzivita --------------------------------------------------------- */

@media (max-width: 900px) {
	/* Vedle sebe se to přestane vejít dřív než v sekci Co nabízím —
	   kresba potřebuje šířku, aby v ní zůstal čitelný text. */
	.qa {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.25rem;
		padding-block: 3rem;
	}

	.qa:nth-of-type(even) {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Ve sloupci patří otázka nad kresbu: bez ní čtenář neví, na co kouká.
	   V kódu je kresba první kvůli pořadí na širokém displeji, tady ji tedy
	   posunujeme za text — v obou paritách stejně. */
	.qa__viz,
	.qa:nth-of-type(even) .qa__viz {
		order: 1;
	}

	/* Vodorovný nájezd se v jednom sloupci pere se šířkou stránky. */
	.js .qa__num,
	.js .qa__q,
	.js .qa__a,
	.js .qa:nth-of-type(even) .qa__num,
	.js .qa:nth-of-type(even) .qa__q,
	.js .qa:nth-of-type(even) .qa__a {
		transform: translateY(0.875rem);
	}

	.js .qa.is-visible .qa__num,
	.js .qa.is-visible .qa__q,
	.js .qa.is-visible .qa__a {
		transform: none;
	}

	.solve__head {
		flex-wrap: wrap;
		gap: 0.75rem 1.25rem;
	}

	/* Lineálek by na dvou řádcích visel ve vzduchu. */
	.solve__rule {
		display: none;
	}

	.qa__q {
		max-width: 22ch;
	}

	.qa__a {
		max-width: none;
	}
}

/*
 * Otázky na telefonu.
 *
 * Sesterské pravidlo ke krokům 01–05 ve style.css: stejný důvod, stejné
 * míry. Clamp drží na spodním konci 36 px otázky a 18 px odpovědi, což
 * jsou hodnoty pro dvousloupcovou sazbu. V jednom sloupci přes celou
 * šířku telefonu z toho je zeď textu a otázka se tlačí do nadpisu sekce.
 *
 * Velikosti schválně sedí na krocích v sekci Co nabízím — obě sekce jsou
 * sourozenci, takže čtenář nemá poznat, že přešel do jiné sazby.
 */
@media (max-width: 620px) {
	.qa__q {
		margin-bottom: 1rem;
		font-size: 1.75rem;
		line-height: 1.2;
		letter-spacing: -0.008em;
	}

	.qa__a {
		font-size: 1rem;
		line-height: 1.6;
	}

	.qa__num {
		letter-spacing: 0.14em;
	}
}

/* 9. Omezený pohyb --------------------------------------------------------
   Globální pravidlo ve style.css smyčky utne, ale nechalo by prvky ve
   výchozím stavu. Ten je u smyček ten „před“ — prázdná plocha. Tady je
   proto vracíme do hotového stavu, ať kresba nese celou informaci. */

@media (prefers-reduced-motion: reduce) {
	.js .qa::before,
	.js .solve__rule {
		transform: none;
	}

	.js .qa__viz {
		clip-path: none;
	}

		.js .qa__num,
	.js .qa__q,
	.js .qa__a {
		opacity: 1;
		transform: none;
	}

	.js .sviz .rise,
	.js .sviz .toast,
	.js .sviz .row-new,
	.js .sviz .sum,
	.js .sviz .ask,
	.js .sviz .reply {
		opacity: 1;
		transform: none;
	}

	.js .sviz .draw {
		stroke-dashoffset: 0;
	}

	/* Bez pohybu nemá jiskra ani psaní co říct — a tečky by zůstaly
	   viset přes odpověď. */
	.js .sviz .spark,
	.js .sviz .typing,
	.js .sviz .pulse {
		display: none;
	}
}