/* ==========================================================================
   coolsoft.cz — jemné efekty
   --------------------------------------------------------------------------
   ⏳ NA ZKOUŠKU. Samostatný soubor schválně: kdyby se efekty neosvědčily, stačí
   smazat tenhle soubor, assets/js/effects.js a dva <link>/<script> řádky
   v index.html, en/index.html a design.html. Zbytek webu na nich nestojí.

   Načítá se AŽ ZA site.css — schválně přebíjí `.icon` a `.mock--tilted`.

   🔴 Odhalování bloků při scrollu (`.fx-reveal`) posouvá prvek o 14 px nahoru
   a rozostřuje ho, takže text je po doscrollování ~0,3–0,5 s nečitelný. Je to
   vědomé rozhodnutí ze 17. 8. 2026 („zkusím to a pak se rozhodnu"), ne přehlédnutí.
   Kdyby to mělo padnout, stačí z `.fx-reveal` vyhodit `transform` a `filter`.

   Vše kromě lišty průběhu čtení je v `prefers-reduced-motion: no-preference`,
   takže se to vypne jedním přepínačem v systému.
   ========================================================================== */

::selection { background: var(--accent-50); color: var(--ink); }

.site-header { transition: box-shadow .3s ease; }
.site-header.is-stuck { box-shadow: 0 6px 24px rgba(15, 30, 56, .08); }

/* Tenká lišta průběhu čtení na spodní hraně lepivé hlavičky.
   Vkládá ji JS, aby v HTML nezůstal prázdný prvek, když se efekty vypnou. */
.scroll-progress {
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 2px;
	background: linear-gradient(90deg, var(--accent), var(--accent-700));
	transform: scaleX(var(--scroll-progress, 0));
	transform-origin: left center;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {

	/* Odhalení bloků při scrollu — prolnutí, mírné zvednutí a doostření. */
	.fx-reveal {
		opacity: 0;
		transform: translateY(14px);
		filter: blur(6px);
		transition:
			opacity .7s ease,
			transform .7s cubic-bezier(.22, 1, .36, 1),
			filter .7s ease;
		transition-delay: var(--fx-delay, 0s);
	}
	.is-revealed {
		opacity: 1;
		transform: none;
		filter: none;
	}

	/* Akcentová linka u nadhlaví sekcí se dokreslí zleva */
	.eyebrow.fx-rule::before {
		transform: scaleX(0);
		transform-origin: left center;
	}
	.eyebrow.is-drawn::before {
		transform: scaleX(1);
		transition: transform .9s cubic-bezier(.22, 1, .36, 1) .3s;
	}

	/* Rastr v hero nepostřehnutelně pluje. Kontinuální děj bez začátku a konce —
	   nic „nedojíždí" na místo, takže při čtení neruší. */
	.hero::before { animation: fx-drift 60s linear infinite; }
	@keyframes fx-drift { to { background-position: 62px 62px; } }

	/* Tečka v odznaku jemně tepe */
	.badge__dot { animation: fx-pulse 3s ease-in-out infinite; }
	@keyframes fx-pulse {
		0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
		70%      { box-shadow: 0 0 0 8px transparent; }
	}

	/* Lesk přes plná tlačítka při najetí */
	.btn--primary, .btn--accent { position: relative; overflow: hidden; }
	.btn--primary::before, .btn--accent::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .28) 50%, transparent 60%);
		transform: translateX(-120%);
		pointer-events: none;
	}
	.btn--primary:hover::before, .btn--accent:hover::before {
		transform: translateX(120%);
		transition: transform .6s ease;
	}

	/* Ikony karet při najetí lehce ožijí */
	.icon { transition: background-color .18s ease, color .18s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
	.card--link:hover .icon { transform: scale(1.08) rotate(-4deg); }

	/* Odpověď v častých dotazech se prolne, ne vyskočí */
	.faq__item[open] .faq__body { animation: fx-answer .3s ease both; }
	@keyframes fx-answer { from { opacity: 0; transform: translateY(-4px); } }

	/* Mockup v hero se sotva znatelně naklání za kurzorem. Reakce na PŘÍMOU akci —
	   proto neruší. Přebíjí pevný náklon ze site.css (sekce 11). */
	@media (min-width: 1040px) {
		.mock--tilted {
			transform: perspective(1600px)
				rotateY(calc(-7deg + var(--fx-ry, 0deg)))
				rotateX(calc(2deg + var(--fx-rx, 0deg)));
			transition: transform .45s ease;
			will-change: transform;
		}
	}
}