/*! Cat: macskás logó intró (Elementor widget)
 *  Copyright (c) 2026 NectoSys. Minden jog fenntartva.
 *  Csak licencelt weboldalon használható; továbbadása, eladása tilos. Részletek: LICENSE.txt */

.logo-intro {
	--li-entrance-duration: 1000ms;
	--li-hover-duration: 900ms;
	--li-cta-delay: 1400ms;
	--li-gap: 24px;
	--li-glow: var(--tenyeszet-accent, rgba(255, 255, 255, 0.55));

	/* Alapszínek a „Tenyészet színvilág” palettából; a widget stílusvezérlői felülírják. */
	background-color: var(--tenyeszet-intro-bg, transparent);
	background-image: linear-gradient(160deg, var(--tenyeszet-intro-bg, transparent) 0%, var(--tenyeszet-intro-bg2, transparent) 100%);
	color: var(--tenyeszet-intro-text, inherit);
	font-family: var(--tenyeszet-font-body, inherit);

	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--li-gap);
	min-height: 100vh;
	padding: 40px 20px;
	box-sizing: border-box;
	text-align: center;
	overflow: hidden;
}

/* ---------- Teljes képernyős fedőréteg: az intró a meglévő oldal előtt ---------- */

.logo-intro.li-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	min-height: 100vh;
	min-height: 100dvh;
	overflow-y: auto;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.8s ease, visibility 0s linear 0s;
}

.logo-intro.li-overlay.li-closing {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}

/* Amíg az intró látszik, az alatta lévő oldal nem görgethető. */
html.li-overlay-open,
html.li-overlay-open body {
	overflow: hidden;
}

/* Ha már látta (ugyanabban a böngészőfülben), fel se villanjon. */
html.li-intro-seen .logo-intro.li-overlay {
	display: none;
}

/* Az Elementor szerkesztőben normál szekcióként látszik, hogy szerkeszthető legyen. */
.elementor-editor-active .logo-intro.li-overlay {
	position: relative;
	z-index: auto;
}

/* Ha a widgetnél saját háttér van beállítva, a paletta színátmenete kikapcsol, és az Elementor beállítása érvényes. */
.logo-intro.li-own-bg {
	background-color: transparent;
	background-image: none;
}

/* ---------- Logó ---------- */

.logo-intro .li-logo {
	display: inline-block;
	line-height: 0;
	max-width: 100%;
	-webkit-tap-highlight-color: transparent;
}

.logo-intro.li-has-sound .li-logo[role="button"] {
	cursor: pointer;
}

.logo-intro .li-logo:focus-visible {
	outline: 2px dashed currentColor;
	outline-offset: 8px;
	border-radius: 8px;
}

.logo-intro .li-logo-idle,
.logo-intro .li-logo-hover {
	display: inline-block;
	max-width: 100%;
	transform-origin: 50% 50%;
	will-change: transform;
}

.logo-intro .li-logo-img {
	display: block;
	width: 280px;
	max-width: 100%;
	height: auto;
	user-select: none;
	-webkit-user-drag: none;
}

/* ---------- Megjelenés (entrance) ---------- */

.logo-intro .li-logo {
	animation-duration: var(--li-entrance-duration);
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.li-entrance-fade .li-logo { animation-name: li-in-fade; }
.li-entrance-zoom .li-logo { animation-name: li-in-zoom; }
.li-entrance-drop .li-logo { animation-name: li-in-drop; animation-timing-function: linear; }
.li-entrance-rise .li-logo { animation-name: li-in-rise; }
.li-entrance-spin .li-logo { animation-name: li-in-spin; }
.li-entrance-blur .li-logo { animation-name: li-in-blur; }
.li-entrance-pounce .li-logo { animation-name: li-in-pounce; animation-timing-function: linear; transform-origin: 50% 100%; }
.li-entrance-peek .li-logo { animation-name: li-in-peek; transform-origin: 50% 100%; }
.li-entrance-slide .li-logo { animation-name: li-in-slide; animation-timing-function: linear; }
.li-entrance-slide-right .li-logo { animation-name: li-in-slide-right; animation-timing-function: linear; }
/* Automatikus: alapból beúszik; ha a JS kerek logót talál, hozzáadja a li-entrance-roll osztályt (az alatta lévő szabály erősebb). */
.li-entrance-auto .li-logo { animation-name: li-in-slide; animation-timing-function: linear; }
.li-entrance-roll .li-logo { animation-name: li-in-roll; animation-timing-function: linear; }
.li-entrance-roll-right .li-logo { animation-name: li-in-roll-right; animation-timing-function: linear; }

/*
 * Begurulás: a százalékos eltolás a logó saját szélességéhez mérődik, így bármekkora
 * logónál valódi gurulás lesz. 3,2 logószélesség = 6,4 sugár = 6,4 rad ≈ 367 fok.
 */
@keyframes li-in-roll {
	0%   { opacity: 0; transform: translateX(-320%) rotate(-367deg); animation-timing-function: cubic-bezier(0.25, 0.1, 0.35, 1); }
	12%  { opacity: 1; }
	80%  { transform: translateX(8%) rotate(9deg); animation-timing-function: ease-in-out; }
	92%  { transform: translateX(-3%) rotate(-3deg); animation-timing-function: ease-in-out; }
	100% { opacity: 1; transform: translateX(0) rotate(0); }
}

/* Beúszás: forgatás nélkül érkezik oldalról, a végén kicsit túlfut, majd visszarugózik. */
@keyframes li-in-slide {
	0%   { opacity: 0; transform: translateX(-60vw); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
	15%  { opacity: 1; }
	75%  { transform: translateX(3%); animation-timing-function: ease-in-out; }
	90%  { transform: translateX(-1%); animation-timing-function: ease-in-out; }
	100% { opacity: 1; transform: translateX(0); }
}

@keyframes li-in-slide-right {
	0%   { opacity: 0; transform: translateX(60vw); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
	15%  { opacity: 1; }
	75%  { transform: translateX(-3%); animation-timing-function: ease-in-out; }
	90%  { transform: translateX(1%); animation-timing-function: ease-in-out; }
	100% { opacity: 1; transform: translateX(0); }
}

@keyframes li-in-roll-right {
	0%   { opacity: 0; transform: translateX(320%) rotate(367deg); animation-timing-function: cubic-bezier(0.25, 0.1, 0.35, 1); }
	12%  { opacity: 1; }
	80%  { transform: translateX(-8%) rotate(-9deg); animation-timing-function: ease-in-out; }
	92%  { transform: translateX(3%) rotate(3deg); animation-timing-function: ease-in-out; }
	100% { opacity: 1; transform: translateX(0) rotate(0); }
}

/* Macskaugrás: lelapul, elrugaszkodik, puhán landol. */
@keyframes li-in-pounce {
	0%   { opacity: 0; transform: translate(-30vw, 10vh) scale(0.6, 0.6); }
	15%  { opacity: 1; transform: translate(-30vw, 10vh) scale(0.8, 0.55); animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1); }
	55%  { transform: translate(-6vw, -12vh) rotate(-8deg) scale(0.95, 1.08); animation-timing-function: cubic-bezier(0.4, 0, 0.8, 0.6); }
	78%  { transform: translate(0, 0) rotate(2deg) scale(1.12, 0.86); animation-timing-function: ease-out; }
	90%  { transform: translate(0, -8px) scale(0.97, 1.03); }
	100% { opacity: 1; transform: translate(0, 0) scale(1, 1); }
}

/* Kikukucskálás: alulról, kíváncsian billegve bújik elő. */
@keyframes li-in-peek {
	0%   { opacity: 0; transform: translateY(45%) scale(0.85); clip-path: inset(0 0 100% 0); }
	40%  { opacity: 1; transform: translateY(20%) rotate(-6deg); clip-path: inset(0 0 0 0); }
	60%  { transform: translateY(12%) rotate(5deg); }
	80%  { transform: translateY(-4%) rotate(-2deg); }
	100% { opacity: 1; transform: translateY(0) rotate(0); clip-path: inset(0 0 0 0); }
}

@keyframes li-in-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes li-in-zoom {
	0%   { opacity: 0; transform: scale(0.3); }
	60%  { opacity: 1; transform: scale(1.08); }
	100% { opacity: 1; transform: scale(1); }
}

@keyframes li-in-drop {
	0%   { opacity: 0; transform: translateY(-60vh); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
	55%  { opacity: 1; transform: translateY(0) scale(1.06, 0.92); animation-timing-function: ease-out; }
	72%  { transform: translateY(-28px) scale(0.98, 1.02); animation-timing-function: ease-in; }
	86%  { transform: translateY(0) scale(1.02, 0.98); animation-timing-function: ease-out; }
	93%  { transform: translateY(-6px); animation-timing-function: ease-in; }
	100% { opacity: 1; transform: translateY(0); }
}

@keyframes li-in-rise {
	from { opacity: 0; transform: translateY(60px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes li-in-spin {
	from { opacity: 0; transform: rotate(-200deg) scale(0); }
	to   { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes li-in-blur {
	from { opacity: 0; filter: blur(24px); transform: scale(1.15); }
	to   { opacity: 1; filter: blur(0); transform: scale(1); }
}

/* ---------- Nyugalmi mozgás (idle) – a megjelenés után indul ---------- */

.li-idle-float .li-logo-idle   { animation: li-idle-float 4s ease-in-out var(--li-entrance-duration) infinite; }
.li-idle-breathe .li-logo-idle { animation: li-idle-breathe 3.5s ease-in-out var(--li-entrance-duration) infinite; }
.li-idle-sway .li-logo-idle    { animation: li-idle-sway 5s ease-in-out var(--li-entrance-duration) infinite; transform-origin: 50% 100%; }
.li-entrance-none .li-logo-idle { animation-delay: 0s; }

@keyframes li-idle-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-12px); }
}

@keyframes li-idle-breathe {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.04); }
}

@keyframes li-idle-sway {
	0%, 100% { transform: rotate(-2.5deg); }
	50%      { transform: rotate(2.5deg); }
}

/* ---------- Hover animációk (JS adja hozzá az osztályt) ---------- */

.logo-intro .li-logo-hover[class*="li-anim-"] {
	animation-duration: var(--li-hover-duration);
	animation-fill-mode: both;
	animation-timing-function: ease;
}

.li-anim-wiggle    { animation-name: li-wiggle; }
.li-anim-headtilt  { animation-name: li-headtilt; transform-origin: 50% 85% !important; }
.li-anim-hop       { animation-name: li-hop; transform-origin: 50% 100% !important; }
.li-anim-bounce    { animation-name: li-bounce; transform-origin: 50% 100% !important; }
.li-anim-shake     { animation-name: li-shake; }
.li-anim-pulse     { animation-name: li-pulse; }
.li-anim-heartbeat { animation-name: li-heartbeat; }
.li-anim-swing     { animation-name: li-swing; transform-origin: 50% 0 !important; }
.li-anim-tada      { animation-name: li-tada; }
.li-anim-jello     { animation-name: li-jello; }
.li-anim-rubber    { animation-name: li-rubber; }
.li-anim-spin      { animation-name: li-spin; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1) !important; }
.li-anim-flip      { animation-name: li-flip; backface-visibility: visible; }

@keyframes li-wiggle {
	0%, 100% { transform: rotate(0); }
	15% { transform: rotate(-9deg); }
	30% { transform: rotate(8deg); }
	45% { transform: rotate(-6deg); }
	60% { transform: rotate(4deg); }
	75% { transform: rotate(-2deg); }
}

@keyframes li-headtilt {
	0%   { transform: rotate(0); }
	25%  { transform: rotate(-13deg) translateX(-4px); }
	55%  { transform: rotate(-13deg) translateX(-4px); }
	70%  { transform: rotate(4deg); }
	85%  { transform: rotate(-2deg); }
	100% { transform: rotate(0); }
}

@keyframes li-hop {
	0%   { transform: translateY(0) scale(1, 1); }
	15%  { transform: translateY(0) scale(1.12, 0.86); }
	40%  { transform: translateY(-45px) scale(0.94, 1.08); }
	58%  { transform: translateY(-48px) scale(1, 1); }
	80%  { transform: translateY(0) scale(1.1, 0.9); }
	90%  { transform: translateY(0) scale(0.97, 1.03); }
	100% { transform: translateY(0) scale(1, 1); }
}

@keyframes li-bounce {
	0%, 20%, 53%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1); }
	40%, 43% { transform: translateY(-32px) scaleY(1.06); animation-timing-function: cubic-bezier(0.75, 0.05, 0.85, 0.06); }
	70%      { transform: translateY(-15px) scaleY(1.03); animation-timing-function: cubic-bezier(0.75, 0.05, 0.85, 0.06); }
	80%      { transform: translateY(0) scaleY(0.95); }
	90%      { transform: translateY(-4px) scaleY(1.01); }
}

@keyframes li-shake {
	0%, 100% { transform: translateX(0); }
	10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
	20%, 40%, 60%, 80% { transform: translateX(8px); }
}

@keyframes li-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.12); }
}

@keyframes li-heartbeat {
	0%   { transform: scale(1); }
	14%  { transform: scale(1.15); }
	28%  { transform: scale(1); }
	42%  { transform: scale(1.15); }
	70%  { transform: scale(1); }
	100% { transform: scale(1); }
}

@keyframes li-swing {
	0%   { transform: rotate(0); }
	20%  { transform: rotate(15deg); }
	40%  { transform: rotate(-10deg); }
	60%  { transform: rotate(5deg); }
	80%  { transform: rotate(-5deg); }
	100% { transform: rotate(0); }
}

@keyframes li-tada {
	0%   { transform: scale(1) rotate(0); }
	10%, 20% { transform: scale(0.9) rotate(-3deg); }
	30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
	40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
	100% { transform: scale(1) rotate(0); }
}

@keyframes li-jello {
	0%, 11.1%, 100% { transform: none; }
	22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
	33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
	44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
	55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
	66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
	77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }
	88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
}

@keyframes li-rubber {
	0%   { transform: scale3d(1, 1, 1); }
	30%  { transform: scale3d(1.25, 0.75, 1); }
	40%  { transform: scale3d(0.75, 1.25, 1); }
	50%  { transform: scale3d(1.15, 0.85, 1); }
	65%  { transform: scale3d(0.95, 1.05, 1); }
	75%  { transform: scale3d(1.05, 0.95, 1); }
	100% { transform: scale3d(1, 1, 1); }
}

@keyframes li-spin {
	from { transform: rotate(0); }
	to   { transform: rotate(360deg); }
}

@keyframes li-flip {
	from { transform: perspective(700px) rotateY(0); }
	to   { transform: perspective(700px) rotateY(360deg); }
}

/* ---------- Tipp (ha a böngésző letiltja a hangot) ---------- */

.logo-intro .li-hint {
	margin: calc(var(--li-gap) * -0.5) 0 0;
	font-size: 14px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}

.logo-intro .li-hint.is-visible {
	opacity: 0.85;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

/* ---------- Cím, alcím ---------- */

.logo-intro .li-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.logo-intro .li-title,
.logo-intro .li-subtitle {
	margin: 0;
}

.logo-intro:not(.li-entrance-none) .li-title,
.logo-intro:not(.li-entrance-none) .li-subtitle {
	animation: li-fade-up 0.8s ease both;
	animation-delay: calc(var(--li-entrance-duration) * 0.6);
}

.logo-intro:not(.li-entrance-none) .li-subtitle {
	animation-delay: calc(var(--li-entrance-duration) * 0.6 + 150ms);
}

@keyframes li-fade-up {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------- CTA gomb ---------- */

.logo-intro .li-cta-wrap {
	animation: li-fade-up 0.7s ease var(--li-cta-delay) both;
}

.logo-intro .li-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 14px 36px;
	border-radius: 999px;
	background-color: var(--tenyeszet-cta-bg, #1f1f1f);
	color: var(--tenyeszet-cta-text, #fff);
	fill: var(--tenyeszet-cta-text, #fff);
	font-weight: 600;
	font-size: 17px;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

/* Egyes témák (pl. Astra) minden tartalmi linket aláhúznak; a gombon ez nem kell. */
.logo-intro a.li-cta,
.logo-intro a.li-cta:hover,
.logo-intro a.li-cta:focus,
.logo-intro a.li-cta .li-cta-text {
	text-decoration: none !important;
}

.logo-intro .li-cta:hover,
.logo-intro .li-cta:focus-visible {
	transform: translateY(-2px);
	background-color: var(--tenyeszet-cta-hover-bg, #1f1f1f);
	color: var(--tenyeszet-cta-hover-text, #fff);
	fill: var(--tenyeszet-cta-hover-text, #fff);
}

.logo-intro .li-cta-icon {
	display: inline-flex;
	transition: transform 0.25s ease;
}

.logo-intro .li-cta-icon svg {
	width: 1em;
	height: 1em;
}

.logo-intro .li-cta:hover .li-cta-icon {
	transform: translateX(4px);
}

.li-cta-anim-pulse .li-cta {
	animation: li-cta-pulse 2.2s ease-out calc(var(--li-cta-delay) + 700ms) infinite;
}

.li-cta-anim-glow .li-cta {
	animation: li-cta-glow 2.6s ease-in-out calc(var(--li-cta-delay) + 700ms) infinite;
}

.li-cta-anim-bounce .li-cta-wrap {
	animation: li-fade-up 0.7s ease var(--li-cta-delay) both,
		li-cta-bounce 2.4s ease-in-out calc(var(--li-cta-delay) + 1.2s) infinite;
}

@keyframes li-cta-pulse {
	0%   { box-shadow: 0 0 0 0 var(--li-glow); }
	70%  { box-shadow: 0 0 0 16px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes li-cta-glow {
	0%, 100% { box-shadow: 0 0 6px 0 var(--li-glow); }
	50%      { box-shadow: 0 0 26px 6px var(--li-glow); }
}

@keyframes li-cta-bounce {
	0%, 60%, 100% { transform: translateY(0); }
	70% { transform: translateY(-10px); }
	80% { transform: translateY(0); }
	88% { transform: translateY(-4px); }
}

/* ---------- Mancsnyomos bevezető ---------- */

.logo-intro {
	--li-paw-color: var(--tenyeszet-paw, currentColor);
	--li-paw-size: 34px;
	--li-paw-opacity: 0.45;
}

.logo-intro > *:not(.li-paws):not(.li-gate-btn) {
	position: relative;
	z-index: 1;
}

/* Kattintás előtt csak a mancsok és a gomb látszik; a többi elem animációja a felfedéskor indul. */
.li-gate:not(.li-revealed) {
	cursor: pointer;
}

.li-gate:not(.li-revealed) .li-logo,
.li-gate:not(.li-revealed) .li-text,
.li-gate:not(.li-revealed) .li-cta-wrap {
	visibility: hidden;
	opacity: 0;
}

.li-gate:not(.li-revealed) .li-logo,
.li-gate:not(.li-revealed) .li-logo-idle,
.li-gate:not(.li-revealed) .li-title,
.li-gate:not(.li-revealed) .li-subtitle,
.li-gate:not(.li-revealed) .li-cta-wrap,
.li-gate:not(.li-revealed) .li-cta {
	animation: none !important;
}

.logo-intro .li-paws {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	color: var(--li-paw-color);
	transition: opacity 0.8s ease;
}

.li-revealed .li-paws {
	opacity: 0;
}

.logo-intro .li-paw {
	position: absolute;
	width: var(--li-paw-size);
	height: var(--li-paw-size);
	margin: calc(var(--li-paw-size) / -2) 0 0 calc(var(--li-paw-size) / -2);
	opacity: 0;
	transform: var(--li-paw-t);
	animation: li-paw var(--li-paw-life, 2600ms) ease-out both;
}

.logo-intro .li-paw svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* A gomb fölött leülő cica két első mancsa: megjelenik, és ott marad. */
.logo-intro .li-paw.li-paw-sit {
	animation: li-paw-sit 0.6s ease-out both;
}

@keyframes li-paw-sit {
	0%   { opacity: 0; transform: var(--li-paw-t) scale(0.5); }
	60%  { opacity: var(--li-paw-opacity); transform: var(--li-paw-t) scale(1.1); }
	100% { opacity: var(--li-paw-opacity); transform: var(--li-paw-t) scale(1); }
}

@keyframes li-paw {
	0%   { opacity: 0; transform: var(--li-paw-t) scale(0.5); }
	6%   { opacity: var(--li-paw-opacity); transform: var(--li-paw-t) scale(1.08); }
	12%  { transform: var(--li-paw-t) scale(1); }
	60%  { opacity: var(--li-paw-opacity); transform: var(--li-paw-t) scale(1); }
	100% { opacity: 0; transform: var(--li-paw-t) scale(1); }
}

.logo-intro .li-gate-btn {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: fit-content;
	/* Mindkét oldalon maradjon hely, hogy a cica ívben megkerülhesse (keskeny kijelzőn a szöveg két sorba törik). */
	max-width: calc(100% - 4.6 * var(--li-paw-size));
	height: fit-content;
	margin: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 14px 30px;
	text-align: center;
	border: 2px solid currentColor;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.7);
	background: var(--tenyeszet-gate-bg, rgba(255, 255, 255, 0.7));
	color: var(--tenyeszet-gate-text, inherit);
	font: inherit;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	animation: li-fade-up 0.8s ease 0.4s both;
	transition: opacity 0.4s ease, visibility 0s linear 0.4s, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* A gomb animációja (a widgetnél választható). */
.logo-intro .li-gate-btn.li-gate-anim-breathe {
	animation: li-fade-up 0.8s ease 0.4s both, li-gate-breathe 2.6s ease-in-out 1.2s infinite;
}

.logo-intro .li-gate-btn.li-gate-anim-pulse {
	animation: li-fade-up 0.8s ease 0.4s both, li-gate-pulse 2.2s ease-out 1.2s infinite;
}

.logo-intro .li-gate-btn.li-gate-icon-after {
	flex-direction: row-reverse;
}

@media (max-width: 480px) {
	.logo-intro .li-gate-btn {
		gap: 0.45em;
		padding: 12px 20px;
		font-size: 16px;
	}
}

.logo-intro .li-gate-btn:hover,
.logo-intro .li-gate-btn:focus-visible {
	background: rgba(255, 255, 255, 0.95);
	background: var(--tenyeszet-gate-hover-bg, rgba(255, 255, 255, 0.95));
	color: var(--tenyeszet-gate-hover-text, inherit);
	border-color: var(--tenyeszet-gate-hover-bg, currentColor);
}

.logo-intro .li-gate-icon {
	--li-gate-icon-size: 1.3em;
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	font-size: var(--li-gate-icon-size);
	line-height: 1;
}

.logo-intro .li-gate-icon svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.logo-intro .li-gate-icon i {
	font-size: 1em;
	line-height: 1;
}

.li-revealed .li-gate-btn {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	animation: none !important;
}

@keyframes li-gate-breathe {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.05); }
}

@keyframes li-gate-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); }
	70%  { box-shadow: 0 0 0 16px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- Csökkentett mozgás (akadálymentesség) ---------- */

@media (prefers-reduced-motion: reduce) {
	.logo-intro *,
	.logo-intro .li-logo-hover[class*="li-anim-"] {
		animation: none !important;
		transition: none !important;
	}

	/* A mancsok ilyenkor is egymás után tűnnek elő (mozgás nélkül, csak áttűnéssel),
	   így a cica „lépeget”, de semmi nem mozog vagy nagyít. */
	.logo-intro .li-paws .li-paw {
		animation: li-paw-fade var(--li-paw-life, 2600ms) linear var(--li-paw-delay, 0ms) both !important;
	}

	.logo-intro .li-paws .li-paw.li-paw-sit {
		animation: li-paw-fade-in 0.4s linear var(--li-paw-delay, 0ms) both !important;
	}
}

@keyframes li-paw-fade {
	0%   { opacity: 0; }
	5%   { opacity: var(--li-paw-opacity); }
	60%  { opacity: var(--li-paw-opacity); }
	100% { opacity: 0; }
}

@keyframes li-paw-fade-in {
	from { opacity: 0; }
	to   { opacity: var(--li-paw-opacity); }
}

/* ---------- Betűk a „Tenyészet színvilág” beállításból ---------- */
/* Címek és gombok: az oldal Elementor Elsődleges betűje vagy a választott Google betű.
   A widget saját Tipográfia beállításai erősebbek, azok felülírják. */
.logo-intro .li-gate-btn,
.logo-intro .li-cta,
.logo-intro .li-title {
	font-family: var(--tenyeszet-font-heading, inherit);
}

.logo-intro .li-subtitle,
.logo-intro .li-hint {
	font-family: var(--tenyeszet-font-body, inherit);
}