/* ==============================================
   MFHU Theme — Components (buttons, labels, prism-text)
   ============================================== */

/* ---- Amorf utility osztály ---- */
/* "Élő Amorf" rendszer — 2 fázis:
   1. Fly-in: wc-a osztály (fly.css) kezeli az opacity + transform animációt
   2. Lélegzés: .amorf-live osztály (JS adja hozzá fly-in UTÁN)
   Az .amorf alap osztály NEM tartalmaz animációt — így nem ütközik a fly-in-nel! */
.amorf,
[data-amorf-done] {
	position: relative;
	overflow: hidden;
	clip-path: var(--amorf-clip, polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%));
	transition: clip-path 0.5s ease;
}

/* Lélegzés — JS adja hozzá a fly-in animáció befejezése UTÁN */
.amorf-live {
	/* NINCS transform reset! Az inline style (JS által rögzített) kezeli */
	animation: amorfBreathe 20s ease-in-out infinite;
	animation-delay: var(--amorf-delay, 0s);
	animation-play-state: var(--amorf-play, running);
}

/* Glow blob — keringő, élő fényfolt */
.amorf::after,
[data-amorf-done]::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	width: 180px;
	height: 180px;
	filter: blur(60px);
	top: -30px;
	right: -30px;
	background: var(--amorf-glow, var(--prism-cyan));
	opacity: 0.12;
	pointer-events: none;
	transition: opacity 0.5s, scale 0.5s;
}

/* Glow drift — csak .amorf-live esetén (fly-in után!) */
.amorf-live::after {
	animation: glowDrift 14s ease-in-out infinite;
	animation-delay: var(--glow-delay, 0s);
	animation-play-state: var(--amorf-play, running);
}

/* Hover: glow blob megnő + felerősödik */
.amorf:hover::after,
[data-amorf-done]:hover::after {
	opacity: 0.25;
	scale: 1.4;
}

/* Desktop lélegzés: 2–4% csúcseltolás, 7 alakon át ciklikusan */
/* 0% és 100% azonos (smooth loop), JS állítja be a start állapotot (glitch-mentes) */
@keyframes amorfBreathe {
	0%, 100% { clip-path: polygon(0% 3%,   97% 0%,   100% 96%, 2%  100%); }
	12.5%    { clip-path: polygon(2% 0%,   100% 3%,  98% 100%, 0%   97%); }
	25%      { clip-path: polygon(0% 4%,   96% 0%,   100% 97%, 3%  100%); }
	37.5%    { clip-path: polygon(3% 0%,   100% 2%,  97% 100%, 0%   98%); }
	50%      { clip-path: polygon(1% 3%,   98% 0%,   100% 97%, 0%  100%); }
	62.5%    { clip-path: polygon(4% 0%,   100% 3%,  96% 100%, 0%   97%); }
	75%      { clip-path: polygon(0% 2%,   97% 0%,   100% 98%, 3%  100%); }
	87.5%    { clip-path: polygon(2% 0%,   100% 4%,  98%  96%, 0%  100%); }
}

/* Mobil lélegzés: 1–2% csúcseltolás (finomabb, tartalom-barát) */
@media (max-width: 767px) {
	@keyframes amorfBreathe {
		/* 0% és 100% azonos (smooth loop), JS állítja be a start állapotot (glitch-mentes) */
		0%, 100% { clip-path: polygon(0% 2%,   98% 0%,   100% 98%, 1%  100%); }
		16.7%    { clip-path: polygon(1% 0%,   100% 2%,  99% 100%, 0%   98%); }
		33.3%    { clip-path: polygon(0% 2%,   98% 0%,   100% 99%, 1%  100%); }
		50%      { clip-path: polygon(2% 0%,   100% 1%,  98% 100%, 0%   99%); }
		66.7%    { clip-path: polygon(1% 2%,   99% 0%,   100% 98%, 0%  100%); }
		83.3%    { clip-path: polygon(2% 0%,   100% 2%,  97% 100%, 0%   98%); }
	}
}

/* Glow blob keringési útvonal — organikus, nem körkörös */
@keyframes glowDrift {
	0%, 100% { translate: 0 0; }
	25% { translate: -70px 40px; }
	50% { translate: -40px 80px; }
	75% { translate: -90px 20px; }
}

/* ---- Prismatic gradient text — Singularity ---- */
.prism-text {
	background: linear-gradient(135deg,
			var(--prism-blue) 0%,
			var(--prism-green) 17%,
			var(--prism-violet) 34%,
			var(--prism-magenta) 50%,
			var(--prism-red) 67%,
			var(--prism-yellow) 84%,
			var(--prism-blue) 100%);
	background-size: 200% 200%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: prismShift 6s ease infinite;
}

@keyframes prismShift {

	0%,
	100% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}
}

/* ---- Section labels & titles ---- */
.slbl {
	font-family: var(--mono);
	font-size: 0.65rem;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	margin-bottom: 0.8rem;
	display: block;
}

.sttl {
	font-family: var(--font);
	font-weight: 300;
	font-size: clamp(1.8rem, 4.5vw, 3rem);
	line-height: 1.15;
	margin-bottom: 2.5rem;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

/* ---- Prism button ---- */
.btn-prism {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.8rem 2rem;
	font-family: var(--mono);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
	border: none;
	cursor: pointer;
	color: var(--bg);
	background: linear-gradient(135deg, var(--prism-cyan), var(--prism-blue), var(--prism-violet));
	clip-path: polygon(2% 0%, 100% 4%, 98% 100%, 0% 96%);
	transition: all 0.4s var(--ease);
}

.btn-prism:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 30px rgba(0, 170, 255, 0.2), 0 4px 15px rgba(136, 0, 255, 0.15);
}

/* ---- Ghost button ---- */
.btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.8rem 2rem;
	font-family: var(--mono);
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	color: var(--mid);
	background: transparent;
	border: 1px solid var(--border);
	clip-path: polygon(0% 4%, 98% 0%, 100% 96%, 2% 100%);
	transition: all 0.4s var(--ease);
}

.btn-ghost:hover {
	color: var(--text);
	border-color: rgba(255, 255, 255, 0.12);
	transform: translateY(-2px);
}

/* Accessible focus (clip-path clips outline) */
.btn-prism:focus-visible,
.btn-ghost:focus-visible {
	box-shadow: 0 0 0 3px var(--prism-cyan), 0 0 12px rgba(0, 170, 255, 0.3);
	outline: none;
}