/* ==========================================================================
   Misiunea — pilonii (.et), după Figma.
   Stâlpul din Figma (118 × 330): capitel cu fisuri, fusul rupt (ruptură diferită la fiecare), ciotul, soclul.
   În ruptură stă numele pilonului, vertical (citit de jos în sus):
   Foco 23 · mov #483041 · un rând Regular (400), unul Black (900) — excepție de secțiune notată în manual.
   Dedesubt, Temelia: o lespede întreagă în nuanțele de gri ale bazei stâlpilor (#E6DBD9 / #EDE7E4),
   cu „Temelia Isus Hristos” în aceeași voce ca numele pilonilor (fără animație) și legătura
   „Cine este Isus” (acțiunea comună .elim-act) spre pagina despre Isus.
   Prezentarea: numele pasului activ se scrie literă cu literă (din gri în mov).
   ========================================================================== */
.et {
	--et-d: 9000ms;          /* cât se încarcă un nume (= LONG din piloni.js) */
	--pw: 118px;             /* lățimea stâlpului (Figma) */
	--gap: 72px;             /* între stâlpii unei grupe */
	--gap-g: 136px;          /* între cele două grupe */
	--w: calc(var(--pw) * 6 + var(--gap) * 4 + var(--gap-g));   /* lățimea rândului de stâlpi */

	--plum: #483041;
	--ghost: #CDBFBC;        /* literele încă neîncărcate */
	--gold: #DAA769;
	--line: #E2D6D3;
	--ease: cubic-bezier(.22, .8, .2, 1);
	position: relative;
	font-family: "macha", sans-serif;
}
.et *, .et *::before, .et *::after { box-sizing: border-box; }
/* resetul e doar pentru pași; controalele rotunde păstrează stilul comun (.elim-round: contur auriu) */
.et .et-step { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
.et .et-step:hover, .et .et-step:focus { background: none; outline: none; }

/* ---------- Scena: biserica, pilonii, temelia ---------- */
.et-stage { display: flex; flex-direction: column; align-items: center; }

/* ---------- Rândul de stâlpi ---------- */
.et-row { display: flex; justify-content: center; gap: var(--gap-g); }
.et-cols { display: flex; gap: var(--gap); }
.et-col {
	position: relative;
	display: block !important;
	width: var(--pw);
	aspect-ratio: 118 / 330;
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .8s var(--ease), transform .8s var(--ease);
	transition-delay: calc(var(--i) * .1s);
}
.et.is-built .et-col { opacity: 1; transform: none; }
.et-col__img { display: block; width: 100%; height: 100%; overflow: visible; }

/* numele, în ruptură: centrat pe fus (46,6 %); înălțimea (top) vine din piloni.php, la mijlocul golului */
.et-col__name {
	position: absolute;
	left: 46.6%;
	top: 56.7%;
	transform: translate(-50%, -50%) rotate(-90deg);
	font-size: calc(var(--pw) * .195);   /* 23px la 118px (Figma) */
	white-space: nowrap;
	pointer-events: none;
}
.et-col__name .et-load { display: block; text-align: left; font-size: 1em; }
.et-col__name .et-load > * {
	display: block;
	font-family: "Foco", sans-serif;
	font-size: inherit;
	line-height: 1.1;
	letter-spacing: 0;
}
.et-col__name .et-load > span { font-weight: 400; }
.et-col__name .et-load > b { font-weight: 900; }

/* ---------- Scrierea numelui, literă cu literă ---------- */
.et-w i { font-style: normal; color: var(--plum); }
/* numele pilonilor: deschise la început; colorate după ce pilonul a fost văzut (piloni.js: .is-seen / .is-lit) */
.et-col .et-w i { color: var(--ghost); transition: color .5s ease; }
.et-col.is-seen .et-w i, .et-col .et-w i.is-lit { color: var(--plum); }
/* fiecare literă se umple lent (1,8 s) și pornește înaintea ca vecina să fi terminat:
   culoarea curge ca un val moale de-a lungul expresiei */
.et-step.is-loading .et-w i {
	animation: etLetter 1.8s cubic-bezier(.45, .05, .35, 1) both;
	animation-delay: calc(var(--k) * (var(--et-d) - 1800ms) / var(--n));
}
@keyframes etLetter {
	from { color: var(--ghost); }
	to   { color: var(--plum); }
}
.et.is-paused .et-step.is-loading .et-w i,
.et:not(.is-playing) .et-step.is-loading .et-w i { animation-play-state: paused; }
/* suprafața ruptă de pe ciot */
.et-col__rupt { fill: #77536C; }
.et-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* focus de la tastatură: o liniuță aurie deasupra capitelului */
.et-col:focus-visible::after { content: ""; position: absolute; left: 22%; right: 22%; top: -12px; height: 2px; background: var(--gold); }

/* ---------- Temelia: o lespede întreagă (stâlpii sunt rupți, temelia nu) — legătura spre pagina despre Isus ---------- */
.et .et-found {
	display: block;
	width: calc(var(--w) + 40px);
	max-width: 100%;
	color: var(--plum);
	text-decoration: none;
	opacity: 0;
	transition: opacity .9s var(--ease) .3s;
}
.et.is-built .et-found { opacity: 1; }
.et .et-found { position: relative; isolation: isolate; margin-top: 16px; }   /* o pauză între piloni și temelie */

/* ---------- Loaderul din Figma: linia de 2 px pe toată lățimea ecranului, în spatele temeliei,
   aliniată cu buza ei; se umple cu mov, de la stânga la dreapta, cât durează pilonul activ ---------- */
.et-loader {
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 2px;                 /* mijlocul buzei (6 px) */
	width: 100vw;
	height: 2px;
	transform: translateX(-50%);
	background: #E2D6D3;
	overflow: hidden;
}
.et-loader__fill {
	display: block;
	height: 100%;
	background: var(--plum);
	transform: scaleX(0);
	transform-origin: left;
}
.et.is-playing .et-loader__fill.is-ticking { animation: etTick2 var(--tick, var(--et-d)) linear forwards; }
.et.is-paused .et-loader__fill.is-ticking { animation-play-state: paused; }
@keyframes etTick2 { to { transform: scaleX(1); } }
/* buza și corpul: griurile bazei stâlpilor, cu lumina venind din aceeași parte */
.et-found__buza { display: block; height: 6px; margin: 0 10px; border-radius: 4px; background: linear-gradient(90deg, #EDE7E4, #E6DBD9); }
.et-found__lespede {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 52px;
	margin-top: 3px;
	border-radius: 14px;
	/* piatră: granulat foarte fin (zgomot SVG, în mov) peste griurile bazei stâlpilor,
	   plus o lumină discretă pe muchia de sus */
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .28 0 0 0 0 .19 0 0 0 0 .25 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"),
		linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 40%),
		linear-gradient(90deg, #E6DBD9, #EDE7E4);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(72, 48, 65, .06);
	transition: filter .3s var(--ease);
}
.et-found__t {
	font-family: "Foco", sans-serif;
	font-size: 23px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	white-space: nowrap;
	color: var(--plum);
}
.et-found__t b { font-weight: 900; }
/* legătura spre pagina despre Isus: textul pe centru, „Cine este El?” în capătul din dreapta;
   toată lespedea se poate apăsa (::after), iar cercul se umple la hover pe ea */
.et .et-found__go { color: var(--plum); text-decoration: none; }
.et-found__go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.et-found__act { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.et-found__go:hover .et-found__act .elim-act__c,
.et-found__go:focus-visible .et-found__act .elim-act__c { background: var(--elim-gold, #DAA769); }
.et-found__go:hover .et-found__act .elim-act__c::before,
.et-found__go:focus-visible .et-found__act .elim-act__c::before { background: var(--elim-ink, #483041); }
.et-found__go:focus-visible { outline: none; }
.et-found__lespede:focus-within { outline: 2px solid var(--gold); outline-offset: 4px; }

/* comenzile prezentării: în afara temeliei, pe spațiul alb din dreapta ei (unde încap: ≥ 1620 px);
   mai îngust — sub temelie, aliniate la dreapta; pe telefon — sub ea, pe centru */
.et-found .et-nav {
	position: absolute;
	left: calc(100% + 24px);
	top: 35px;                 /* mijlocul lespezii: buza 6 + 3 + 52 / 2 */
	transform: translateY(-50%);
	margin: 0;
	gap: 8px;
	white-space: nowrap;
}
@media (max-width: 1619px) {
	.et-found .et-nav { position: static; transform: none; justify-content: flex-end; margin-top: 14px; }
}

/* ---------- Grupele (sub temelie, câte una sub fiecare trei stâlpi) ---------- */
.et-groups { display: flex; justify-content: center; gap: var(--gap-g); margin-top: 20px; }
.et-groups .et-group__k { width: calc(var(--pw) * 3 + var(--gap) * 2); }
.et-group__k--sus { display: none; }
.et-group__k {
	position: relative;
	margin: 18px 0 0 !important;
	padding-top: 16px;
	text-align: center;
	font-family: "Montserrat", sans-serif;
	font-weight: 800;
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #8F6E68;
}
.et-group__k::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 8px;
	border: 1px solid var(--line);
	border-top: 0;
	border-radius: 0 0 8px 8px;
}

/* ---------- Explicația ---------- */
.et-panels { display: grid; margin-top: 48px; text-align: center; }
/* toate explicațiile stau una peste alta: înălțimea e a celei mai lungi, deci pagina nu mai sare */
/* trecerea e pe rând, nu suprapusă: cea veche dispare repede (.2 s), apoi apare cea nouă */
.et-panel { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; }
.et-panel.is-off { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .2s ease-out, visibility 0s linear .2s; }
.et-panel.is-in { animation: etIn .55s var(--ease) .22s both; }
.et-panel.is-out { animation: etOut .2s ease-out both; }
@keyframes etOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes etIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* explicația are același stil ca panoul din „Drumul unei credințe” (Cultul penticostal, .icp-way):
   etichetă aurie 12 · titlu Foco 900 38 / 1.1 mov · text de citit · acțiune · comenzi la 36 px */
.et-panel__k { margin: 0 0 8px !important; }
.et-panel__head {
	margin: 0 0 16px !important;
	max-width: 88%;           /* ca declarația de sus (.elim-t-statement) */
	font-family: "foco", sans-serif;
	font-weight: 900;
	font-size: 38px;
	line-height: 1.1;
	color: var(--plum);
	text-wrap: balance;
}
.et-panel__text { margin: 0 auto 22px !important; max-width: 660px; text-align: center; text-wrap: pretty; }

/* ---------- Comenzi ---------- */
.et-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 36px; }
.et-count { font-family: "macha", sans-serif; font-weight: 500; font-size: 15px; color: #82717D; font-variant-numeric: tabular-nums; margin-left: 6px; }
.et-count b { font-weight: 700; color: var(--plum); }
.et .et-play i {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	background: var(--plum);
	/* pauză (cât rulează) / play (oprit): iconițele Haicon, ca săgețile */
	-webkit-mask: var(--haicon-pause) center / contain no-repeat;
	        mask: var(--haicon-pause) center / contain no-repeat;
}
.et .et-play[aria-pressed="false"] i {
	-webkit-mask-image: var(--haicon-play);
	        mask-image: var(--haicon-play);
}
.et .et-play:hover i { background: #1B141A; }
.et-ring { position: absolute; inset: -1px; width: 40px; height: 40px; transform: rotate(-90deg); pointer-events: none; }
.et-ring circle { fill: none; stroke: #FF8C1A; stroke-width: 2; stroke-dasharray: 122.6; stroke-dashoffset: 122.6; }
.et.is-playing .et-ring circle.is-ticking { animation: etTick var(--tick, var(--et-d)) linear forwards; }
.et.is-paused .et-ring circle.is-ticking { animation-play-state: paused; }
@keyframes etTick { to { stroke-dashoffset: 0; } }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) { .et { --gap: 48px; --gap-g: 96px; } .et-panel__head { font-size: 32px; } }
@media (max-width: 991px)  { .et { --pw: 96px; --gap: 28px; --gap-g: 56px; } }
/* tabletă: rândul (6 stâlpi) încape între marginile gridului (32 px) */
@media (min-width: 992px) and (max-width: 1100px) { .et { --gap: 36px; --gap-g: 72px; } }
@media (min-width: 768px) and (max-width: 860px) { .et { --pw: 88px; --gap: 22px; --gap-g: 40px; } }
@media (min-width: 861px) and (max-width: 991px) { .et { --pw: 90px; --gap: 24px; --gap-g: 48px; } }
/* telefon: grupele una sub alta, câte trei stâlpi */
@media (max-width: 767px) {
	.et { --pw: 92px; --gap: 22px; --w: calc(var(--pw) * 3 + var(--gap) * 2); }
	.et-row { flex-direction: column; align-items: center; gap: 22px; }
	/* pe telefon, fiecare rând își are eticheta deasupra; dedesubt, temelia comună */
	.et-group__k--sus { display: block; margin: 0 0 24px !important; padding: 0; }
	.et-group__k--sus::before { content: none; }
	.et-groups { display: none; }
	.et-found__lespede { flex-direction: column; gap: 8px; height: auto; padding: 14px 0; border-radius: 12px; }
	.et .et-found { margin-top: 12px; }
	.et .et-found__go { display: flex; flex-direction: column; align-items: center; gap: 8px; }
	.et-found__act { position: static; transform: none; }
	.et-found__t { font-size: 20px; }
	.et-found .et-nav { justify-content: center; }
	.et-panels { margin-top: 32px; }
	.et-panel__head { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
	.et *, .et *::before, .et *::after { transition: none !important; animation: none !important; }
	.et-col .et-w i { color: var(--plum); }   /* fără prezentare: numele sunt colorate de la început */
}