/**
 * Velora Frontend Stylesheet
 *
 * Fallback for browsers without Shadow DOM (Layer 4).
 * In modern browsers, Shadow DOM contains its own isolated styles
 * and this file acts as an additional safety net.
 *
 * @package Velora
 */

/* ══════════════════════════════════════════════════════════════
 * Layer 2 + 3: Namespace Reset
 * ══════════════════════════════════════════════════════════════ */

#velora-root {
	all: revert !important;
	display: block !important;
	position: fixed !important;
	inset: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	z-index: 2147483647 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
	isolation: isolate !important;
	contain: layout style paint !important;

	--velora-font-family: 'Inter', -apple-system, BlinkMacSystemFont,
		'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue',
		sans-serif;
	--velora-font-size-base: 16px;
	--velora-line-height-base: 1.5;
	--velora-color-bg: #0a0a0a;
	--velora-color-fg: #ffffff;
	--velora-color-accent: #c4a35a;
	--velora-color-overlay: rgba(0, 0, 0, 0.85);
	--velora-transition-duration: 0.6s;
	--velora-easing: cubic-bezier(0.22, 1, 0.36, 1);

	font-family: var(--velora-font-family) !important;
	font-size: var(--velora-font-size-base) !important;
	line-height: var(--velora-line-height-base) !important;
	color: var(--velora-color-fg) !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
	text-rendering: optimizeLegibility !important;
}

#velora-root img,
#velora-root video,
#velora-root svg {
	max-width: 100% !important;
	height: auto !important;
	display: block !important;
}

/* ══════════════════════════════════════════════════════════════
 * Enter Screen
 * ══════════════════════════════════════════════════════════════ */

#velora-root .velora-enter {
	position: absolute !important;
	inset: 0 !important;
	z-index: 200 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--velora-color-bg) !important;
}

#velora-root .velora-enter--hidden { display: none !important; }

#velora-root .velora-enter__btn {
	position: relative !important;
	background: transparent !important;
	border: 1px solid rgba(255,255,255,0.2) !important;
	color: var(--velora-color-fg) !important;
	padding: 16px 48px !important;
	font-size: 14px !important;
	letter-spacing: 0.25em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	font-family: var(--velora-font-family) !important;
	transition: all 0.3s ease !important;
}

#velora-root .velora-enter__btn:hover {
	border-color: var(--velora-color-accent) !important;
	color: var(--velora-color-accent) !important;
}

#velora-root .velora-enter__btn-ring {
	position: absolute !important;
	inset: -6px !important;
	border: 1px solid rgba(255,255,255,0.06) !important;
	animation: velora-pulse 2.5s ease-in-out infinite !important;
}

@keyframes velora-pulse {
	0%, 100% { opacity: 0.3; transform: scale(1); }
	50% { opacity: 0.8; transform: scale(1.02); }
}

/* ══════════════════════════════════════════════════════════════
 * Preloader
 * ══════════════════════════════════════════════════════════════ */

#velora-root .velora-preloader {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	background: var(--velora-color-bg) !important;
	position: absolute !important;
	inset: 0 !important;
	z-index: 100 !important;
	opacity: 1 !important;
	transition: opacity 0.5s ease !important;
}

#velora-root .velora-preloader--hidden {
	opacity: 0 !important;
	pointer-events: none !important;
}

#velora-root .velora-preloader__logo {
	margin-bottom: 20px !important;
	padding-bottom: 0 !important;
}
#velora-root .velora-preloader__logo img { max-width: 100% !important; height: auto !important; object-fit: contain !important; }

#velora-root .velora-preloader__bar-track {
	width: min(320px, 80vw) !important;
	height: 3px !important;
	background: rgba(255,255,255,0.1) !important;
	border-radius: 2px !important;
	overflow: hidden !important;
	position: relative !important;
}

#velora-root .velora-preloader__bar-fill {
	width: 0% !important;
	height: 100% !important;
	background: var(--velora-color-accent) !important;
	border-radius: 2px !important;
	transition: width 0.3s var(--velora-easing) !important;
	will-change: width !important;
}

#velora-root .velora-preloader__footer {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: min(320px, 80vw) !important;
	margin-top: 12px !important;
}

#velora-root .velora-preloader__text {
	font-size: 0.7rem !important;
	letter-spacing: 0.15em !important;
	text-transform: uppercase !important;
	opacity: 0.4 !important;
}

#velora-root .velora-preloader__pct {
	font-size: 0.7rem !important;
	letter-spacing: 0.08em !important;
	font-variant-numeric: tabular-nums !important;
	color: var(--velora-color-accent) !important;
	opacity: 0.7 !important;
}

/* ══════════════════════════════════════════════════════════════
 * Transitions
 * ══════════════════════════════════════════════════════════════ */

#velora-root .velora-transition {
	position: absolute !important;
	inset: 0 !important;
	z-index: 50 !important;
	pointer-events: none !important;
}

#velora-root .velora-transition__panel {
	position: absolute !important;
	background: var(--velora-color-bg) !important;
	will-change: transform, opacity !important;
}

#velora-root .velora-transition__panel--full { inset: 0 !important; }
#velora-root .velora-transition__panel--a,
#velora-root .velora-transition__panel--b { inset: 0 !important; }

#velora-root [data-style="curtain"] .velora-transition__panel--a { right: 50% !important; }
#velora-root [data-style="curtain"] .velora-transition__panel--b { left: 50% !important; }
#velora-root [data-style="split"] .velora-transition__panel--a { bottom: 50% !important; }
#velora-root [data-style="split"] .velora-transition__panel--b { top: 50% !important; }

/* ══════════════════════════════════════════════════════════════
 * Maintenance Page
 * ══════════════════════════════════════════════════════════════ */

#velora-root .velora-maintenance {
	position: absolute !important;
	inset: 0 !important;
	z-index: 90 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
}

#velora-root .velora-maintenance__bg-video,
#velora-root .velora-maintenance__bg-image {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	background-size: cover !important;
	background-position: center !important;
}

#velora-root .velora-maintenance__overlay {
	position: absolute !important;
	inset: 0 !important;
	background: #000 !important;
}

#velora-root .velora-maintenance__content {
	position: relative !important;
	z-index: 1 !important;
	text-align: center !important;
	max-width: 600px !important;
	padding: 2rem !important;
}

#velora-root .velora-maintenance__logo { max-width: 100% !important; height: auto !important; object-fit: contain !important; margin: 0 auto 1rem !important; }
#velora-root .velora-maintenance__heading { font-size: clamp(1.5rem, 4vw, 2.5rem) !important; font-weight: 700 !important; margin-bottom: 1rem !important; line-height: 1.2 !important; }
#velora-root .velora-maintenance__desc { font-size: 1rem !important; opacity: 0.7 !important; line-height: 1.6 !important; margin-bottom: 2rem !important; }

/* Position presets */
#velora-root .velora-maintenance--top-left { align-items: flex-start !important; justify-content: flex-start !important; }
#velora-root .velora-maintenance--top-center { align-items: flex-start !important; justify-content: center !important; }
#velora-root .velora-maintenance--top-right { align-items: flex-start !important; justify-content: flex-end !important; }
#velora-root .velora-maintenance--center-left { align-items: center !important; justify-content: flex-start !important; }
#velora-root .velora-maintenance--center { align-items: center !important; justify-content: center !important; }
#velora-root .velora-maintenance--center-right { align-items: center !important; justify-content: flex-end !important; }
#velora-root .velora-maintenance--bottom-left { align-items: flex-end !important; justify-content: flex-start !important; }
#velora-root .velora-maintenance--bottom-center { align-items: flex-end !important; justify-content: center !important; }
#velora-root .velora-maintenance--bottom-right { align-items: flex-end !important; justify-content: flex-end !important; }

/* Countdown */
#velora-root .velora-countdown {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px !important;
	margin-bottom: 2rem !important;
}

#velora-root .velora-countdown__unit { text-align: center !important; }
#velora-root .velora-countdown__num { display: block !important; font-size: clamp(2rem, 5vw, 3.5rem) !important; font-weight: 700 !important; font-variant-numeric: tabular-nums !important; color: var(--velora-color-accent) !important; }
#velora-root .velora-countdown__label { font-size: 0.65rem !important; text-transform: uppercase !important; letter-spacing: 0.15em !important; opacity: 0.5 !important; }
#velora-root .velora-countdown__sep { font-size: 2rem !important; opacity: 0.3 !important; padding-bottom: 1.2rem !important; }

/* Social */
#velora-root .velora-social { display: flex !important; gap: 16px !important; justify-content: center !important; margin-top: 2rem !important; }
#velora-root .velora-social__link { color: rgba(255,255,255,0.5) !important; transition: color 0.2s ease, transform 0.2s ease !important; display: flex !important; }
#velora-root .velora-social__link:hover { color: var(--velora-color-accent) !important; transform: translateY(-2px) !important; }

/* Audio Toggle */
#velora-root .velora-audio-toggle {
	position: fixed !important;
	bottom: 20px !important;
	right: 20px !important;
	z-index: 300 !important;
	width: 40px !important;
	height: 40px !important;
	background: rgba(255,255,255,0.08) !important;
	border: 1px solid rgba(255,255,255,0.12) !important;
	border-radius: 50% !important;
	color: var(--velora-color-fg) !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.2s ease !important;
}

#velora-root .velora-audio-toggle:hover { background: rgba(255,255,255,0.15) !important; }

/* ══════════════════════════════════════════════════════════════
 * Accessibility: Reduced Motion
 * ══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	#velora-root *,
	#velora-root *::before,
	#velora-root *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ══════════════════════════════════════════════════════════════
 * Mobile
 * ══════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
	#velora-root .velora-maintenance__content { padding: 1.5rem !important; }
	#velora-root .velora-countdown { gap: 8px !important; }
	#velora-root .velora-countdown__sep { font-size: 1.2rem !important; }
	#velora-root .velora-enter__btn { padding: 14px 36px !important; font-size: 13px !important; }
}

/* ══════════════════════════════════════════════════════════════
 * Body lock when overlay is active
 * ══════════════════════════════════════════════════════════════ */

body.velora-active {
	overflow: hidden !important;
	height: 100vh !important;
}