/* ==========================================================================
   TOPINJECT – dinamikus infógrafika a magyar főoldalra
   („Bemutatjuk a technológiákat” alatt)

   Önálló réteg: a design.css-t nem módosítja, csak a .tinf névtéren belül
   dolgozik. Csak azokon az oldalakon töltődik be, ahová az index.php beteszi.

   Felépítés
     .tinf            teljes szélességű keret, 16:9 (asztali) / 4:5 (mobil)
     .tinf-szinpad    a talajmetszet – abszolút háttérréteg, kitölti a keretet
     .tinf-fej        cím + forgatókönyv-váltó (lakóépület / ipari csarnok)
     .tinf-panel      a fázis magyarázata, üveghatású kártyaként a rajz fölött
     .tinf-lab        fázisválasztó csipek + lejátszás
     .tinf-halad      haladásjelző csík a keret alján

   Az animációt NEM JS-időzítő rajzolja: a gyökérelem data-fazis és data-eset
   attribútuma vált, minden mozgás CSS-átmenet. Így a böngésző kezeli, és a
   prefers-reduced-motion egyetlen szabállyal kikapcsolja.
   ========================================================================== */

.tinf {
	/* A --tinf-sb (görgetősáv szélessége) értékét az infografika.js írja ide.
	   Csak a mobil minimálmagasság számol vele; a blokk szélessége a
	   tartalmi sávtól jön. */
	--sb: var(--tinf-sb, 0px);
	--i-navy: #0a1836;
	--i-zold: #0b7a34;
	--i-zold-vil: #22c55e;
	--i-narancs: #ff7900;
	--i-vil: #eaf1ff;
	--i-halvany: #93a7cc;
	--i-vonal: rgba(147, 167, 204, .28);

	position: relative;
	/* A blokk a körülvevő tartalmi sáv szélességét veszi fel – ugyanazt,
	   amin az alatta álló dobozok is ülnek. */
	width: 100%;
	margin-top: 36px;
	margin-bottom: 36px;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--radius, 12px);
	background: var(--i-navy);
	color: var(--i-vil);
	font-family: inherit;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	isolation: isolate;
}

.tinf > *:not(.tinf-szinpad) { position: relative; z-index: 2; min-width: 0; }

/* Ha az infógrafika a tartalom első eleme, ne maradjon fölötte fehér sáv:
   a #contwr felső belső margóját (--pt) negatív margóval visszahúzzuk, így
   az ábra pontosan a morzsasávhoz tapad. A --pt töréspontonként változik,
   ezért nem beégetett érték. */
#contwr > .tinf:first-child { margin-top: 0; }


/* --- a metszet: abszolút háttérréteg ------------------------------------ */

.tinf-szinpad {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.tinf-szinpad svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Halvány mérnöki raszter a rajz fölött, hogy a nagy sötét felületek ne
   legyenek üresek. */
.tinf::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image:
		linear-gradient(to right, rgba(147, 167, 204, .05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(147, 167, 204, .05) 1px, transparent 1px);
	background-size: 58px 58px;
	pointer-events: none;
}


/* --- fejléc ------------------------------------------------------------- */

.tinf-fej {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	padding: 18px 20px 10px;
}

.tinf-cim {
	margin: 0;
	font-size: clamp(1.02rem, 2.1vw, 1.58rem);
	font-weight: 600;
	letter-spacing: -.01em;
	color: #fff;
	line-height: 1.25;
	text-shadow: 0 2px 14px rgba(10, 24, 54, .85);
}
.tinf-cim span { color: var(--i-zold-vil); }

.tinf-valto {
	display: flex;
	gap: 6px;
	margin-left: auto;
	padding: 4px;
	background: rgba(10, 24, 54, .72);
	border: 1px solid var(--i-vonal);
	border-radius: 999px;
}
.tinf-valto button {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--i-halvany);
	font: inherit;
	font-size: .82rem;
	font-weight: 500;
	padding: 9px 16px;
	min-height: 40px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	transition: background .25s, color .25s;
}
.tinf-valto button:hover { color: #fff; }
.tinf-valto button[aria-pressed="true"] { background: var(--i-zold); color: #fff; }


/* --- magyarázó kártya --------------------------------------------------- */

.tinf-torzs {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	min-height: 0;
	padding: 0 16px;
}

.tinf-panel {
	width: 100%;
	padding: 15px 17px;
	border-radius: 16px;
	border: 1px solid var(--i-vonal);
	/* Tömör alap azoknak a böngészőknek, amelyek nem tudnak háttérelmosást. */
	background: rgba(10, 22, 48, .9);
	box-shadow: 0 18px 44px rgba(0, 0, 0, .38);
}
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
	.tinf-panel {
		background: rgba(10, 22, 48, .62);
		-webkit-backdrop-filter: blur(9px);
		backdrop-filter: blur(9px);
	}
}

.tinf-lepes { display: none; animation: tinf-be .5s ease both; }
.tinf-lepes[data-aktiv="1"] { display: block; }

.tinf-lepes-cim {
	margin: 0 0 7px;
	font-size: clamp(.96rem, 1.45vw, 1.16rem);
	font-weight: 600;
	color: #fff;
	line-height: 1.3;
}
.tinf-lepes-cim b {
	display: inline-block;
	margin-right: 9px;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--i-zold);
	color: #fff;
	font-size: .74em;
	font-weight: 600;
	vertical-align: middle;
}
.tinf-lepes p {
	margin: 0;
	color: #cbd8f0;
	font-size: clamp(.84rem, 1.1vw, .99rem);
	line-height: 1.55;
}

@keyframes tinf-be {
	from { opacity: 0; transform: translateY(9px); }
	to   { opacity: 1; transform: none; }
}


/* --- fázisválasztó láb -------------------------------------------------- */

.tinf-lab {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	padding: 12px 20px 18px;
}

.tinf-chip {
	appearance: none;
	border: 1px solid var(--i-vonal);
	background: rgba(10, 24, 54, .7);
	color: var(--i-halvany);
	font: inherit;
	font-size: .75rem;
	font-weight: 500;
	padding: 8px 13px;
	min-height: 40px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	transition: background .25s, color .25s, border-color .25s;
}
.tinf-chip:hover { color: #fff; border-color: rgba(147, 167, 204, .6); }
.tinf-chip[aria-current="true"] { background: #fff; border-color: #fff; color: var(--i-navy); }

/* --- 8. pont: árajánlat ------------------------------------------------
   Nem fázis, hanem cselekvés: a díjtalan helyszíni szemle adatlapjára visz.
   Ezért link, nem gomb, és vizuálisan is elkülönül – zöld, és lassan
   pulzál, hogy a hét fázis végigfutása után ez legyen a szem következő
   állomása. A pulzálás csak árnyékkal dolgozik, nem mozgatja az elemet:
   így nem tolja el a mellette lévő gombokat, és nem okoz újratördelést. */
.tinf-cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: none;
	padding: 8px 15px;
	min-height: 40px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--i-zold);
	color: #fff;
	font: inherit;
	font-size: .78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	text-decoration: none;
	white-space: nowrap;
	animation: tinf-cta-lukt 1.8s cubic-bezier(.4,0,.6,1) infinite;
	transition: background .25s, transform .25s;
}
.tinf-cta b {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px; height: 20px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .22);
	font-size: .74em;
	font-weight: 700;
}
.tinf-cta:hover, .tinf-cta:focus-visible {
	background: var(--i-zold-vil);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}

@keyframes tinf-cta-lukt {
	0% {
		box-shadow: 0 0 0 0 rgba(34, 197, 94, .9), 0 0 0 0 rgba(34, 197, 94, .55);
		transform: scale(1);
	}
	35% { transform: scale(1.06); }
	70% {
		box-shadow: 0 0 0 17px rgba(34, 197, 94, 0), 0 0 0 30px rgba(34, 197, 94, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(34, 197, 94, 0), 0 0 0 0 rgba(34, 197, 94, 0);
		transform: scale(1);
	}
}

/* A lejátszás/szünet a vezérlők közül az egyetlen, ami nem a tartalomra
   mutat, hanem az animációt állítja. Ezért vörös: színben is elkülönül a
   fázis-csipektől és a zöld árajánlat-gombtól. A méretei változatlanok,
   hogy a vezérlősáv egy sorban maradjon. */
.tinf-jatek {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	appearance: none;
	border: 1px solid #8f231b;
	background: #b4291f;
	color: #fff;
	font: inherit;
	font-size: .75rem;
	font-weight: 500;
	padding: 8px 13px;
	min-height: 40px;
	border-radius: 999px;
	cursor: pointer;
	transition: background .25s, border-color .25s;
}
.tinf-jatek:hover, .tinf-jatek:focus-visible { background: #cf3527; border-color: #cf3527; color: #fff; }

.tinf-halad {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3px;
	background: rgba(255, 255, 255, .09);
	z-index: 3;
}
.tinf-halad i {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--i-zold), var(--i-zold-vil));
	transition: width .3s linear;
}


/* ==========================================================================
   Az SVG-metszet állapotai
   Mindent a .tinf[data-fazis] és [data-eset] vezérel.
   ========================================================================== */

.tinf svg text { font-family: inherit; }
.tinf .sv-el { transition: opacity .55s ease, transform .8s cubic-bezier(.22,.7,.3,1); }

/* --- forgatókönyv-váltás --- */
.tinf .jelenet { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s; }
.tinf[data-eset="lako"]  .jelenet-lako,
.tinf[data-eset="ipari"]   .jelenet-ipari,
.tinf[data-eset="kozlek"]  .jelenet-kozlek,
.tinf[data-eset="muemlek"] .jelenet-muemlek { opacity: 1; visibility: visible; }

/* --- talajrétegek --- */
.tinf .gyenge-reteg { opacity: .55; transition: opacity .6s ease; }
.tinf[data-fazis="2"] .gyenge-reteg { opacity: 1; }
.tinf[data-fazis="6"] .gyenge-reteg { opacity: .3; }

.tinf .megszilardult { opacity: 0; transition: opacity .8s ease; }
.tinf[data-fazis="6"] .megszilardult { opacity: .5; }

/* --- fázishoz kötött feliratok a rajzon --- */
.tinf .jelzo { opacity: 0; transition: opacity .5s ease; }
.tinf[data-fazis="1"] .jelzo-1 { opacity: 1; }
.tinf[data-fazis="2"] .jelzo-2 { opacity: 1; }
.tinf[data-fazis="5"] .jelzo-5 { opacity: 1; }
.tinf[data-fazis="6"] .jelzo-6 { opacity: 1; }

/* --- a szerkezet NEM dől és NEM süllyed meg --------------------------------
   A korábbi változat a házat és a betontáblát megdöntve, lesüllyesztve
   mutatta, majd a folyamat végén visszabillentette. Ez műszakilag
   félrevezető: a beavatkozás a TALAJT stabilizálja, a látványos billegés
   nem valós, és nem is ez a technológia lényege. A csoportok a jelölésük
   miatt megmaradnak, de nem mozdulnak el egyik fázisban sem. */
.tinf .sullyedo,
.tinf .sullyedo-tabla { transform: none; }

/* --- repedés: az ábra főszereplője -----------------------------------------
   A repedés vastagsága jelenetenként más, mert máshol falrepedés, máshol a
   táblák közti lépcső jelölése. A --rep-w változó tartja ezt egy helyen; a
   záró fázis ugyanazzal az aránnyal vékonyítja mindet. */
.tinf .jelenet-lako .repedes,
.tinf .jelenet-muemlek .repedes { --rep-w: 11; }
.tinf .jelenet-ipari .repedes,
.tinf .jelenet-kozlek .repedes { --rep-w: 8; }

.tinf .repedes {
	stroke-dasharray: 420;
	stroke-dashoffset: 420;
	opacity: 0;
	stroke-width: var(--rep-w, 8);
	transition: stroke-dashoffset 1.15s ease, opacity .6s ease,
	            stroke-width .8s ease, filter .8s ease;
}

/* Injektálás előtt: teljes hosszban kirajzolódik, vastagon, lágy fénnyel. */
.tinf[data-fazis="1"] .repedes,
.tinf[data-fazis="2"] .repedes,
.tinf[data-fazis="3"] .repedes,
.tinf[data-fazis="4"] .repedes,
.tinf[data-fazis="5"] .repedes {
	stroke-dashoffset: 0;
	opacity: 1;
	filter: drop-shadow(0 0 7px rgba(255, 121, 0, .9));
}

/* Injektálás után: látványosan vékonyabb és halványabb – de NEM tűnik el.
   A talaj stabilizálása a további repedést állítja meg; a meglévő nyom
   megmarad. Ezt a fokozatot szándékosan tartjuk jól láthatónak. */
.tinf[data-fazis="6"] .repedes {
	stroke-dashoffset: 0;
	opacity: .55;
	stroke-width: calc(var(--rep-w, 8) * .3);
	filter: none;
}

/* --- üreg és laza talaj: az ok, amit meg kell szüntetni --------------------
   A repedés csak a tünet. Az ok a felszín alatt van: a laza, nem kellően
   teherbíró réteg és a benne nyíló üregek. Ezért az üreg az első két
   fázisban lassan „lélegzik”, hogy a szem odataláljon. Az injektálás
   alatt is ott van – a gyanta épp azt tölti ki –, és csak az Eredmény
   fázisban tűnik el, amikorra a talaj megszilárdult. */
.tinf .ureg {
	opacity: 0;
	transition: opacity .7s ease;
}
.tinf[data-fazis="1"] .ureg,
.tinf[data-fazis="2"] .ureg,
.tinf[data-fazis="3"] .ureg,
.tinf[data-fazis="4"] .ureg,
.tinf[data-fazis="5"] .ureg { opacity: 1; }

/* A csucsertek van a 0% es 100% pontban: ha a felhasznalo mozgascsokkentest
   ker, az animacio azonnal a vegallapotba ugrik – ott az ureg teljes
   fenyerovel latszik, nem a halvanyabb fazisban ragad. */
@keyframes tinf-ureg-lukt {
	0%, 100% { opacity: 1; }
	50%      { opacity: .7; }
}
.tinf[data-fazis="1"] .ureg,
.tinf[data-fazis="2"] .ureg {
	animation: tinf-ureg-lukt 2.8s ease-in-out infinite;
}

/* A laza réteg maga is kiemelten látszik, amíg meg nem szilárdul. */
.tinf .gyenge-reteg { transition: opacity .7s ease; }
.tinf[data-fazis="1"] .gyenge-reteg,
.tinf[data-fazis="2"] .gyenge-reteg { opacity: 1; }

/* --- verőszonda (2.) ------------------------------------------------------
   A szondázó NEM ereszkedik le a magasból: a helyén áll, és a kezében lévő
   verősúly jár fel-le a vezetőrúdon. Ez a dinamikus verőszondázás valódi
   mozdulata: a súlyt adott magasságba emelik, majd ejtik a rúd üllőjére.
   Ezért az emelkedés lágy, az esés gyorsuló. */
.tinf .szonda { opacity: 0; transition: opacity .5s ease; }
.tinf[data-fazis="2"] .szonda { opacity: 1; }

.tinf .vero-suly { transform-box: fill-box; transform-origin: center; }
.tinf[data-fazis="2"] .vero-suly {
	animation: tinf-vero 1.05s infinite;
}
@keyframes tinf-vero {
	0%   { transform: translateY(0);     animation-timing-function: cubic-bezier(.25,.6,.4,1); }
	45%  { transform: translateY(-22px); animation-timing-function: linear; }
	58%  { transform: translateY(-22px); animation-timing-function: cubic-bezier(.6,0,.9,.55); }
	100% { transform: translateY(0); }
}

/* A rúd minden ütésre egy lépéssel mélyebbre hatol. Az ütés a súly
   ciklusának a végén történik (1,05 mp), ezért a rúd ugyanilyen ütemben
   lép: öt lépés, összesen 24 képpont – a léptékben kb. 42 cm behatolás.
   A steps() épp ezt adja: a rúd nem folyamatosan csúszik, hanem ütésenként
   ugrik egyet, ahogy a valóságban. */
.tinf .szonda-rud { transform: translateY(-24px); }
.tinf[data-fazis="2"] .szonda-rud {
	animation: tinf-szonda-melyul 5.25s steps(5, end) both;
}
@keyframes tinf-szonda-melyul {
	from { transform: translateY(-24px); }
	to   { transform: translateY(0); }
}

/* ==========================================================================
   3–5. fázis: a munkafolyamat egyesével halad a három furaton
   --------------------------------------------------------------------------
   A valóságban nem indul el egyszerre mind a három furat. A munkás az elsőnél
   kezd, végez, átmegy a másodikhoz, majd a harmadikhoz. Ezt két dolog adja ki:

     1. Minden szerelvény tudja a saját sorszámát (--sor: 0, 1, 2), és ennyivel
        később szólal meg: soronként 1,8 másodperc.
     2. A munkás alakja ugyanezzel az ütemmel lép át a következő furathoz; a
        lépéstávolságot a --l1 és --l2 tartja, mert jelenetenként más.

   Egy fázis 6 másodperc, ebbe a három lépés kényelmesen belefér.
   ========================================================================== */

/* --- a munkás végigjárja a három furatot --------------------------------- */
/* Az alaphelyzet a lépés-animáció VÉGÁLLÁSA (a harmadik furat). A fázis
   váltásakor az animáció megszűnik; ha az alaphelyzet a nulla pozíció
   volna, a munkás visszaugrana – még ~86%-os átlátszóságnál, tehát
   láthatóan. A nulla pozíciót így az animáció 0%-a adja, akkor viszont
   az elem még teljesen átlátszó. */
.tinf .munkas { opacity: 0; transform: translateX(var(--l2, 0px)); transition: opacity .45s ease; }
@keyframes tinf-munkas-lep {
	0%,   26% { transform: translateX(0); }
	31%,  57% { transform: translateX(var(--l1, 120px)); }
	62%, 100% { transform: translateX(var(--l2, 240px)); }
}
.tinf[data-fazis="3"] .munkas-furo,
.tinf[data-fazis="4"] .munkas-cso {
	opacity: 1;
	animation: tinf-munkas-lep 6s ease-in-out both;
}
/* Az 5. fazis 9,5 masodperc, mert ott ket munkafolyamat fut egyszerre.
   A lepesek ehhez igazodnak. */
.tinf[data-fazis="5"] .munkas-injekt {
	opacity: 1;
	animation: tinf-munkas-lep 9.5s ease-in-out both;
}

/* --- 3. fázis: furatok, egyenként ---------------------------------------
   A gép nem a levegőből ereszkedik: a kezelő a furat fölött tartja, és a szár
   annyit hatol be, amennyi a hossza (20 képpont, kb. 35 cm). */
.tinf .furat {
	opacity: 0;
	transform: scaleY(0);
	transform-box: fill-box;
	transform-origin: center top;
}
.tinf[data-fazis="3"] .furat {
	animation: tinf-furat-melyul 1.5s cubic-bezier(.3,.7,.4,1) both;
	animation-delay: calc(var(--sor, 0) * 1.8s);
}
@keyframes tinf-furat-melyul {
	0%   { opacity: 0; transform: scaleY(0); }
	10%  { opacity: 1; transform: scaleY(.1); }
	100% { opacity: 1; transform: scaleY(1); }
}
.tinf[data-fazis="4"] .furat,
.tinf[data-fazis="5"] .furat { opacity: 1; transform: scaleY(1); }
/* a végén a furatok le vannak zárva, csak halványan látszanak */
.tinf[data-fazis="6"] .furat { opacity: .3; transform: scaleY(1); }

.tinf .furo { opacity: 0; transform: translateY(-20px); }
.tinf[data-fazis="3"] .furo {
	animation: tinf-furo-be 1.75s cubic-bezier(.3,.65,.4,1) both;
	animation-delay: calc(var(--sor, 0) * 1.8s);
}
/* A gép megérkezik, lefúr, majd a munkás KIHÚZZA és továbbviszi a következő
   ponthoz – nem marad ott rezegve a kész furatban. */
@keyframes tinf-furo-be {
	0%   { opacity: 0; transform: translateY(-20px); }
	10%  { opacity: 1; transform: translateY(-18px); }
	57%  { opacity: 1; transform: translateY(0); }
	78%  { opacity: 1; transform: translateY(-26px); }
	100% { opacity: 0; transform: translateY(-36px); }
}

/* A fúrás rezgése – KIZÁRÓLAG amíg a fúrás tart (10 × 0,1 s = 1 s), nem
   végtelenítve. Külön elemen, hogy ne írja felül a behatolást. */
.tinf[data-fazis="3"] .furo-szar {
	animation: tinf-furas .1s linear 10 both;
	animation-delay: calc(var(--sor, 0) * 1.8s);
}
@keyframes tinf-furas {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-1.8px); }
	75%      { transform: translateX(1.8px); }
}

/* furadék csak addig száll, amíg az adott furat készül */
.tinf .por { opacity: 0; }
.tinf[data-fazis="3"] .por {
	animation: tinf-por .5s ease-out 2 both;
	animation-delay: calc(var(--sor, 0) * 1.8s);
}

/* --- 4. fázis: a csöveket kézzel tolják a furatba, egyenként -------------
   A cső nem fentről hullik be: a szerelő 30 képpontnyit csúsztat rajta. */
/* A csofej-lemez a .cso csoport kozvetlen gyereke, ezert a szulot is
   rejteni kell: az eredmeny-fazisban mar nincs cso a furatban, csak a
   lezart furatnyom latszik halvanyan. */
.tinf .cso { opacity: 0; transition: opacity .4s ease; }
.tinf[data-fazis="4"] .cso,
.tinf[data-fazis="5"] .cso { opacity: 1; }
.tinf .cso-a, .tinf .cso-b { opacity: 0; transform: translateY(-30px); }
.tinf[data-fazis="4"] .cso-a,
.tinf[data-fazis="4"] .cso-b {
	animation: tinf-cso-be 1.3s cubic-bezier(.25,.75,.35,1) both;
}
.tinf[data-fazis="4"] .cso-a { animation-delay: calc(var(--sor, 0) * 1.8s); }
.tinf[data-fazis="4"] .cso-b { animation-delay: calc(var(--sor, 0) * 1.8s + .3s); }
@keyframes tinf-cso-be {
	0%   { opacity: 0; transform: translateY(-30px); }
	18%  { opacity: 1; }
	100% { opacity: 1; transform: translateY(0); }
}
.tinf[data-fazis="5"] .cso-a, .tinf[data-fazis="5"] .cso-b { opacity: 1; transform: translateY(0); }
/* A 6. fázisban a csövek már nem látszanak, de ha visszaugranának -30px-re,
   az a kifakulás alatt még látható volna. Ezért lent maradnak. */
.tinf[data-fazis="6"] .cso-a, .tinf[data-fazis="6"] .cso-b { transform: translateY(0); }

/* --- 5. fázis: injektálás, furatonként ----------------------------------
   A gyanta nem egyenletesen nő: nyomás alatt túllendül, majd a kötéssel
   visszaáll a végleges térfogatra. Ettől lesz az injektálás esemény. */
.tinf .gyanta { opacity: 1; }
.tinf .lob {
	opacity: 0;
	transform: scale(.06);
	transform-box: fill-box;
	transform-origin: center top;
	transition: opacity .45s ease, transform .8s ease;
}
.tinf[data-fazis="5"] .lob {
	animation: tinf-szivarog 2.6s cubic-bezier(.22,.72,.3,1) both;
	animation-delay: calc(var(--sor, 0) * 2.9s + .3s + var(--dl, 0s));
}
/* Az Eredmény a beinjektált állapotot mutatja: a gyanta pontosan
   ugyanakkora és ugyanolyan élénk, mint az 5. fázis végén – ott már
   kitöltötte az üregeket, ez a végleges kiterjedése. */
.tinf[data-fazis="6"] .lob { opacity: 1; transform: scale(var(--vsc, 1)); }
@keyframes tinf-szivarog {
	0%   { opacity: 0;   transform: scale(.04); }
	16%  { opacity: .9;  transform: scale(.34); }
	44%  { opacity: 1;   transform: scale(.8); }
	70%  { opacity: 1;   transform: scale(calc(var(--vsc, 1) * 1.08)); }
	86%  { opacity: 1;   transform: scale(calc(var(--vsc, 1) * .95)); }
	100% { opacity: 1;   transform: scale(var(--vsc, 1)); }
}

/* a megszilárduló sáv az injektálás alatt fokozatosan kapcsol be */
@keyframes tinf-nyomashullam {
	0%   { opacity: 0; }
	30%  { opacity: .22; }
	100% { opacity: .5; }
}
.tinf[data-fazis="5"] .megszilardult {
	animation: tinf-nyomashullam 5.4s ease-out both;
}

/* a lebenyek az adott furaton belül is egymás után nőnek */
/* A lebenyek kulon-kulon mas pontbol nonek ki es mas vegmeretig, ezert az
   injektalt test sziluettje szabalytalan lesz - ahogy a valosagban a gyanta
   a talaj reseit es uregeit tolti ki. Ket injektalt test sem egyforma. */
.tinf .l1 { --dl: 0s;   --vsc: .94; transform-origin: 62% 78%; }
.tinf .l2 { --dl: .18s; --vsc: 1.08; transform-origin: 28% 62%; }
.tinf .l3 { --dl: .34s; --vsc: .97; transform-origin: 76% 54%; }
.tinf .l4 { --dl: .52s; --vsc: 1.03; transform-origin: 44% 26%; }
.tinf .l5 { --dl: .26s; --vsc: 1.12; transform-origin: 88% 72%; }
.tinf .l6 { --dl: .42s; --vsc: .88; transform-origin: 12% 68%; }

/* --- 5. fázis: injektálás ÉS emelésmérés egyszerre -----------------------
   A mérés nem az injektálás UTÁN kezdődik: a gyanta már az első nyomásnál
   emelni kezd, ezért a teodolitos ember az injektálás megkezdésekor áll
   munkába. A két mozzanat egyetlen fázis. */

/* --- a talaj emelkedése: két felfelé mozgó nyíl ---------------------------
   Csak az 5. fázisban, és jóval a fázis kezdete után: mérve a MÁSODIK furat
   injektálása 4,97 s-nál fejeződik be, a nyilak ezért 5,2 és 5,9 s
   késleltetéssel lépnek be – előbb két furat gyantája terjed szét, és csak
   utána jelenik meg az emelkedés jele.
   A nyilak a három furat felezőpontjaiban állnak, a felszín alatt. */
.tinf .emelo-nyil { opacity: 0; }
.tinf[data-fazis="5"] .emelo-nyil {
	animation: tinf-emelkedes 1.7s ease-in-out infinite both;
	animation-delay: var(--nd, 1.2s);
}
@keyframes tinf-emelkedes {
	0%   { opacity: 0; transform: translateY(16px); }
	22%  { opacity: 1; transform: translateY(8px); }
	70%  { opacity: 1; transform: translateY(-8px); }
	100% { opacity: 0; transform: translateY(-18px); }
}

.tinf .lezer { opacity: 0; transition: opacity .5s ease; }
.tinf[data-fazis="5"] .lezer { opacity: 1; }
.tinf .lezer-vonal { stroke-dasharray: 10 12; animation: tinf-lezer 1.2s linear infinite; }
@keyframes tinf-lezer { to { stroke-dashoffset: -44; } }

/* --- eredmény (5.) --- */
.tinf .pipa {
	opacity: 0;
	transform: scale(.6);
	transform-box: fill-box;
	transform-origin: center;
	transition: opacity .5s ease, transform .6s cubic-bezier(.2,1.3,.4,1);
}
.tinf[data-fazis="6"] .pipa { opacity: 1; transform: scale(1); }

/* --- targonca az ipari csarnokban ----------------------------------------
   1. fázis: a faltól elindul a repedésig, ott megáll, majd visszatolat.
   2–5. fázis: végig a falnál marad, nem zavarja a munkát.
   6. fázis: rakományával végigmegy a helyreállított padlón, és a terhet
   a jobb oldali polcra teszi – ezzel zárul a jelenet.
   A villa nyugalomban x=256-ig ér; a repedés 387-nél van, a polc rekesze
   736-nál – ebből jön a 128, illetve az 534 képpontos út. */
/* A 6. fázis animációja messze a nyugalmi helytől ér véget (a jármű
   1760-nál, a targonca 394-nél). Amikor a fázis véget ér, az animáció
   megszűnik, és a jármű visszaugrik az alaphelyzetbe. Ha ezt átmenettel
   tennénk, a visszacsúszás a jelenet 0,5 s-os kifakulása alatt LÁTSZANA
   – a jármű hátrafelé száguldana. Ezért 0,55 s késleltetést kap,
   és csak jelképes időtartamot: a nulla időtartamú átmenet a szabvány
   szerint le sem futna, így a késleltetés is hatástalan lenne. A
   visszaállás így akkor történik, amikor a jelenet már eltűnt. */
/* Jelenetváltáskor az animáció megszűnik, és az elem visszaugrik az
   alapállapotába – ez a 0,5 s-os kifakulás alatt LÁTSZANA. CSS-átmenet
   nem segít: animáció megszűnésére a böngésző nem indít átmenetet.
   Ezért az alapállapot maga a 6. fázis végállása: a nem aktív jelenetben
   ott áll a jármű, ahová a saját jelenete végén megérkezett, így nincs
   mit visszaugrania. A nyugalmi helyet csak az aktív jelenet állítja be –
   azt viszont a befakulás első képkockáján, még nulla átlátszóságnál. */
.tinf .targonca { transform: translateX(394px); }
.tinf[data-eset="ipari"] .targonca { transform: translateX(0); }

@keyframes tinf-targonca-oda-vissza {
	0%,   6%  { transform: translateX(0); }
	34%,  56% { transform: translateX(128px); }
	86%, 100% { transform: translateX(0); }
}
.tinf[data-eset="ipari"][data-fazis="1"] .targonca {
	animation: tinf-targonca-oda-vissza 6s ease-in-out both;
}

@keyframes tinf-targonca-szallit {
	0%        { transform: translateX(0); }
	55%,  72% { transform: translateX(534px); }
	100%      { transform: translateX(394px); }
}
.tinf[data-eset="ipari"][data-fazis="6"] .targonca {
	animation: tinf-targonca-szallit 6s cubic-bezier(.4,0,.3,1) both;
}

/* A rakomány a villáról a polcra kerül, amint a targonca odaért. */
.tinf .rakomany { opacity: 0; }
.tinf[data-eset="ipari"] .rakomany { opacity: 1; }
@keyframes tinf-rakomany-le {
	0%,  46%  { opacity: 1; transform: translateY(0); }
	60%, 64%  { opacity: 1; transform: translateY(-24px); }
	70%, 100% { opacity: 0; transform: translateY(-24px); }
}
.tinf[data-eset="ipari"][data-fazis="6"] .rakomany {
	animation: tinf-rakomany-le 6s ease-in-out both;
}

.tinf .polc-rakomany { opacity: 1; }
.tinf[data-eset="ipari"] .polc-rakomany { opacity: 0; }
@keyframes tinf-polc-fel {
	0%,  62%  { opacity: 0; }
	70%, 100% { opacity: 1; }
}
.tinf[data-eset="ipari"][data-fazis="6"] .polc-rakomany {
	animation: tinf-polc-fel 6s ease-out both;
}

/* 6. Eredmény: a padlóhézagok eltűnnek – ezen gurul végig a targonca. */
.tinf .padlo-hezag { opacity: 1; }
.tinf[data-eset="ipari"] .padlo-hezag { opacity: 0; }
.tinf[data-eset="ipari"][data-fazis="6"] .padlo-hezag { opacity: 1; transition: opacity .6s ease; }

/* a teherautó is elindul a helyreállított pályán */
/* --- közlekedés, közmű: teherautó az úton --------------------------------
   1. fázis: a jelenet-ablak bal szélétől a repedésig hajt, ott megáll,
   majd visszatolat egészen a bal szélig.
   2–5. fázis: a bal szélen áll, nem takarja a munkaterületet.
   6. fázis: végigmegy az egyenletes úton, át a híd alatt és a szövegdoboz
   mögött, majd jobbra elhagyja a jelenet-ablakot (a jármű hátulja is kiér).
   A jármű orra nyugalomban x=270-nél van, a repedés x=468 -> 198 px út.
   A kihajtás hossza nézetfüggő: asztalin a 0–1600, mobilon a 70–900
   képmezőből kell kiérnie. */
.tinf .jarmu {
	transform: translateX(var(--jarmu-ki, 1760px));
	--jarmu-x0: -99px;    /* nyugalmi hely: az orra 293-nál, 57 egységgel a munkaterület előtt */
	--jarmu-ut: 175px;    /* innen a repedésig (x=468) */
	--jarmu-ki: 1760px;   /* a képmezőből kifelé */
}
.tinf[data-eset="kozlek"] .jarmu { transform: translateX(var(--jarmu-x0)); }
@media (max-width: 767.98px) {
	/* A nagyobb jármű (392 egység) nem fér el egészben a 70–900-as mobil
	   képmezőben a munkaterület előtt, ezért hátulja a bal képszélen kívülre
	   nyúlik – úgy olvasódik, mint a képbe behajtó teherautó. */
	.tinf .jarmu { --jarmu-ki: 1060px; }
}

@keyframes tinf-jarmu-oda-vissza {
	0%,   6%  { transform: translateX(var(--jarmu-x0)); }
	34%,  56% { transform: translateX(calc(var(--jarmu-x0) + var(--jarmu-ut))); }
	86%, 100% { transform: translateX(var(--jarmu-x0)); }
}
.tinf[data-eset="kozlek"][data-fazis="1"] .jarmu {
	animation: tinf-jarmu-oda-vissza 6s ease-in-out both;
}

@keyframes tinf-jarmu-athalad {
	0%   { transform: translateX(var(--jarmu-x0)); }
	100% { transform: translateX(var(--jarmu-ki, 1760px)); }
}
.tinf[data-eset="kozlek"][data-fazis="6"] .jarmu {
	animation: tinf-jarmu-athalad 6s cubic-bezier(.45, 0, .55, 1) both;
}

/* 6. Eredmény: az út hézagai eltűnnek – egyenletes pályán halad a jármű. */
.tinf .ut-hezag { opacity: 1; }
.tinf[data-eset="kozlek"] .ut-hezag { opacity: 0; }
.tinf[data-eset="kozlek"][data-fazis="6"] .ut-hezag { opacity: 1; transition: opacity .6s ease; }


/* ==========================================================================
   Töréspontok
   ========================================================================== */

/* --- mobil: a kártya a rajz alján ül, teljes szélességben --------------- */
/* --- mobil: a rajz és a szöveg KÜLÖN sávban --------------------------
   Korábban a metszet háttérrétegként feküdt a keret alatt, és a magyarázó
   kártya ráült az injektálási zónára – épp a műgyantát takarta ki. Mobilon
   ezért a színpad rendes rácssorba kerül, a kártya alá, a keret pedig 9:16,
   hogy mindkettőnek jusson hely. Átfedés így nincs. */
@media (max-width: 767.98px) {
	.tinf {
		/* Mobilon a magassagot a TARTALOM adja, nem egy rogzitett arany.
		   Korabban a rajzsav 1fr volt: ha magasabb jutott neki, mint amennyit
		   a kep igenyel, ures sav maradt a gyanta es a szovegkartya kozott.
		   Most minden sor auto, a rajz pedig a sajat aranyat hozza magaval
		   (a JS allitja be a viewBox mellé), igy holttér sehol nem keletkezik. */
		aspect-ratio: auto;
		grid-template-rows: auto auto auto auto;
	}
	.tinf-fej     { grid-row: 1; }
	.tinf-szinpad { grid-row: 2; position: static; min-height: 0; }
	.tinf-szinpad svg { height: auto; }
	.tinf-torzs   { grid-row: 3; }
	.tinf-lab     { grid-row: 4; }

	/* Az SVG-ben már nincs szöveg – a magyarázatot a panel viszi,
	   a .jelzo csoportokban csak mutatóvonalak és nyilak maradtak. */
	/* A zajszűrő minden képkockán újrarajzol; telefonon ez pazarlás, a
	   lebenyes forma szűrő nélkül is szabálytalan. */
	.tinf .gyanta { filter: none !important; }

	.tinf-fej { padding: 11px 14px 7px; gap: 7px 10px; }
	.tinf-torzs { padding: 9px 12px 0; align-items: stretch; }
	/* A kártya már nem takar semmit, ezért nem kell üveghatás sem. */
	.tinf-panel {
		padding: 12px 13px;
		border-radius: 14px;
		background: rgba(255, 255, 255, .05);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: none;
	}

	/* Korabban egysoros gorgetheto szalag volt, de a lathatatlanna valt
	   negyedik-otodik elemre senki nem gorgetett ra. A 9:16-os kereten van
	   eleg hely, ezert inkabb tordelodnek: minden valaszthato elem latszik. */
	.tinf-valto,
	.tinf-lab { flex-wrap: wrap; }
	.tinf-valto { width: 100%; margin-left: 0; justify-content: flex-start; }
	.tinf-valto button { flex: none; padding: 6px 11px; font-size: .72rem; min-height: 40px; }
	.tinf-chip  { flex: none; }
	.tinf-jatek { flex: none; margin-left: 4px; }
	.tinf-lab { padding: 7px 14px 11px; gap: 5px; }
	/* 40 px az érintőfelületek alsó határa – ugyanaz, amit a layout-audit is kér */
	.tinf-chip  { font-size: .71rem; padding: 7px 11px; min-height: 40px; }
	.tinf-jatek { font-size: .71rem; padding: 7px 11px; min-height: 40px; }
	.tinf-cta { font-size: .71rem; padding: 7px 12px; }
}

/* --- asztali: 16:9, a kártya a jobb oldalon ---------------------------- */
@media (min-width: 768px) {
	.tinf {
		/* 21:10, nem 16:9. A rajz alján 210 egységnyi üres teherbíró talaj volt,
		   a középső sáv pedig 243 px-szel magasabb volt a benne ülő kártyánál.
		   Az alacsonyabb keret ezt a holtteret vágja le. A viewBox alsó részét
		   a JS xMidYMin beállítása metszi el, így a szerkezetek és az ég sértetlen.
		   Ultrawide monitoron a max-height véd attól, hogy a keret magasabb
		   legyen a képernyőnél. */
		aspect-ratio: 21 / 10;
		/* 768–950 px között a 21:10-es keret 339 px magas lenne, a
		   szövegkártyának viszont 166 px kell – a törzs-sorra csak 93 px
		   jutott, és a kártya kilógott. A min-height csak ebben a szűk
		   sávban hat: 1024 px-en a keret már 461 px magas. */
		min-height: 430px;
		max-height: 100vh;
	}
	.tinf-fej { padding: 22px 34px 12px; gap: 14px 26px; }
	.tinf-torzs { align-items: center; padding: 0 34px; }
	.tinf-panel { width: clamp(300px, 34%, 460px); padding: 20px 22px; }
	/* A het csip + az ARAJANLAT + a lejatszas gomb egy sorba fer: 1050 px
	   kellett volna, 1044 volt – a szukebb koz es belso margo megoldja. */
	.tinf-lab { padding: 14px 34px 22px; gap: 8px; }
	/* A zold CTA ne tapadjon a csipekhez: auto bal margoval a csipek es a
	   lejatszas gomb kozott maradt szabad helybe csusszan. Az auto margo a
	   sortorest nem befolyasolja, ezert szuk sorban sem tor le - fix ertekkel
	   1024 px-en lecsuszott volna a masodik sorba. */
	.tinf-cta { margin-left: auto; }
	.tinf-chip, .tinf-jatek { font-size: .8rem; padding: 9px 14px; }
}

@media (min-width: 1400px) {
	.tinf-fej { padding: 30px 48px 14px; }
	.tinf-torzs { padding: 0 48px; }
	.tinf-panel { padding: 24px 26px; }
	.tinf-lab { padding: 16px 48px 26px; }
}


/* --- csökkentett mozgás: minden átmenet és ciklus kikapcsol ------------- */
@media (prefers-reduced-motion: reduce) {
	.tinf *,
	.tinf *::before,
	.tinf *::after {
		transition-duration: .001ms !important;
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* --- nyomtatás ---------------------------------------------------------- */
@media print {
	.tinf { display: none; }
}