/* NocturnArt – Építés alatt oldal (1.34.0)
   Önálló oldal a téma nélkül: Van Gogh-i éjkék égbolt, holdudvar, pislákoló csillagok,
   alul lassan ringó örvénylő felhők (a főoldal vg-* rétegei), előtte üveges belépőpanel. */

@font-face { font-family: "NA Literata"; src: url(fonts/Literata72pt-ExtraLightItalic.woff2) format("woff2"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "NA Literata"; src: url(fonts/Literata72pt-LightItalic.woff2) format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "NA Ysabeau"; src: url(fonts/YsabeauOffice-VariableFont_wght.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

.na-uc {
	--night: #0d1a3e;
	--deep: #070d24;
	--ink: #f3ead6;
	--ink-dim: rgba(222, 226, 242, .76);
	--gold: #e6b94f;
	--gold-line: rgba(230, 185, 79, .5);
	--glass: rgba(9, 16, 42, .58);
	--field: rgba(4, 9, 28, .55);
	--line: rgba(222, 226, 242, .28);
	--dip: 80svh;     /* a felhőpad közepe */
	--cw: 112vw;      /* a felhőrétegek szélessége */
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body.na-uc {
	min-height: 100svh;
	overflow-x: clip;
	color: var(--ink);
	font: 400 1rem/1.6 "NA Ysabeau", system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	background:
		radial-gradient(ellipse 70% 55% at 50% 22%, rgba(58, 86, 172, .38), transparent 70%),
		linear-gradient(to bottom, rgba(4, 8, 24, .55), transparent 40%),
		url("intro/vg-night.webp") 0 0 / 720px auto repeat,
		var(--night);
}

/* ---- Égbolt ---- */
.na-uc__sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* hold a holdudvar gyűrűivel, mint a Csillagos éjben */
.na-uc__moon {
	position: absolute; top: max(6svh, 40px); right: max(9vw, 28px);
	width: clamp(46px, 5vw, 76px); aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(circle at 42% 40%, #fff6d8 0, #f2d688 48%, #d9a94a 72%, rgba(217, 169, 74, 0) 74%);
	box-shadow:
		0 0 0 14px rgba(242, 214, 136, .08),
		0 0 0 34px rgba(242, 214, 136, .05),
		0 0 0 62px rgba(130, 160, 230, .045),
		0 0 90px 30px rgba(242, 214, 136, .18);
	animation: na-uc-glow 9s ease-in-out infinite alternate;
}
@keyframes na-uc-glow { to { box-shadow: 0 0 0 18px rgba(242, 214, 136, .07), 0 0 0 40px rgba(242, 214, 136, .045), 0 0 0 70px rgba(130, 160, 230, .04), 0 0 110px 36px rgba(242, 214, 136, .22); } }

.na-uc__stars {
	position: absolute; inset: 0 0 35% 0;
	background:
		radial-gradient(1.6px 1.6px at 12% 18%, #fff3cf 60%, transparent),
		radial-gradient(1.2px 1.2px at 27% 34%, #dfe6ff 60%, transparent),
		radial-gradient(2px 2px at 41% 9%, #fff3cf 60%, transparent),
		radial-gradient(1.2px 1.2px at 58% 27%, #dfe6ff 60%, transparent),
		radial-gradient(1.8px 1.8px at 71% 14%, #fff3cf 60%, transparent),
		radial-gradient(1.2px 1.2px at 86% 38%, #dfe6ff 60%, transparent),
		radial-gradient(1.4px 1.4px at 6% 46%, #dfe6ff 60%, transparent),
		radial-gradient(1.4px 1.4px at 93% 52%, #fff3cf 60%, transparent);
	animation: na-uc-twinkle 6s ease-in-out infinite alternate;
}
.na-uc__stars--b {
	background:
		radial-gradient(1.4px 1.4px at 19% 8%, #dfe6ff 60%, transparent),
		radial-gradient(1.8px 1.8px at 34% 22%, #fff3cf 60%, transparent),
		radial-gradient(1.2px 1.2px at 49% 41%, #dfe6ff 60%, transparent),
		radial-gradient(1.6px 1.6px at 64% 6%, #fff3cf 60%, transparent),
		radial-gradient(1.2px 1.2px at 79% 29%, #dfe6ff 60%, transparent),
		radial-gradient(1.6px 1.6px at 16% 58%, #fff3cf 60%, transparent);
	animation-duration: 8s; animation-delay: -3s;
}
@keyframes na-uc-twinkle { from { opacity: .25; } to { opacity: .95; } }

/* ---- Felhők: három réteg, lassan, eltérő ütemben ringanak ----
   A képek U alakúak: két szélükön magasra csapnak, középen mélyebbre ülnek, így közrefogják a panelt.
   --dip: a sötét felhőpad közepének magassága; a rétegek ehhez igazodnak (a % a kép magasságának arányában). */
.na-uc__clouds { position: absolute; inset: 0; --h: calc(var(--cw) * 2 / 3); }
.na-uc__c {
	position: absolute;
	left: calc(50% - var(--cw) / 2);
	width: var(--cw); height: var(--h);
	background: center top / 100% 100% no-repeat;
	will-change: transform;
}
.na-uc__c--back {
	top: calc(var(--dip) - 16svh - var(--h) * .5);
	background-image: url("intro/vg-back.webp");
	opacity: .7;
	animation: na-uc-drift 46s ease-in-out infinite alternate;
}
.na-uc__c--bank {
	top: calc(var(--dip) - var(--h) * .38);
	background-image: url("intro/vg-front.webp");
	filter: brightness(.82);
	animation: na-uc-drift 34s ease-in-out -12s infinite alternate-reverse;
}
.na-uc__c--near {
	top: calc(var(--dip) + 7svh - var(--h) * .35);
	background-image: url("intro/vg-mid.webp");
	filter: brightness(.7) saturate(.85);
	-webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 84%);
	mask-image: linear-gradient(to bottom, #000 58%, transparent 84%);
	animation: na-uc-drift 26s ease-in-out -5s infinite alternate;
}
@keyframes na-uc-drift {
	from { transform: translate3d(-2vw, 0, 0); }
	to   { transform: translate3d(2vw, -1svh, 0); }
}

/* ---- Tartalom ---- */
.na-uc__main {
	position: relative; z-index: 1;
	min-height: 100svh;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: clamp(28px, 5svh, 48px);
	padding: max(48px, 7svh) 16px 72px;
	text-align: center;
}
.na-uc__head { max-width: 34rem; }
.na-uc__brand { margin: 0; line-height: 0; color: var(--ink); }
.na-uc__brand { line-height: 1; }
.na-uc__logo { font-size: clamp(34px, 5.6vw, 58px); filter: drop-shadow(0 2px 18px rgba(4, 8, 24, .7)); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.na-uc__eyebrow {
	margin: 22px 0 0; display: inline-flex; align-items: center; gap: 14px;
	font-size: .74rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--gold);
}
.na-uc__eyebrow::before, .na-uc__eyebrow::after { content: ""; width: 34px; height: 1px; background: var(--gold-line); }
.na-uc__title {
	margin: 14px 0 0;
	font: italic 200 clamp(2.3rem, 5.6vw, 3.9rem)/1.08 "NA Literata", Georgia, serif;
	letter-spacing: -.01em;
	text-shadow: 0 2px 24px rgba(4, 8, 24, .8);
}
.na-uc__text {
	margin: 16px auto 0; max-width: 31rem; text-wrap: pretty;
	color: var(--ink-dim); font-size: 1.04rem;
	text-shadow: 0 1px 12px rgba(4, 8, 24, .9);
}

.na-uc__panel {
	width: min(100%, 380px);
	padding: 30px 30px 26px;
	background: var(--glass);
	-webkit-backdrop-filter: blur(14px) saturate(1.1);
	backdrop-filter: blur(14px) saturate(1.1);
	border: 1px solid var(--gold-line);
	box-shadow: 0 24px 60px rgba(2, 5, 18, .55), inset 0 1px 0 rgba(255, 246, 216, .06);
	text-align: left;
}
.na-uc__h { margin: 0; font: italic 300 1.7rem/1.2 "NA Literata", Georgia, serif; text-align: center; }
.na-uc__note { margin: 6px 0 20px; color: var(--ink-dim); font-size: .92rem; text-align: center; }
.na-uc__note strong { color: var(--ink); font-weight: 600; }
.na-uc__error {
	margin: -6px 0 18px; padding: 10px 12px;
	border-left: 2px solid #e58a7a; background: rgba(120, 30, 40, .28);
	font-size: .9rem; color: #f6d9d2;
}
.na-uc__form { display: grid; gap: 16px; }
.na-uc__field { display: grid; gap: 6px; }
.na-uc__field > span { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.na-uc__field input {
	width: 100%; padding: 12px 14px;
	font: inherit; font-size: 1rem; color: var(--ink);
	background: var(--field); border: 1px solid var(--line); border-radius: 0;
	transition: border-color .2s, box-shadow .2s;
}
.na-uc__field input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(230, 185, 79, .18); }
.na-uc__field input:-webkit-autofill {
	-webkit-text-fill-color: var(--ink);
	-webkit-box-shadow: 0 0 0 40px #0b1434 inset;
	caret-color: var(--ink);
}
.na-uc__check { display: inline-flex; align-items: center; gap: 10px; font-size: .92rem; color: var(--ink-dim); cursor: pointer; }
.na-uc__check input { width: 16px; height: 16px; margin: 0; accent-color: var(--gold); }
.na-uc__btn {
	display: block; width: 100%; margin-top: 4px; padding: 13px 18px;
	font: 600 .82rem/1 "NA Ysabeau", system-ui, sans-serif; letter-spacing: .24em; text-transform: uppercase; text-align: center; text-decoration: none;
	color: #1a1406; background: var(--gold); border: 1px solid var(--gold); border-radius: 0; cursor: pointer;
	transition: background-color .25s, color .25s;
}
.na-uc__btn:hover { background: transparent; color: var(--gold); }
.na-uc__btn:focus-visible, .na-uc__link:focus-visible, .na-uc__check input:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.na-uc__link {
	display: block; width: fit-content; margin: 18px auto 0;
	font-size: .88rem; color: var(--ink-dim); text-decoration: none; border-bottom: 1px solid var(--line);
}
.na-uc__link:hover { color: var(--gold); border-color: var(--gold-line); }

.na-uc__foot {
	position: relative; z-index: 1;
	margin-top: -52px; padding: 0 16px 22px;
	text-align: center; font-size: .78rem; letter-spacing: .14em; color: rgba(243, 234, 214, .85);
	text-shadow: 0 0 6px rgba(4, 8, 24, .95), 0 1px 14px rgba(4, 8, 24, .9);
}

/* Telefon: nagyobb felhők, lejjebb a taraj, hogy a panel alatt maradjanak */
@media (max-width: 760px) {
	.na-uc { --cw: 210vw; --dip: 86svh; }
	.na-uc__moon { right: 22px; top: 26px; }
	.na-uc__panel { padding: 24px 20px 22px; }
}
@media (max-height: 640px) and (min-width: 761px) {
	.na-uc { --dip: 88svh; --cw: 100vw; }
}

@media (prefers-reduced-motion: reduce) {
	.na-uc__moon, .na-uc__stars, .na-uc__c { animation: none !important; }
	.na-uc__stars { opacity: .7; }
}