/* ── VibeOra Login Page ──────────────────────────────────────────────────── */

/* ── Wrap ── */
#login_wrap.vb_wrap {
	width: 100%;
	min-height: 100%;
	position: relative;
	overflow: hidden;
	background: #05081a;
	color: #fff;
}

/* ── Scene: background image + overlay ── */
.vb_scene {
	position: fixed;
	inset: 0;
	z-index: 0;
}
.vb_scene::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url('images/background.jpeg') center center / cover no-repeat;
	z-index: 0;
}
.vb_overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(5,8,26,0.78) 0%, rgba(18,10,45,0.72) 50%, rgba(5,8,26,0.82) 100%);
	z-index: 1;
}

/* ── Glowing orbs ── */
.vb_glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	z-index: 1;
	pointer-events: none;
	animation: vbGlow 10s ease-in-out infinite;
}
.vb_g1 {
	width: 520px; height: 520px;
	background: rgba(124, 58, 237, 0.28);
	top: -120px; left: -160px;
	animation-duration: 9s;
}
.vb_g2 {
	width: 420px; height: 420px;
	background: rgba(6, 182, 212, 0.2);
	bottom: -100px; right: -120px;
	animation-duration: 12s;
	animation-direction: reverse;
}
.vb_g3 {
	width: 300px; height: 300px;
	background: rgba(236, 72, 153, 0.16);
	top: 45%; right: 18%;
	animation-duration: 14s;
	animation-delay: 2s;
}

/* ── Floating background tags ── */
.vb_bg_tags {
	position: fixed;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
}
.vb_ftag {
	position: absolute;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	white-space: nowrap;
	border: 1px solid;
}
.vb_ft1 { top: 11%; left: 4%;    background: rgba(124,58,237,0.15);  border-color: rgba(124,58,237,0.32);  color: #c4b5fd; animation: vbFloat 7s   ease-in-out infinite; }
.vb_ft2 { top: 20%; right: 6%;   background: rgba(6,182,212,0.12);   border-color: rgba(6,182,212,0.28);   color: #67e8f9; animation: vbFloat 9s   ease-in-out infinite reverse; }
.vb_ft3 { bottom: 30%; left: 4%; background: rgba(236,72,153,0.12);  border-color: rgba(236,72,153,0.28);  color: #f9a8d4; animation: vbFloat 8s   ease-in-out infinite 1s; }
.vb_ft4 { top: 58%; right: 4%;   background: rgba(16,185,129,0.12);  border-color: rgba(16,185,129,0.28);  color: #6ee7b7; animation: vbFloat 11s  ease-in-out infinite; }
.vb_ft5 { bottom: 16%; right: 9%;background: rgba(245,158,11,0.12);  border-color: rgba(245,158,11,0.28);  color: #fcd34d; animation: vbFloat 6s   ease-in-out infinite reverse; }
.vb_ft6 { top: 80%; left: 7%;    background: rgba(59,130,246,0.12);  border-color: rgba(59,130,246,0.28);  color: #93c5fd; animation: vbFloat 10s  ease-in-out infinite 0.5s; }
.vb_ft7 { top: 7%;  left: 28%;   background: rgba(139,92,246,0.12);  border-color: rgba(139,92,246,0.28);  color: #c4b5fd; animation: vbFloat 8s   ease-in-out infinite 2s; }
.vb_ft8 { bottom: 9%; left: 38%; background: rgba(6,182,212,0.12);   border-color: rgba(6,182,212,0.28);   color: #67e8f9; animation: vbFloat 9s   ease-in-out infinite 1.5s; }

/* ── Floating profile cards ── */
.vb_bg_cards {
	position: fixed;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
}
.vb_fcard {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 16px;
	border: 1px solid rgba(255,255,255,0.11);
	background: rgba(8,11,28,0.68);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
.vb_fcard_av {
	width: 36px; height: 36px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-size: 14px; font-weight: 900;
	flex-shrink: 0;
}
.vb_fcard_info { display: flex; flex-direction: column; gap: 3px; }
.vb_fcard_info b { color: #fff; font-size: 13px; line-height: 1; font-weight: 800; }
.vb_fcard_info span { color: #94a3b8; font-size: 11px; font-weight: 600; }
.vb_fc1 { left: 2%;   top: 33%;    animation: vbFloat 9s  ease-in-out infinite; }
.vb_fc2 { right: 2%;  top: 28%;    animation: vbFloat 11s ease-in-out infinite reverse; }
.vb_fc3 { left: 3%;   bottom: 22%; animation: vbFloat 8s  ease-in-out infinite 1s; }
.vb_fc4 { right: 3%;  bottom: 30%; animation: vbFloat 10s ease-in-out infinite 0.7s reverse; }

/* ── Main stage ── */
.vb_stage {
	position: relative;
	z-index: 3;
	width: 100%;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 44px 20px;
	box-sizing: border-box;
}

/* ── Glassmorphism panel ── */
.vb_panel {
	width: min(540px, 94vw);
	padding: 40px 38px;
	border-radius: 26px;
	border: 1px solid rgba(255,255,255,0.11);
	background: rgba(8,11,28,0.74);
	backdrop-filter: blur(26px);
	-webkit-backdrop-filter: blur(26px);
	box-shadow:
		0 32px 90px rgba(0,0,0,0.55),
		inset 0 1px 0 rgba(255,255,255,0.08);
	animation: vbFadeIn 0.65s ease-out both;
}

/* ── Panel top: logo + live pill ── */
.vb_panel_top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 26px;
}
#login_logo {
	height: 50px;
	max-width: 180px;
	object-fit: contain;
}
.vb_live_pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(124,58,237,0.15);
	border: 1px solid rgba(124,58,237,0.3);
	color: #c4b5fd;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.vb_live_dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: #a78bfa;
	box-shadow: 0 0 10px #a78bfa;
	animation: vbPulse 1.6s ease-in-out infinite;
}

/* ── Eyebrow ── */
.vb_eyebrow {
	color: #a78bfa;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

/* ── Hero headline ── */
.vb_hero { margin-bottom: 20px; }
.vb_hero h1 {
	margin: 0 0 12px;
	font-size: clamp(30px, 4.5vw, 44px);
	line-height: 1.1;
	font-weight: 900;
	color: #fff;
	letter-spacing: -0.025em;
}
.vb_grad {
	background: linear-gradient(135deg, #a78bfa 0%, #38bdf8 50%, #f472b6 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.vb_hero p {
	margin: 0;
	color: #94a3b8;
	font-size: 14px;
	line-height: 1.7;
	font-weight: 500;
	max-width: 420px;
}

/* ── Inline interest tags ── */
.vb_itags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 26px;
}
.vb_itags span {
	padding: 5px 13px;
	border-radius: 999px;
	background: rgba(139,92,246,0.16);
	border: 1px solid rgba(167,139,250,0.28);
	color: #c4b5fd;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* ── Buttons ── */
.vb_actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 16px;
}
.vb_btn_primary {
	width: 100%;
	min-height: 50px;
	padding: 0 20px;
	border: 0;
	border-radius: 14px;
	font-size: 15px;
	font-weight: 800;
	cursor: pointer;
	color: #fff;
	background: linear-gradient(135deg, #7c3aed 0%, #2563eb 55%, #0891b2 100%);
	background-size: 220% 220%;
	box-shadow: 0 8px 28px rgba(124,58,237,0.4);
	animation: vbBtnShift 5s ease-in-out infinite;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.vb_btn_primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 36px rgba(124,58,237,0.52);
}
.vb_btn_primary i { margin-right: 8px; }
.vb_btn_ghost {
	width: 100%;
	min-height: 50px;
	padding: 0 20px;
	border: 1px solid rgba(255,255,255,0.16);
	border-radius: 14px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	color: #cbd5e1;
	background: rgba(255,255,255,0.06);
	transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.vb_btn_ghost:hover {
	background: rgba(255,255,255,0.11);
	border-color: rgba(255,255,255,0.26);
	transform: translateY(-2px);
}

/* ── Register row ── */
.vb_register {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 4px;
	margin-bottom: 20px;
	color: #64748b;
	font-size: 13px;
	font-weight: 600;
}
.vb_register button {
	border: 0; padding: 0;
	background: transparent;
	color: #a78bfa;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}
.vb_register button:hover { color: #c4b5fd; }

/* ── Divider ── */
.vb_divider {
	width: 100%;
	height: 1px;
	background: rgba(255,255,255,0.08);
	margin-bottom: 18px;
}

/* ── DigitalPlat badge wrapper ── */
.vb_digitalplat { width: 100%; }

/* ── Language picker ── */
#intro_lang {
	position: fixed;
	top: 16px; right: 18px;
	z-index: 10;
	width: 40px; height: 40px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,0.09);
	border: 1px solid rgba(255,255,255,0.15);
	backdrop-filter: blur(10px);
}
#intro_lang img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }

/* ── Footer ── */
.page_footer { position: relative; z-index: 5; }

/* ── Keyframes ── */
@keyframes vbFadeIn {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes vbFloat {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-13px); }
}
@keyframes vbGlow {
	0%, 100% { opacity: 0.75; transform: scale(1); }
	50%       { opacity: 1;    transform: scale(1.12); }
}
@keyframes vbPulse {
	0%, 100% { transform: scale(0.85); opacity: 0.7; }
	50%       { transform: scale(1.25); opacity: 1; }
}
@keyframes vbBtnShift {
	0%, 100% { background-position: 0% 50%; }
	50%       { background-position: 100% 50%; }
}

/* ── Responsive ── */
@media screen and (max-width: 1100px) {
	.vb_fc1, .vb_fc2, .vb_fc3, .vb_fc4 { display: none; }
}
@media screen and (max-width: 860px) {
	.vb_ft7, .vb_ft8 { display: none; }
}
@media screen and (max-width: 640px) {
	.vb_bg_tags  { display: none; }
	.vb_bg_cards { display: none; }
	.vb_panel { padding: 30px 22px; border-radius: 20px; }
	.vb_stage { align-items: flex-start; padding-top: 56px; }
	.vb_hero h1 { font-size: 28px; }
}