/*!
 * DLA Welcome Gate - frontend styles
 *
 * Toate culorile vin din variabilele scrise inline in <head> de plugin.
 *
 * Nota de specificitate: reset-ul defensiv de mai jos tinteste elemente
 * (div, p, span), deci #dlawg-gate div = (1,0,1). Toate regulile de layout
 * sunt prefixate cu #dlawg-gate si folosesc o clasa = (1,1,0), ca sa castige
 * si in fata reset-ului, si in fata temelor agresive.
 */

/* ------------------------------------------------ ecran de text (faza 2) */

#dlawg-gate .dlawg-phase--intro {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(16px, 3.5vh, 34px);
	padding: clamp(24px, 6vh, 60px) clamp(20px, 8vw, 80px);
	cursor: pointer;
}

#dlawg-gate.is-text .dlawg-phase--intro {
	display: flex;
}

#dlawg-gate.is-text .dlawg-gate__scroll,
#dlawg-gate.is-tocross .dlawg-gate__scroll {
	pointer-events: none;
}

#dlawg-gate.is-text .dlawg-gate__scroll {
	display: none;
}

#dlawg-gate .dlawg-intro__line {
	position: relative;
	max-width: 100%;
	font-size: calc(clamp(1.35rem, 5.4vw, 2.7rem) * var(--dlawg-fs-intro, 1));
	font-weight: 400;
	line-height: 1.35;
	color: var(--dlawg-ink, #f7f3e9);
}

#dlawg-gate .dlawg-intro__line--1 {
	top: var(--dlawg-off-intro1, 0px);
}

#dlawg-gate .dlawg-intro__line--2 {
	top: var(--dlawg-off-intro2, 0px);
	font-style: italic;
	color: var(--dlawg-gold-lt, #f0ce8b);
}

/* Typewriter: fantoma invizibila rezerva latimea si randurile finale, textul
   viu se scrie litera cu litera peste ea, aliniat la stanga, cutia centrata. */
#dlawg-gate .dlawg-type {
	width: -moz-fit-content;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	text-align: var(--dlawg-type-align, center);
}

#dlawg-gate .dlawg-type__ghost {
	display: block;
	visibility: hidden;
	white-space: pre-wrap;
}

#dlawg-gate .dlawg-type__live {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: block;
	text-align: inherit;
	white-space: pre-wrap;
}

@keyframes dlawg-caret {
	50% {
		opacity: 0;
	}
}

#dlawg-gate .dlawg-type__live.is-typing::after {
	content: "";
	display: inline-block;
	width: 2px;
	height: 0.9em;
	margin-left: 2px;
	vertical-align: -0.08em;
	background-color: var(--dlawg-gold-lt, #f0ce8b);
	animation: dlawg-caret 0.8s steps(1) infinite;
}

/* Trecerea de la gate la ecranul de text: elementele gate-ului se disperseaza
   cu blur, fundalul ramane, apoi incepe scrierea. */
html.dlawg-armed #dlawg-gate.is-tocross [data-anim] {
	animation: dlawg-disperse calc(0.62s * var(--dlawg-t, 1)) cubic-bezier(0.4, 0, 0.7, 0.4) calc(var(--dout, 0s) * var(--dlawg-t, 1)) forwards;
}

html.dlawg-armed #dlawg-gate.is-tocross .dlawg-emblem[data-anim] {
	animation-name: dlawg-disperse-emblem;
	animation-duration: calc(0.72s * var(--dlawg-t, 1));
}

html.dlawg-armed #dlawg-gate.is-tocross .dlawg-rule__line,
html.dlawg-armed #dlawg-gate.is-tocross .dlawg-emblem__sheen {
	animation: none;
}

/* ---------------------------------------------------------------- shell */

#dlawg-gate {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: var(--dlawg-z, 2147483001);
	display: none;
	color: var(--dlawg-ink, #f7f3e9);
	font-family: var(--dlawg-font, Georgia, serif);
	text-align: center;
	touch-action: none;
	overscroll-behavior: contain;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: transparent;
}

html.dlawg-armed #dlawg-gate {
	display: block;
}

/* Focusul initial se pune pe dialog, nu pe buton, ca sa nu apara inelul
   auriu la vizitatorii care folosesc mouse-ul sau touch-ul. */
#dlawg-gate:focus {
	outline: none;
}

/* Reset defensiv fata de teme agresive (Divi, Avada, Astra). */
#dlawg-gate *,
#dlawg-gate *::before,
#dlawg-gate *::after {
	box-sizing: border-box;
}

#dlawg-gate p,
#dlawg-gate div,
#dlawg-gate span,
#dlawg-gate i,
#dlawg-gate b {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-style: normal;
	font-weight: inherit;
	line-height: inherit;
	text-transform: none;
	letter-spacing: inherit;
	text-shadow: none;
}

#dlawg-gate img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

#dlawg-gate .dlawg-gate__bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: var(--dlawg-bg, #000e29);
	background-image: radial-gradient(118% 76% at 50% 33%, var(--dlawg-bg-lift, #0b2145) 0%, var(--dlawg-bg, #000e29) 58%);
	opacity: 1;
}

#dlawg-gate .dlawg-gate__scroll {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	touch-action: pan-y;
	-webkit-overflow-scrolling: touch;
}

#dlawg-gate .dlawg-gate__inner {
	display: grid;
	grid-template-rows: 1fr auto;
	gap: clamp(20px, 3.6vh, 42px);
	min-height: 100%;
	padding: clamp(24px, 5vh, 60px) clamp(20px, 6vw, 52px) clamp(22px, 4.5vh, 52px);
}

#dlawg-gate .dlawg-gate__main {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(18px, 4vh, 44px);
}

/* --------------------------------------------------------------- emblem */

#dlawg-gate .dlawg-emblem {
	position: relative;
	top: var(--dlawg-off-emblem, 0px);
	width: min(var(--dlawg-logo-w, 250px), 42vw);
	line-height: 0;
}

#dlawg-gate .dlawg-emblem__img {
	width: 100%;
}

#dlawg-gate .dlawg-emblem__sheen {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(102deg, rgba(255, 247, 228, 0) 38%, rgba(255, 247, 228, 0.92) 50%, rgba(255, 247, 228, 0) 62%);
	background-repeat: no-repeat;
	background-size: 260% 100%;
	background-position: 190% 0;
	-webkit-mask-image: var(--dlawg-emblem);
	mask-image: var(--dlawg-emblem);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	mix-blend-mode: screen;
	opacity: 0;
	pointer-events: none;
}

/* ---------------------------------------------------------------- title */

#dlawg-gate .dlawg-title {
	position: relative;
	top: var(--dlawg-off-title, 0px);
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
	/* 6.3vw este calibrat pe randul implicit cel mai lung ("Welcome to the
	   Intellectual Home", raport masurat 13.5px text / 1px font, cu padding
	   lateral de 6vw pe fiecare parte): incape pe un singur rand de la 320px
	   in sus la scala 100%. Scala vine din setarea "Marimi". */
	font-size: calc(clamp(1.25rem, 6.3vw, 3.4rem) * var(--dlawg-fs-title, 1));
	font-weight: 400;
	line-height: 1.24;
	letter-spacing: 0.005em;
	color: var(--dlawg-ink, #f7f3e9);
	overflow-wrap: break-word;
	text-wrap: balance;
}

#dlawg-gate .dlawg-title__line {
	display: block;
}

/* ----------------------------------------------------------------- rule */

#dlawg-gate .dlawg-gate__main .dlawg-rule {
	position: relative;
	top: var(--dlawg-off-rule, 0px);
}

#dlawg-gate .dlawg-rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(10px, 3vw, 18px);
}

#dlawg-gate .dlawg-rule__line {
	display: block;
	width: clamp(56px, 17vw, 118px);
	height: 1px;
	background-image: linear-gradient(to right, rgba(var(--dlawg-gold-rgb, 194, 146, 46), 0), rgba(var(--dlawg-gold-rgb, 194, 146, 46), 0.85));
	transform-origin: right center;
}

#dlawg-gate .dlawg-rule__line:last-child {
	background-image: linear-gradient(to left, rgba(var(--dlawg-gold-rgb, 194, 146, 46), 0), rgba(var(--dlawg-gold-rgb, 194, 146, 46), 0.85));
	transform-origin: left center;
}

#dlawg-gate .dlawg-rule__gem {
	display: block;
	width: 7px;
	height: 7px;
	background-color: var(--dlawg-gold, #c2922e);
	transform: rotate(45deg);
}

#dlawg-gate .dlawg-rule--sm {
	position: relative;
	top: var(--dlawg-off-rule-sm, 0px);
}

#dlawg-gate .dlawg-rule--sm .dlawg-rule__line {
	width: clamp(64px, 22vw, 150px);
	opacity: 0.75;
}

#dlawg-gate .dlawg-rule--sm .dlawg-rule__gem {
	width: 5px;
	height: 5px;
}

/* --------------------------------------------------------------- button */

#dlawg-gate .dlawg-cta {
	position: relative;
	top: var(--dlawg-off-button, 0px);
	padding-top: clamp(2px, 1.2vh, 16px);
}

#dlawg-gate .dlawg-enter {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: calc(min(420px, 72vw) * var(--dlawg-btn-scale, 1));
	min-height: calc(56px * var(--dlawg-btn-scale, 1));
	margin: 0;
	padding: calc(clamp(15px, 2.1vh, 21px) * var(--dlawg-btn-scale, 1)) calc(clamp(40px, 12vw, 84px) * var(--dlawg-btn-scale, 1));
	border: 0;
	border-radius: 0;
	background-color: var(--dlawg-btn, #1a483e);
	background-image: none;
	color: var(--dlawg-btn-ink, #f7f3e9);
	font-family: inherit;
	font-size: calc(clamp(1.15rem, 4.4vw, 1.45rem) * var(--dlawg-fs-btn, 1));
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: none;
	text-shadow: none;
	cursor: pointer;
	overflow: hidden;
	box-shadow:
		0 18px 42px -24px rgba(0, 0, 0, 0.95),
		inset 0 0 0 1px rgba(var(--dlawg-gold-rgb, 194, 146, 46), 0);
	transition:
		background-color 0.4s ease,
		box-shadow 0.45s ease,
		letter-spacing 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.2s ease;
}

#dlawg-gate .dlawg-enter:hover,
#dlawg-gate .dlawg-enter:focus-visible {
	background-color: var(--dlawg-btn-lift, #2b5b4f);
	letter-spacing: 0.1em;
	box-shadow:
		0 22px 48px -22px rgba(0, 0, 0, 1),
		inset 0 0 0 1px rgba(var(--dlawg-gold-rgb, 194, 146, 46), 0.5);
}

#dlawg-gate .dlawg-enter:focus-visible {
	outline: 2px solid var(--dlawg-gold-lt, #f0ce8b);
	outline-offset: 4px;
}

#dlawg-gate .dlawg-enter:active {
	transform: translateY(1px);
}

#dlawg-gate .dlawg-enter__txt {
	position: relative;
	z-index: 1;
}

#dlawg-gate .dlawg-enter__fold {
	position: absolute;
	right: 0;
	bottom: 0;
	width: clamp(30px, 9vw, 46px);
	height: clamp(30px, 9vw, 46px);
	background-image: linear-gradient(to top left, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0) 50%);
	pointer-events: none;
}

/* --------------------------------------------------------------- footer */

#dlawg-gate .dlawg-foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(9px, 1.6vh, 18px);
}

#dlawg-gate .dlawg-motto {
	position: relative;
	top: var(--dlawg-off-motto, 0px);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(9px, 3vw, 20px);
	color: var(--dlawg-gold-lt, #f0ce8b);
	font-size: calc(clamp(0.8rem, 3.1vw, 1rem) * var(--dlawg-fs-foot, 1));
	line-height: 1.4;
	letter-spacing: 0.19em;
	text-transform: uppercase;
}

#dlawg-gate .dlawg-motto__gem {
	display: block;
	width: 5px;
	height: 5px;
	background-color: var(--dlawg-gold, #c2922e);
	transform: rotate(45deg);
}

#dlawg-gate .dlawg-tagline {
	position: relative;
	top: var(--dlawg-off-tagline, 0px);
	color: var(--dlawg-gold, #c2922e);
	font-size: calc(clamp(0.66rem, 2.5vw, 0.82rem) * var(--dlawg-fs-foot, 1));
	line-height: 1.9;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	opacity: 0.92;
}

/* ------------------------------------------------------------- intrarea */

@keyframes dlawg-rise {
	from {
		opacity: 0;
		transform: translateY(16px);
		filter: blur(9px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
	}
}

@keyframes dlawg-emblem-in {
	from {
		opacity: 0;
		transform: scale(0.9);
		filter: blur(13px);
	}

	to {
		opacity: 1;
		transform: scale(1);
		filter: blur(0);
	}
}

@keyframes dlawg-draw {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

@keyframes dlawg-sheen {
	0% {
		background-position: 190% 0;
		opacity: 0;
	}

	14% {
		opacity: 0.85;
	}

	60% {
		opacity: 0.85;
	}

	100% {
		background-position: -90% 0;
		opacity: 0;
	}
}

@keyframes dlawg-sheen-loop {
	0% {
		background-position: 190% 0;
		opacity: 0;
	}

	3% {
		opacity: 0.8;
	}

	14% {
		opacity: 0.8;
	}

	24% {
		background-position: -90% 0;
		opacity: 0;
	}

	100% {
		background-position: -90% 0;
		opacity: 0;
	}
}

html.dlawg-armed #dlawg-gate [data-anim] {
	animation: dlawg-rise calc(0.95s * var(--dlawg-t, 1)) cubic-bezier(0.22, 0.61, 0.36, 1) calc(var(--d, 0s) * var(--dlawg-t, 1)) backwards;
}

html.dlawg-armed #dlawg-gate .dlawg-emblem[data-anim] {
	animation-name: dlawg-emblem-in;
	animation-duration: calc(1.25s * var(--dlawg-t, 1));
}

html.dlawg-armed #dlawg-gate .dlawg-rule__line {
	animation: dlawg-draw calc(0.9s * var(--dlawg-t, 1)) cubic-bezier(0.22, 0.61, 0.36, 1) calc((var(--d, 0s) + 0.12s) * var(--dlawg-t, 1)) backwards;
}

html.dlawg-armed #dlawg-gate.has-sheen .dlawg-emblem__sheen {
	animation: dlawg-sheen calc(2.3s * var(--dlawg-t, 1)) cubic-bezier(0.32, 0, 0.2, 1) calc(var(--dlawg-sheen-d, 0.8s) * var(--dlawg-t, 1)) both;
}

html.dlawg-armed #dlawg-gate.has-sheen.has-ambient .dlawg-emblem__sheen {
	animation: dlawg-sheen-loop 11s cubic-bezier(0.32, 0, 0.2, 1) calc(var(--dlawg-sheen-d, 0.8s) * var(--dlawg-t, 1)) infinite both;
}

/* -------------------------------------------------------------- iesirea */

/* Elementele interioare sunt sub o animatie CSS cu fill both. Daca la iesire
   doar anulam animatia si punem valori noi cu transition, browserul nu mai
   porneste tranzitia si continutul dispare instant. De aceea iesirea lor este
   tot pe keyframes: o animatie o inlocuieste curat pe cealalta. */

@keyframes dlawg-disperse {
	to {
		opacity: 0;
		transform: translateY(-18px) scale(1.03);
		filter: blur(12px);
	}
}

@keyframes dlawg-disperse-emblem {
	to {
		opacity: 0;
		transform: translateY(-16px) scale(1.16);
		filter: blur(16px);
	}
}

#dlawg-gate.is-leaving {
	opacity: 0;
	transform: scale(1.055);
	filter: blur(var(--dlawg-exit-blur, 22px));
	pointer-events: none;
	transition:
		opacity calc(0.82s * var(--dlawg-t, 1)) cubic-bezier(0.5, 0, 0.85, 0.45),
		transform calc(1s * var(--dlawg-t, 1)) cubic-bezier(0.36, 0, 0.2, 1),
		filter calc(0.82s * var(--dlawg-t, 1)) cubic-bezier(0.5, 0, 0.85, 0.45);
}

#dlawg-gate.is-leaving .dlawg-gate__bg {
	opacity: 0;
	transition: opacity calc(0.78s * var(--dlawg-t, 1)) cubic-bezier(0.5, 0, 0.85, 0.45);
}

@supports ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
	#dlawg-gate.is-leaving .dlawg-gate__bg {
		-webkit-backdrop-filter: blur(16px);
		backdrop-filter: blur(16px);
	}
}

html.dlawg-armed #dlawg-gate.is-leaving [data-anim] {
	animation: dlawg-disperse calc(0.62s * var(--dlawg-t, 1)) cubic-bezier(0.4, 0, 0.7, 0.4) calc(var(--dout, 0s) * var(--dlawg-t, 1)) forwards;
}

html.dlawg-armed #dlawg-gate.is-leaving .dlawg-emblem[data-anim] {
	animation-name: dlawg-disperse-emblem;
	animation-duration: calc(0.72s * var(--dlawg-t, 1));
}

html.dlawg-armed #dlawg-gate.is-leaving .dlawg-rule__line,
html.dlawg-armed #dlawg-gate.is-leaving .dlawg-emblem__sheen {
	animation: none;
}

/* ------------------------------------------------------------ accesibil */

@media (prefers-reduced-motion: reduce) {
	html.dlawg-armed #dlawg-gate [data-anim],
	html.dlawg-armed #dlawg-gate .dlawg-rule__line,
	html.dlawg-armed #dlawg-gate .dlawg-emblem__sheen {
		animation: none !important;
	}

	#dlawg-gate .dlawg-emblem__sheen {
		display: none;
	}

	#dlawg-gate .dlawg-type__live.is-typing::after {
		animation: none;
	}

	html.dlawg-armed #dlawg-gate.is-leaving [data-anim],
	html.dlawg-armed #dlawg-gate.is-leaving .dlawg-emblem[data-anim] {
		animation: none !important;
	}

	#dlawg-gate.is-leaving {
		transform: none;
		filter: none;
		transition: opacity 0.35s ease;
	}

	#dlawg-gate.is-leaving .dlawg-gate__bg {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	#dlawg-gate .dlawg-enter {
		transition: background-color 0.2s ease;
	}

	#dlawg-gate .dlawg-enter:hover,
	#dlawg-gate .dlawg-enter:focus-visible {
		letter-spacing: 0.05em;
	}
}

/* ----------------------------------------------------------- responsive */

@media (max-width: 480px) {
	#dlawg-gate .dlawg-motto {
		letter-spacing: 0.15em;
	}
}

/* Latimea emblemei pe mobil, setabila separat din admin. Plafonul de 62vw
   garanteaza ca nu iese din ecran nici cu valori mari. */
@media (max-width: 782px) {
	#dlawg-gate .dlawg-emblem {
		width: min(var(--dlawg-logo-w-m, 190px), 62vw);
	}
}

/* Ecrane joase sau telefon in landscape: totul se compacteaza. */
@media (max-height: 640px) and (orientation: landscape) {
	#dlawg-gate .dlawg-gate__inner {
		gap: 10px;
		padding: 16px 24px 18px;
	}

	#dlawg-gate .dlawg-gate__main {
		gap: 10px;
	}

	#dlawg-gate .dlawg-emblem {
		width: min(104px, 17vw);
	}

	#dlawg-gate .dlawg-title {
		font-size: calc(clamp(1rem, 2.9vw, 1.55rem) * var(--dlawg-fs-title, 1));
	}

	#dlawg-gate .dlawg-cta {
		padding-top: 0;
	}

	#dlawg-gate .dlawg-enter {
		min-height: calc(42px * var(--dlawg-btn-scale, 1));
		padding: calc(10px * var(--dlawg-btn-scale, 1)) calc(44px * var(--dlawg-btn-scale, 1));
		font-size: calc(1.05rem * var(--dlawg-fs-btn, 1));
	}

	#dlawg-gate .dlawg-foot {
		gap: 6px;
	}

	#dlawg-gate .dlawg-motto {
		font-size: 0.72rem;
	}

	#dlawg-gate .dlawg-tagline {
		font-size: 0.6rem;
		line-height: 1.7;
	}
}