/* =========== © 2025 Centroarts.com for https://magenta.su =========== */

:root {
	--heading-fs: clamp(36px, 4vw, 56px);
	--heading-lh: 1.25em;
	--vert-gap: 32px;
}

.page-form { flex: 1 1 auto; padding: var(--pad-y) 0; position: relative; }
.heading-back { display: flex; margin-bottom: 8px; }
.heading-back-btn {
	position: relative;
	display: flex; align-items: center; font-weight: bold; gap: 6px;
	padding: 8px; margin: -8px; margin-right: 0; text-decoration: none !important;
}
.heading-back-btn .ic { transition: transform .15s ease; }
.heading-back-btn:hover .ic { transform: translateX(-2px); }

.heading { 
	font-size: var(--heading-fs);
	line-height: var(--heading-lh);
	margin-bottom: 32px;
}

@media (min-width: 768px) {
	.page-form-g1 { max-width: 640px; }
	.page-form-bg { display: block !important; position: absolute; inset: 0; z-index: -1; overflow: hidden; }
	.page-form-bg .wrp { position: relative; height: 100%; }
	.page-form-bg-img { position: absolute; left: calc(640px + var(--wrp-pad)); top: 0; padding: 80px; }
	.page-form-bg-img img {
		display: block; aspect-ratio: 1/1; width: 1400px; height: 1400px;
	}

	.gradient { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
	.gradient > i {
		--g-rd: 600px;
		position: absolute; left: calc(50% - var(--g-rd)); top: calc(50% - var(--g-rd));
	}
	.gradient > i::after { content: ""; display: block; width: calc(var(--g-rd)*2); aspect-ratio: 1/1; }

	html:not(.load) .gradient-magenta { animation: g-magenta 5s ease infinite 1s; }
	html:not(.load) .gradient-yellow { animation: g-yellow 5.5s ease infinite 1s; }

	.gradient-magenta { transform: translate(10%, -12%); will-change: transform; }
	.gradient-yellow { transform: translate(-14%, 12%); will-change: transform; }

	.gradient-magenta:after { background-image: radial-gradient(closest-side, rgba(var(--color-primary-rgb), 0.3) 0%, rgba(var(--color-primary-rgb), 0) 100%); }
	.gradient-yellow:after { background-image: radial-gradient(closest-side, rgba(var(--color-second-rgb), 0.3) 0%, rgba(var(--color-second-rgb), 0) 100%); }

	@keyframes g-magenta {
		0% { transform: translate(10%, -12%); }
		30% { transform: translate(-16%, 12%); }
		70% { transform: translate(-16%, 12%); }
		100% { transform: translate(10%, -12%); }
	}
	@keyframes g-yellow {
		0% { transform: translate(-14%, 12%); }
		30% { transform: translate(8%, -12%); }
		70% { transform: translate(8%, -12%); }
		100% { transform: translate(-14%, 12%); }
	}
}

/* Reg Success */
.reg-s-head { font-size: clamp(26px, 4vw, 48px); max-width: 600px; }
.reg-s-head * { font-size: inherit; line-height: 1.25em; font-weight: bold; margin-bottom: 0; }

.reg-s-socials { display: flex; justify-content: center; gap: 12px; }
.reg-s-social {
	position: relative; z-index: 1; flex: 1;
	font-size: 14px; line-height: 24px; white-space: nowrap;
	border-radius: 32px; box-shadow: inset 0 0 0 1px rgba(var(--color-text-rgb), 0.2);
	padding: 24px 16px;
	
	transition: box-shadow .2s ease;
}
.reg-s-social:hover { box-shadow: inset 0 0 0 1px rgba(var(--color-text-rgb), 0.4); }
.reg-s-social-qr { display: none; }

.reg-s-social-cont { font-weight: bold; }
.reg-s-social a { color: inherit !important; text-decoration: none !important; }
.reg-s-social a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

@media (max-width: 991px) {
	.reg-s-box { text-align: center; }
	.reg-s-head { margin-left: auto; margin-right: auto; max-width: 480px; }

	.reg-s-head::after {
		--arrow-img: url(../images/forms/arrow-down.svg);

		content: ""; display: block; margin: 32px auto;
		background-color: var(--color-primary);
		background-image: linear-gradient(180deg, var(--color-primary) -4.54%, var(--color-second) 96.27%);
		width: 30px; height: 44px;
		mask-size: contain; -webkit-mask-size: contain;
		mask-position: center; -webkit-mask-position: center;
		mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
		mask-image: var(--arrow-img); -webkit-mask-image: var(--arrow-img);
	}
}
@media (max-width: 767px) {
	.reg-s-social-cont .ic { width: 48px; height: 48px; margin: 0 auto; margin-bottom: 12px; }
}
@media (min-width: 768px) {
	.reg-s-socials { gap: 24px; }
	.reg-s-social { max-width: 232px; min-width: 200px; padding: 24px; padding-bottom: 20px; }
	.reg-s-social-qr { display: block; }
	.reg-s-social-qr img { display: block; width: 100%; height: auto; aspect-ratio: 1/1; }
	.reg-s-social-cont { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; }
}
@media (min-width: 992px) {
	.reg-s-box { display: flex; align-items: center; justify-content: space-between; gap: 48px; padding-top: 198px; padding-bottom: 198px; }
	.reg-s-head { flex: 1 1 auto; max-width: 600px; }
	
	.reg-s-social::before {
		content: ""; display: block; position: absolute; right: 50%;
		
		background-color: var(--color-primary);
		background-image: linear-gradient(90deg, var(--color-primary) -4.54%, var(--color-second) 96.27%);
		width: 564px; height: 140px;
		mask-size: contain; -webkit-mask-size: contain;
		mask-position: center; -webkit-mask-position: center;
		mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
		mask-image: var(--arrow-img); -webkit-mask-image: var(--arrow-img);
	}

	.reg-s-social:first-child::before {
		--arrow-img: url(../images/forms/arrow-flex-down.svg);
		bottom: 100%; margin-bottom: 48px; transform-origin: bottom left;

		animation: arrow-first 3s ease infinite;
	}
	.reg-s-social:last-child::before {
		--arrow-img: url(../images/forms/arrow-flex-up.svg);
		top: 100%; margin-top: 48px; transform-origin: top left;

		animation: arrow-second 3s ease infinite;
	}

	@keyframes arrow-first {
		75% { transform: rotate(0deg); }
		80% { transform: rotate(2deg); }
		85% { transform: rotate(0deg); }
	}
	@keyframes arrow-second {
		45% { transform: rotate(0deg); }
		50% { transform: rotate(-2deg); }
		55% { transform: rotate(0deg); }
	}
}