/*
Theme Name: BuddyBoss Child
Template: buddyboss-theme
Version: 2.0
Description: Чистий child-theme стиль. CSS-токени не перепроголошує — використовує тільки --vx-* з vibex-design-system.css.
*/

/* =====================================================================
   ВАЖЛИВО: цей файл НЕ оголошує :root { --vx-* }.
   Токени живуть в /css/vibex-design-system.css і завантажуються першими
   через vibex-design-system-loader.php (mu-plugin).
   ===================================================================== */

/* =====================================================================
   1. ГЛОБАЛЬНИЙ ФОН
   ===================================================================== */
html, body, #page, .site {
	background: var(--vx-bg) !important;
	color: var(--vx-text);
	font-family: var(--vx-font-body);
}

/* =====================================================================
   2. FULL-WIDTH LAYOUT (тільки головна / .home)
   ===================================================================== */
.home .site, .home .site-content,
.home .site-content .container,
.home .bb-container, .home .container,
.home .content-area, .home #primary {
	max-width: 100% !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

.home .entry-header,
.home .page-title { display: none !important; }

.home .site-content {
	padding: 0 !important;
	margin: 0 !important;
}

.vibex-hero-wrapper {
	width: 100%;
	background: var(--vx-bg);
	min-height: 100vh;
}

/* =====================================================================
   3. HERO SECTION — edge-to-edge
   ===================================================================== */
.home .elementor-section:first-of-type {
	position: relative;
	overflow: hidden;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	min-height: 100vh !important;
	padding-top: 110px !important;
	z-index: 10;
}

.home .elementor-section:first-of-type .elementor-container {
	position: relative;
	z-index: 10;
	max-width: 100% !important;
	width: 100% !important;
	padding: 0 !important;
}

/* Gradient + particle bg (декор героя) */
.home .elementor-section:first-of-type::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 30%, rgba(255,45,126,.18), transparent 60%),
		radial-gradient(circle at 80% 70%, rgba(168,85,247,.18), transparent 60%),
		radial-gradient(circle at 20% 40%, rgba(255,45,126,.45) 2px, transparent 3px),
		radial-gradient(circle at 70% 60%, rgba(168,85,247,.45) 2px, transparent 3px);
	background-size: 100% 100%, 100% 100%, 300px 300px, 300px 300px;
	animation: vxGradMove 14s ease-in-out infinite alternate,
	           vxParticles 30s linear infinite;
	pointer-events: none;
	z-index: 1;
}

/* Light sweep */
.home .elementor-section:first-of-type::after {
	content: "";
	position: absolute;
	top: -50%; left: -30%;
	width: 60%; height: 200%;
	background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.08) 50%, transparent 100%);
	transform: rotate(25deg);
	animation: vxLightMove 10s linear infinite;
	pointer-events: none;
	z-index: 2;
}

@keyframes vxGradMove {
	0%   { transform: translate(0, 0) scale(1); }
	100% { transform: translate(-50px, 40px) scale(1.08); }
}
@keyframes vxParticles {
	from { background-position: 0 0, 0 0, 0 0, 0 0; }
	to   { background-position: 0 0, 0 0, 400px 600px, -300px 500px; }
}
@keyframes vxLightMove {
	0%   { transform: translateX(-100%) rotate(25deg); }
	100% { transform: translateX(200%) rotate(25deg); }
}

/* Hero heading breathing */
.home .elementor-heading-title {
	animation: vxBreath 6s ease-in-out infinite;
	letter-spacing: 2px;
	font-weight: 700;
	color: #fff !important;
}
@keyframes vxBreath {
	0%, 100% { text-shadow: 0 0 10px rgba(255,45,126,.4); transform: scale(1); }
	50%      { text-shadow: 0 0 25px rgba(255,45,126,.9), 0 0 50px rgba(255,45,126,.6); transform: scale(1.02); }
}

/* =====================================================================
   4. GLASS HEADER (тільки на головній)
   ===================================================================== */
.home .site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 9999;
	width: calc(100% - 40px);
	max-width: 1400px;
	margin: 15px auto;
	border-radius: var(--vx-radius);
	background: rgba(10,6,18,.7) !important;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--vx-line-pink);
	box-shadow: 0 10px 40px rgba(0,0,0,.6), 0 0 25px rgba(255,45,126,.2);
	transition: all .4s ease;
}

.home .site-header.scrolled {
	background: rgba(10,0,25,.95) !important;
	box-shadow: 0 0 30px rgba(255,45,126,.4), 0 10px 60px rgba(0,0,0,.8);
}

.home .site-header::after {
	content: "";
	position: absolute;
	bottom: 0; left: 0;
	width: 100%; height: 2px;
	background: linear-gradient(90deg, transparent, var(--vx-pink), var(--vx-pink-2), transparent);
	animation: vxLineBreath 3s linear infinite;
	border-radius: 0 0 var(--vx-radius) var(--vx-radius);
}
@keyframes vxLineBreath {
	0%, 100% { opacity: .3; }
	50%      { opacity: 1; }
}

.home .site-header svg,
.home .site-header i {
	color: var(--vx-pink) !important;
	fill: var(--vx-pink) !important;
	filter: drop-shadow(0 0 8px rgba(255,45,126,.8));
}

.home .site-title a {
	color: #fff !important;
	font-weight: 700;
}
.home .site-title a:hover {
	text-shadow: 0 0 10px rgba(255,45,126,.8);
}

.home .site-title::after {
	content: "18+";
	display: inline-block;
	margin-left: 12px;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	color: #000;
	background: var(--vx-grad);
	border-radius: 20px;
	vertical-align: middle;
	animation: vxBadgePulse 3s ease-in-out infinite;
}
@keyframes vxBadgePulse {
	0%, 100% { transform: scale(1);    box-shadow: 0 0 10px rgba(255,45,126,.8); }
	50%      { transform: scale(1.08); box-shadow: 0 0 20px rgba(255,45,126,1); }
}

body.admin-bar .home .site-header { top: 32px !important; }
@media (max-width: 782px) {
	body.admin-bar .home .site-header { top: 46px !important; }
}

/* Сховуємо Sign in / Sign up на головній */
.home .signin-button, .home .signup,
.home .bb-login-button, .home .header-signin, .home .header-signup,
.home .bb-header-buttons a[href*="login"],
.home .bb-header-buttons a[href*="register"],
.home header a[href*="login"],
.home header a[href*="register"] {
	display: none !important;
}

/* Активний пункт меню */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	position: relative;
	color: var(--vx-pink) !important;
	text-shadow: 0 0 10px var(--vx-pink);
}
.main-navigation .current-menu-item > a::after {
	content: '';
	position: absolute;
	bottom: -5px; left: 0;
	width: 100%; height: 3px;
	background: linear-gradient(90deg, transparent, var(--vx-pink), var(--vx-pink-2), transparent);
	animation: vxLineBreath 2s linear infinite;
	border-radius: 3px;
}

/* =====================================================================
   5. ELEMENTOR BUTTONS — неон + блискавка
   ===================================================================== */
.home .elementor-button {
	position: relative;
	overflow: hidden;
	background-image: linear-gradient(135deg, var(--vx-pink), var(--vx-pink-2), var(--vx-pink)) !important;
	background-size: 200% auto;
	box-shadow: 0 0 15px rgba(255,45,126,.6), 0 0 30px rgba(255,45,126,.4);
	transition: all .4s ease;
	border-radius: 40px;
	color: #fff !important;
}
.home .elementor-button:hover {
	transform: translateY(-4px) scale(1.05);
	box-shadow: 0 0 25px rgba(255,45,126,.9), 0 0 60px rgba(255,45,126,.6);
	background-position: right center;
}
.home .elementor-button::after {
	content: "";
	position: absolute;
	top: 0; left: -100%;
	width: 100%; height: 100%;
	background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
	transition: left .6s ease;
}
.home .elementor-button:hover::after { left: 100%; }

/* =====================================================================
   6. VIBEX HERO PROFILES CARDS (старий шорткод [vibex_ultra_hero_profiles])
   Якщо ще використовується. Новий — [vibex_profiles_grid] з user-cards.
   ===================================================================== */
.vibex-hero-profiles {
	position: relative;
	display: block;
	width: 100%;
	padding: 0 16px;
}
.vibex-hero-profiles-inner {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 18px;
	max-width: 1280px;
	margin: 0 auto;
}
.vibex-hero-card {
	position: relative;
	border-radius: var(--vx-r-lg);
	overflow: hidden;
	background: var(--vx-glass);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid var(--vx-line);
	transition: transform .3s var(--vx-ease), box-shadow .3s var(--vx-ease);
	cursor: pointer;
	aspect-ratio: 3 / 4;
}
.vibex-hero-card:hover {
	transform: translateY(-4px) scale(1.02);
	box-shadow: 0 16px 40px rgba(255,45,126,.3);
	border-color: var(--vx-line-pink-2);
}
.vibex-hero-card-image {
	position: absolute;
	inset: 0;
}
.vibex-hero-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vibex-hero-hover {
	position: absolute;
	bottom: 0; left: 0;
	width: 100%;
	padding: 16px;
	background: linear-gradient(to top, rgba(10,6,18,.92), rgba(10,6,18,0));
	color: #fff;
	transform: translateY(20%);
	opacity: 0;
	transition: all .3s var(--vx-ease);
}
.vibex-hero-card:hover .vibex-hero-hover,
@media (hover: none) {
	.vibex-hero-hover {
		transform: translateY(0);
		opacity: 1;
	}
}

.vibex-hero-hover h4 {
	margin: 0 0 4px;
	font: 700 17px/1.2 var(--vx-font-body);
	color: #fff;
}
.vibex-hero-hover .vibex-status {
	display: block;
	font: 500 12px/1.3 var(--vx-font-body);
	color: var(--vx-text-3);
	margin-bottom: 10px;
}
.vibex-online-label {
	color: var(--vx-green);
	font-weight: 700;
}

.vibex-mini-cta {
	display: inline-block;
	padding: 7px 16px;
	background: var(--vx-grad);
	color: #fff !important;
	text-decoration: none;
	border-radius: var(--vx-r-pill);
	font: 700 12px/1 var(--vx-font-body);
	box-shadow: 0 4px 14px rgba(255,45,126,.4);
}

/* Бейджи — Pair / Model */
.vibex-badge {
	position: absolute;
	left: 10px;
	z-index: 3;
	padding: 4px 10px;
	border-radius: 50px;
	font: 700 11px/1 var(--vx-font-body);
	letter-spacing: .5px;
	color: #fff;
	backdrop-filter: blur(8px);
}
.vibex-badge.couple {
	background: rgba(168,85,247,.85);
	box-shadow: 0 4px 12px rgba(168,85,247,.5);
}
.vibex-badge.model {
	background: rgba(255,45,126,.85);
	box-shadow: 0 4px 12px rgba(255,45,126,.5);
}

/* Онлайн-точка */
.vibex-online-dot {
	position: absolute;
	top: 10px; right: 10px;
	width: 12px; height: 12px;
	background: var(--vx-green);
	border-radius: 50%;
	box-shadow: 0 0 0 2px rgba(46,204,113,.3), 0 0 8px var(--vx-green);
	animation: vxOnlinePulse 2s ease-in-out infinite;
	z-index: 3;
}
@keyframes vxOnlinePulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50%      { transform: scale(1.2); opacity: .8; }
}

/* Locked overlay для неавторизованих */
.vibex-profiles-locked {
	position: relative;
}
.vibex-profiles-locked::after {
	content: "Увійди, щоб побачити більше";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, transparent 0%, rgba(10,6,18,.9) 70%);
	color: #fff;
	font: 700 18px/1.3 var(--vx-font-body);
	pointer-events: none;
	z-index: 4;
}

/* =====================================================================
   7. LOADER (показується на старті, ховається після load)
   ===================================================================== */
#vibex-loader {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--vx-bg);
	transition: opacity .4s ease, visibility .4s ease;
}
#vibex-loader.hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.vibex-logo-loader {
	font: 800 36px/1 var(--vx-font-display);
	letter-spacing: 4px;
	background: var(--vx-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: vxLogoPulse 1.4s ease-in-out infinite;
}
@keyframes vxLogoPulse {
	0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 10px rgba(255,45,126,.5)); }
	50%      { transform: scale(1.05); filter: drop-shadow(0 0 25px rgba(255,45,126,.9)); }
}

/* Транзишн між сторінками (для PJAX-like ефекту) */
#vibex-transition {
	position: fixed;
	inset: 0;
	z-index: 99998;
	background: var(--vx-bg);
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease;
}
#vibex-transition.active {
	opacity: 1;
	pointer-events: all;
}

/* =====================================================================
   8. CURSOR GLOW (десктоп only)
   ===================================================================== */
@media (hover: hover) and (pointer: fine) {
	#vibex-cursor-glow {
		position: fixed;
		pointer-events: none;
		width: 24px; height: 24px;
		border-radius: 50%;
		background: radial-gradient(circle, rgba(255,45,126,.45), transparent 70%);
		transform: translate(-50%, -50%);
		z-index: 99997;
		mix-blend-mode: screen;
		transition: transform .12s linear;
	}
}

/* =====================================================================
   9. АДАПТИВ
   ===================================================================== */
@media (max-width: 768px) {
	.home .site-header {
		width: calc(100% - 16px);
		margin: 8px auto;
	}
	.home .elementor-section:first-of-type {
		padding-top: 90px !important;
	}
	.vibex-hero-profiles-inner {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: 12px;
	}
}

@media (max-width: 480px) {
	.vibex-hero-profiles-inner {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
}