/* Vikingo Studio főoldali hero: szöveg, két gomb és az animált jelenet
   (a designer prototípusából, két rétegre bontva).

   Lépték: --vkvs-hero-u = egy SVG-egység px-ben. Asztalon a Figma 1440-es
   kerete szerint (1440 px-en 1, szélesebben sem nő tovább), keskeny
   kijelzőn a hajó-kép szélességéből (680 egység, legfeljebb 600 px). Az
   égbolt és a tenger ugyanazzal a léptékkel rajzolódik, ezért a hajó mindig
   pontosan a vízvonalon ül; a szöveg mérete ettől független.

   Rács asztalon (a hero legalább 900 px széles):
     [margó] [szöveg ≤560] [köz] [égbolt 680u] [20u]
     1. sor: szöveg | égbolt (a vízvonalig)
     2. sor: tenger a teljes szélességben, rajta a gombok
   Keskeny kijelzőn: szöveg, gombok, égbolt, tenger egymás alatt. */

.vkvs-hero {
	--vkvs-hero-ink: var(--vk-ink, #3E2E45);
	--vkvs-hero-korall: var(--vk-coral, #FF544D);
	--vkvs-hero-korall-hover: var(--vk-coral-hover, #E83D36);
	--vkvs-hero-papir: var(--vk-paper, #F3EEEB);
	--vkvs-hero-sand: var(--vk-sand, #DCD0C3);
	--vkvs-hero-mauve: var(--vk-mauve, #7A687F);
	--vkvs-hero-feher: var(--vk-white, #FFFFFF);

	container-type: inline-size;
	position: relative;
	overflow: hidden;
	background: var(--vkvs-hero-papir);
	color: var(--vkvs-hero-ink);
}
.vkvs-hero *,
.vkvs-hero *::before,
.vkvs-hero *::after {
	box-sizing: border-box;
}

.vkvs-hero .vkvs-hero__racs {
	--vkvs-hero-u: calc(min(100cqw, 600px) / 680);
	--vkvs-hero-margo: clamp(32px, 11.5cqw - 86px, 80px);
	display: grid;
	grid-template-columns: var(--vkvs-hero-margo) minmax(0, 1fr) var(--vkvs-hero-margo);
	min-width: 0;
}

/* ==== Szöveg (Figma: kicker DM Mono 18, H1 Clash 500 44/1,2, bevezető
   Clash 400 16/1,5; közök 12 és 24) ==================================== */

.vkvs-hero .vkvs-hero__szoveg {
	grid-column: 2;
	grid-row: 1;
	max-width: 560px;
	padding-top: 48px;
	position: relative;
	z-index: 2;
}
.vkvs-hero .vkvs-hero__kicker {
	margin: 0 0 12px;
	font-family: var(--vk-dm-mono, 'DM Mono'), ui-monospace, monospace;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--vkvs-hero-korall);
}
.vkvs-hero .vkvs-hero__cim {
	margin: 0;
	padding: 0;
	font-family: var(--vk-clash-display, 'Clash Display'), system-ui, sans-serif;
	font-size: clamp(32px, 26.7px + 1.35cqw, 44px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.04em;
	color: var(--vkvs-hero-ink);
	text-wrap: balance;
}
.vkvs-hero .vkvs-hero__bevezeto {
	max-width: 540px;
	margin: 24px 0 0;
	font-family: var(--vk-clash-display, 'Clash Display'), system-ui, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--vkvs-hero-ink);
	text-wrap: pretty;
}

/* ==== Gombok (a kit gombjai: DM Mono 500 20, 16/32 px, pill) =========== */

.vkvs-hero .vkvs-hero__gombok {
	grid-column: 2;
	grid-row: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 32px;
	position: relative;
	z-index: 3;
}
.vkvs-hero .vkvs-hero__gomb {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 14px 28px;
	border: 1px solid var(--vkvs-hero-ink);
	border-radius: 40px;
	/* Tömör háttér: a mögötte úszó hullámtarajok ne látsszanak át. */
	background: var(--vkvs-hero-papir);
	font-family: var(--vk-dm-mono, 'DM Mono'), ui-monospace, monospace;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--vkvs-hero-korall);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.vkvs-hero .vkvs-hero__gomb--kitoltott {
	border-color: var(--vkvs-hero-korall);
	background: var(--vkvs-hero-korall);
	color: var(--vkvs-hero-feher);
}
@media (hover: hover) {
	.vkvs-hero .vkvs-hero__gomb:hover {
		background: var(--vkvs-hero-ink);
		color: var(--vkvs-hero-feher);
	}
	.vkvs-hero .vkvs-hero__gomb--kitoltott:hover {
		border-color: var(--vkvs-hero-korall-hover);
		background: var(--vkvs-hero-korall-hover);
		color: var(--vkvs-hero-feher);
	}
}
.vkvs-hero .vkvs-hero__gomb:focus-visible {
	outline: 2px solid var(--vkvs-hero-korall);
	outline-offset: 3px;
}

/* ==== Jelenet ========================================================== */

/* Égbolt: nap, felhők, hajó. Az alja a vízvonal alá nyúlik 16 egységgel,
   ezt a tenger takarja el (a hajótest víz alatti része). */
.vkvs-hero .vkvs-hero__eg {
	grid-column: 1 / -1;
	grid-row: 3;
	justify-self: center;
	width: calc(680 * var(--vkvs-hero-u));
	margin: 40px 0 calc(-16 * var(--vkvs-hero-u));
	position: relative;
	z-index: 0;
	pointer-events: none;
}
.vkvs-hero .vkvs-hero__eg svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* Tenger: a teljes szélességben, a léptékhez kötött magassággal. A
   geometria 3440 egység széles, így 3440 px-ig sehol nem fogy el. */
.vkvs-hero .vkvs-hero__tenger {
	grid-column: 1 / -1;
	grid-row: 4;
	height: calc(246 * var(--vkvs-hero-u));
	position: relative;
	z-index: 1;
	pointer-events: none;
}
.vkvs-hero .vkvs-hero__tenger svg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.vkvs-hero .vkvs-hero-nap { fill: #FF3F42; }
.vkvs-hero .vkvs-hero-eg path {
	fill: none;
	stroke: var(--vkvs-hero-mauve);
	stroke-width: 1.5;
	stroke-miterlimit: 10;
}
.vkvs-hero .vkvs-hero-eg { mix-blend-mode: multiply; }
.vkvs-hero .vkvs-hero-hajo path { fill: var(--vkvs-hero-ink); }
.vkvs-hero .vkvs-hero-tenger__test { fill: var(--vkvs-hero-papir); }
/* A vonal a csoporton: a <use> árnyékfájába csak az örökölhető jut be. */
.vkvs-hero .vkvs-hero-tenger__vonal,
.vkvs-hero .vkvs-hero-tenger__tarajok {
	fill: none;
	stroke: var(--vkvs-hero-ink);
	stroke-width: 1.5;
	stroke-miterlimit: 10;
}
.vkvs-hero .vkvs-hero-tenger__racs {
	fill: none;
	stroke: var(--vkvs-hero-sand);
	stroke-width: 1.5;
	stroke-miterlimit: 10;
}

/* ==== Szünet gomb (a mozgás megállítása, WCAG 2.2.2) ==================== */

.vkvs-hero .vkvs-hero__szunet {
	grid-column: 2;
	grid-row: 4;
	justify-self: end;
	align-self: end;
	position: relative;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 0 16px;
	padding: 0;
	border: 1px solid var(--vkvs-hero-ink);
	border-radius: 50%;
	background: var(--vkvs-hero-papir);
	color: var(--vkvs-hero-ink);
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.vkvs-hero .vkvs-hero__szunet:focus,
.vkvs-hero .vkvs-hero__szunet:active {
	border: 1px solid var(--vkvs-hero-ink);
	background: var(--vkvs-hero-papir);
	color: var(--vkvs-hero-ink);
	box-shadow: none;
	transform: none;
}
@media (hover: hover) {
	/* A kit gombjának hover-kerete (sötét korall) itt nem kell: egyszínű kör. */
	.vkvs-hero .vkvs-hero__szunet:hover {
		border-color: var(--vkvs-hero-ink);
		background: var(--vkvs-hero-ink);
		color: var(--vkvs-hero-feher);
	}
}
.vkvs-hero .vkvs-hero__szunet:focus-visible {
	outline: 2px solid var(--vkvs-hero-korall);
	outline-offset: 2px;
}
.vkvs-hero .vkvs-hero__szunet .vkvs-hero__ikon-szunet,
.vkvs-hero.is-szunet .vkvs-hero__szunet .vkvs-hero__ikon-indul {
	display: block;
}
.vkvs-hero .vkvs-hero__szunet .vkvs-hero__ikon-indul,
.vkvs-hero.is-szunet .vkvs-hero__szunet .vkvs-hero__ikon-szunet {
	display: none;
}

/* Keskeny kijelzőn a gombok egymás alatt, teljes szélességben: kényelmes
   hüvelykujj-cél, és nem törik a felirat. */
@container (max-width: 479px) {
	.vkvs-hero .vkvs-hero__gomb {
		flex: 1 1 100%;
	}
}

/* ==== Asztali kompozíció (Figma) ======================================= */

@container (min-width: 900px) {
	.vkvs-hero .vkvs-hero__racs {
		--vkvs-hero-u: calc(min(100cqw, 1440px) / 1440);
		--vkvs-hero-kulso: max(0px, (100cqw - 1440px) / 2);
		grid-template-columns:
			calc(var(--vkvs-hero-kulso) + var(--vkvs-hero-margo))
			minmax(0, 560px)
			minmax(24px, 1fr)
			calc(680 * var(--vkvs-hero-u))
			calc(var(--vkvs-hero-kulso) + 20 * var(--vkvs-hero-u));
	}
	.vkvs-hero .vkvs-hero__szoveg {
		grid-column: 2;
		grid-row: 1;
		align-self: start;
		padding: clamp(64px, 141 * var(--vkvs-hero-u), 141px) 0 clamp(32px, 50 * var(--vkvs-hero-u), 50px);
	}
	.vkvs-hero .vkvs-hero__eg {
		grid-column: 4;
		grid-row: 1;
		align-self: end;
		justify-self: stretch;
		width: auto;
		margin: 0 0 calc(-16 * var(--vkvs-hero-u));
	}
	.vkvs-hero .vkvs-hero__tenger {
		grid-row: 2;
	}
	/* A gombok a vízen (Figma: 53 egységgel a vízvonal alatt). */
	.vkvs-hero .vkvs-hero__gombok {
		grid-column: 2 / 4;
		grid-row: 2;
		align-self: start;
		flex-wrap: nowrap;
		gap: 24px;
		margin: 0;
		padding-top: clamp(24px, 53 * var(--vkvs-hero-u), 53px);
	}
	.vkvs-hero .vkvs-hero__gomb {
		flex: 0 0 auto;
		min-height: 58px;
		padding: 16px 32px;
		font-size: 20px;
	}
	.vkvs-hero .vkvs-hero__szunet {
		grid-column: 4;
		grid-row: 2;
	}
}

/* ==== Mozgás =========================================================== */

/* Egy periódusnyi eltolás: a cikkcakk-rács hézag nélkül önmagára záródik. */
@keyframes vkvs-hero-sodras { to { transform: translateX(-22.55635px); } }
@keyframes vkvs-hero-lelegzes { 0%, 100% { transform: translateY(1.6px); } 50% { transform: translateY(-1.6px); } }
/* A tarajok 64 periódus alatt érnek körbe, a rács sebességével (64 × 0,9 s). */
@keyframes vkvs-hero-tarajok { to { transform: translateX(-1443.606px); } }
@keyframes vkvs-hero-bolint { 0%, 100% { transform: translateY(2.5px); } 50% { transform: translateY(-4.5px); } }
@keyframes vkvs-hero-billeg { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes vkvs-hero-arboc { 0%, 100% { transform: rotate(0.7deg); } 50% { transform: rotate(-0.7deg); } }
@keyframes vkvs-hero-felho1 { 0%, 100% { transform: translateX(-9px); } 50% { transform: translateX(9px); } }
@keyframes vkvs-hero-felho2 { 0%, 100% { transform: translateX(12px); } 50% { transform: translateX(-12px); } }
@keyframes vkvs-hero-felho3 { 0%, 100% { transform: translateX(-7.5px); } 50% { transform: translateX(7.5px); } }

.vkvs-hero--mozog .vkvs-hero-tenger__sodras { animation: vkvs-hero-sodras 0.9s linear infinite; }
.vkvs-hero--mozog .vkvs-hero-tenger { animation: vkvs-hero-lelegzes 9.1s ease-in-out infinite; }
.vkvs-hero--mozog .vkvs-hero-tenger__tarajok { animation: vkvs-hero-tarajok 57.6s linear infinite; }

.vkvs-hero .vkvs-hero-hajo__bolint,
.vkvs-hero .vkvs-hero-hajo__billeg,
.vkvs-hero .vkvs-hero-hajo__arboc {
	transform-box: view-box;
}
.vkvs-hero .vkvs-hero-hajo__bolint,
.vkvs-hero .vkvs-hero-hajo__billeg { transform-origin: 1009px 433px; }
.vkvs-hero .vkvs-hero-hajo__arboc { transform-origin: 1008.8px 392px; }
.vkvs-hero--mozog .vkvs-hero-hajo__bolint { animation: vkvs-hero-bolint 4.7s ease-in-out infinite; }
.vkvs-hero--mozog .vkvs-hero-hajo__billeg { animation: vkvs-hero-billeg 6.3s ease-in-out infinite; }
.vkvs-hero--mozog .vkvs-hero-hajo__arboc { animation: vkvs-hero-arboc 5.3s ease-in-out infinite; }

.vkvs-hero--mozog .vkvs-hero-felho--1 { animation: vkvs-hero-felho1 22s ease-in-out infinite; }
.vkvs-hero--mozog .vkvs-hero-felho--2 { animation: vkvs-hero-felho2 29s ease-in-out infinite; }
.vkvs-hero--mozog .vkvs-hero-felho--3 { animation: vkvs-hero-felho3 25s ease-in-out infinite; }

/* Behajózás (köszönő oldal): a hajó betöltéskor jobbról érkezik a helyére.
   Ha a látogató a mozgást megállította (vagy csökkentett mozgást kér, lent),
   a hajó egyből a helyén áll. */
@keyframes vkvs-hero-beuszas { from { transform: translateX(560px); } to { transform: none; } }
.vkvs-hero--beuszas .vkvs-hero-hajo {
	transform-box: view-box;
}
.vkvs-hero--beuszas.vkvs-hero--mozog .vkvs-hero-hajo {
	animation: vkvs-hero-beuszas 2.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s both;
}
.vkvs-hero--beuszas.is-szunet .vkvs-hero-hajo {
	animation: none !important;
}

/* Hajótörés (404): a hajó orral lefelé megdőlve süllyed, a zászló
   ernyedten lóg a rúd mellett, az orr két pajzsa és két deszka a vízen
   úszik. Az álló helyzet az alap-transzform, a mozgás ekörül ring,
   így csökkentett mozgásnál is hajótörött a kép. */
.vkvs-hero .vkvs-hero-ronc,
.vkvs-hero .vkvs-hero-hajo__lekokadt {
	display: none;
	fill: var(--vkvs-hero-ink);
}
.vkvs-hero--hajotores .vkvs-hero-ronc,
.vkvs-hero--hajotores .vkvs-hero-hajo__lekokadt { display: inline; }
.vkvs-hero--hajotores .vkvs-hero-hajo__pajzsok-le { display: none; }
/* A rúd zászló nélkül. Az árboc nem ring külön: a lekókadt zászló a
   hajótesttel együtt mozog, így nem válhat el a rúdtól. */
.vkvs-hero--hajotores .vkvs-hero-hajo__arboc {
	clip-path: url(#vkvsHeroRud);
	animation: none;
}
/* A rúd tetején, a hajó dőlésével szemben függőlegesen lefelé lóg. */
.vkvs-hero .vkvs-hero-hajo__lekokadt {
	transform-box: view-box;
	transform-origin: 1008px 215px;
	transform: rotate(-114deg);
}
.vkvs-hero .vkvs-hero-ronc > g {
	transform-box: fill-box;
	transform-origin: 50% 100%;
}
.vkvs-hero--hajotores .vkvs-hero-hajo__bolint { transform: translateY(14px); }
.vkvs-hero--hajotores .vkvs-hero-hajo__billeg { transform: rotate(24deg); }

@keyframes vkvs-hero-ronc-bolint { 0%, 100% { transform: translateY(12px); } 50% { transform: translateY(17px); } }
@keyframes vkvs-hero-ronc-billeg { 0%, 100% { transform: rotate(22.5deg); } 50% { transform: rotate(25.5deg); } }
@keyframes vkvs-hero-ronc-lekokadt { 0%, 100% { transform: rotate(-111deg); } 50% { transform: rotate(-117deg); } }
@keyframes vkvs-hero-ronc-uszik { 0%, 100% { transform: translateY(1.5px) rotate(-3deg); } 50% { transform: translateY(-2.5px) rotate(3deg); } }

.vkvs-hero--hajotores.vkvs-hero--mozog .vkvs-hero-hajo__bolint { animation: vkvs-hero-ronc-bolint 7.3s ease-in-out infinite; }
.vkvs-hero--hajotores.vkvs-hero--mozog .vkvs-hero-hajo__billeg { animation: vkvs-hero-ronc-billeg 9.7s ease-in-out infinite; }
.vkvs-hero--hajotores.vkvs-hero--mozog .vkvs-hero-hajo__lekokadt { animation: vkvs-hero-ronc-lekokadt 9.7s ease-in-out infinite; }
.vkvs-hero--mozog .vkvs-hero-ronc__pajzs--1 { animation: vkvs-hero-ronc-uszik 4.3s ease-in-out -1.2s infinite; }
.vkvs-hero--mozog .vkvs-hero-ronc__pajzs--2 { animation: vkvs-hero-ronc-uszik 5.2s ease-in-out -3.1s infinite; }
.vkvs-hero--mozog .vkvs-hero-ronc__deszka--1 { animation: vkvs-hero-ronc-uszik 3.9s ease-in-out -0.7s infinite; }
.vkvs-hero--mozog .vkvs-hero-ronc__deszka--2 { animation: vkvs-hero-ronc-uszik 4.8s ease-in-out -2.4s infinite; }

/* Megáll, ha a látogató megállította, vagy ha a hero nem látszik. */
.vkvs-hero.is-szunet .vkvs-hero__eg *,
.vkvs-hero.is-szunet .vkvs-hero__tenger *,
.vkvs-hero.is-rejtett .vkvs-hero__eg *,
.vkvs-hero.is-rejtett .vkvs-hero__tenger * {
	animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
	.vkvs-hero .vkvs-hero__eg *,
	.vkvs-hero .vkvs-hero__tenger * {
		animation: none !important;
	}
	.vkvs-hero .vkvs-hero__szunet {
		display: none;
	}
	.vkvs-hero .vkvs-hero__gomb,
	.vkvs-hero .vkvs-hero__szunet {
		transition: none;
	}
}