/*
 * ClubHouseVR — alive.css
 * Layered atmospheric & interactive enhancements.
 * Loads AFTER main.css; everything here is additive.
 * Disable individual blocks by commenting them out — no other styles depend on them.
 */

/* ========================================
   BOOT SEQUENCE
   First-visit-per-session loader. ~1.5s total.
   ======================================== */
.chvr-boot {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: var(--bg-0);
	display: grid;
	place-items: center;
	padding: 32px;
	opacity: 1;
	transition: opacity 0.4s var(--ease-out);
}
.chvr-boot.chvr-boot--out { opacity: 0; pointer-events: none; }

.chvr-boot__inner {
	width: 100%;
	max-width: 480px;
	font-family: var(--font-mono);
	color: var(--text-2);
	font-size: 13px;
	line-height: 1.6;
}
.chvr-boot__brand {
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 700;
	color: var(--text-1);
	letter-spacing: -1px;
	margin-bottom: 24px;
	position: relative;
}
.chvr-boot__brand::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -8px;
	width: 60px;
	height: 2px;
	background: var(--volt);
	animation: chvr-boot-bar-expand 0.6s var(--ease-out) forwards;
}
@keyframes chvr-boot-bar-expand {
	from { width: 0; }
	to { width: 100%; }
}
.chvr-boot__log {
	min-height: 140px;
	font-size: 12px;
	color: var(--text-2);
}
.chvr-boot__log > div {
	opacity: 0;
	animation: chvr-boot-line-in 0.2s ease forwards;
	white-space: nowrap;
	overflow: hidden;
}
.chvr-boot__log > div:last-child { color: var(--volt); }
@keyframes chvr-boot-line-in {
	from { opacity: 0; transform: translateX(-4px); }
	to   { opacity: 1; transform: translateX(0); }
}
.chvr-boot__cursor {
	display: inline-block;
	width: 8px;
	height: 14px;
	background: var(--volt);
	vertical-align: -2px;
	margin-left: 4px;
	animation: chvr-boot-blink 0.6s steps(2) infinite;
}
@keyframes chvr-boot-blink {
	0%, 50% { opacity: 1; }
	51%, 100% { opacity: 0; }
}

/* ========================================
   AMBIENT BACKGROUND MOTION
   Subtle drift on the dot grid + slow gradient shift.
   ======================================== */
body::before {
	animation: chvr-drift 40s ease-in-out infinite;
	will-change: background-position;
}
@keyframes chvr-drift {
	0%, 100% { background-position: 0 0; }
	50%      { background-position: 14px 14px; }
}

body {
	background-size: 200% 200%, 200% 200%;
	animation: chvr-gradient-shift 60s ease-in-out infinite;
}
@keyframes chvr-gradient-shift {
	0%, 100% { background-position: 50% 0%, 0% 100%; }
	50%      { background-position: 30% 30%, 30% 70%; }
}

/* Scanline overlay — very faint, contributes to "screen" feel */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	background: linear-gradient(rgba(255,255,255,0.015) 50%, transparent 50%);
	background-size: 100% 4px;
	pointer-events: none;
	z-index: 0;
	mix-blend-mode: overlay;
	animation: chvr-scanline 8s linear infinite;
}
@keyframes chvr-scanline {
	from { background-position: 0 0; }
	to   { background-position: 0 100px; }
}

/* ========================================
   CURSOR SPOTLIGHT ON CARDS
   The card glows where the cursor is.
   ======================================== */
.chvr-card { --mx: 50%; --my: 50%; }
.chvr-card .chvr-card__poster::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle 180px at var(--mx) var(--my), rgba(200,255,0,0.18) 0%, transparent 60%);
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
	z-index: 2;
}
.chvr-card:hover .chvr-card__poster::before { opacity: 1; }

/* ========================================
   GLITCH TEXT ON HERO TITLE
   Fires on load + on hover.
   ======================================== */
.chvr-hero__title {
	position: relative;
	display: inline-block;
}
.chvr-hero__title::before,
.chvr-hero__title::after {
	content: attr(data-text);
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	pointer-events: none;
	opacity: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: inherit;
}
.chvr-hero__title::before { color: var(--cyan); }
.chvr-hero__title::after  { color: var(--magenta); }

.chvr-hero__title.chvr-glitch-active::before {
	animation: chvr-glitch-a 0.55s steps(6) 1;
}
.chvr-hero__title.chvr-glitch-active::after {
	animation: chvr-glitch-b 0.55s steps(6) 1;
}
@keyframes chvr-glitch-a {
	0%, 100% { opacity: 0; transform: translate(0); clip-path: inset(0 0 0 0); }
	10%      { opacity: 0.75; transform: translate(-3px, 1px); clip-path: inset(20% 0 60% 0); }
	30%      { opacity: 0.6;  transform: translate(-2px, -1px); clip-path: inset(60% 0 20% 0); }
	60%      { opacity: 0.4;  transform: translate(3px, 0); clip-path: inset(40% 0 40% 0); }
	80%      { opacity: 0.5;  transform: translate(-1px, 0); clip-path: inset(0 0 80% 0); }
}
@keyframes chvr-glitch-b {
	0%, 100% { opacity: 0; transform: translate(0); clip-path: inset(0 0 0 0); }
	20%      { opacity: 0.7;  transform: translate(3px, 0); clip-path: inset(40% 0 40% 0); }
	50%      { opacity: 0.55; transform: translate(2px, -1px); clip-path: inset(70% 0 10% 0); }
	75%      { opacity: 0.4;  transform: translate(-3px, 1px); clip-path: inset(20% 0 60% 0); }
}

/* ========================================
   SCROLL-TRIGGERED REVEALS
   Bento + section cards reveal as you scroll in.
   ======================================== */
[data-chvr-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
[data-chvr-reveal].chvr-is-revealed {
	opacity: 1;
	transform: translateY(0);
}

/* ========================================
   ACTIVITY TOASTS
   Bottom-left feed of recent community activity.
   ======================================== */
.chvr-activity-feed {
	position: fixed;
	bottom: 24px;
	left: 24px;
	z-index: 200;
	display: flex;
	flex-direction: column-reverse;
	gap: 8px;
	max-width: 320px;
	pointer-events: none;
}
.chvr-activity-toast {
	background: rgba(20, 20, 27, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--border-2);
	border-left: 2px solid var(--volt);
	padding: 10px 14px 10px 12px;
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--text-1);
	line-height: 1.4;
	display: flex;
	align-items: center;
	gap: 10px;
	opacity: 0;
	transform: translateX(-20px);
	transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
	pointer-events: auto;
}
.chvr-activity-toast.chvr-activity-toast--in {
	opacity: 1;
	transform: translateX(0);
}
.chvr-activity-toast__dot {
	width: 6px;
	height: 6px;
	background: var(--volt);
	border-radius: 50%;
	flex-shrink: 0;
	animation: chvr-toast-pulse 1.2s ease-out infinite;
}
.chvr-activity-toast--magenta { border-left-color: var(--magenta); }
.chvr-activity-toast--magenta .chvr-activity-toast__dot { background: var(--magenta); }
.chvr-activity-toast--cyan { border-left-color: var(--cyan); }
.chvr-activity-toast--cyan .chvr-activity-toast__dot { background: var(--cyan); }
@keyframes chvr-toast-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.5; transform: scale(1.3); }
}
.chvr-activity-toast strong { color: var(--text-1); font-weight: 600; }
.chvr-activity-toast em {
	color: var(--volt);
	font-style: normal;
	font-weight: 600;
}

/* ========================================
   LIVE COUNTER PULSE
   Stats values flash when they update.
   ======================================== */
.chvr-pulse-flash {
	animation: chvr-counter-flash 0.6s ease-out;
}
@keyframes chvr-counter-flash {
	0%   { color: var(--text-1); text-shadow: 0 0 0 var(--volt); }
	30%  { color: var(--volt); text-shadow: 0 0 12px var(--volt); }
	100% { color: var(--text-1); text-shadow: 0 0 0 var(--volt); }
}

/* ========================================
   CONFETTI CANVAS (overlays the screen briefly)
   ======================================== */
.chvr-confetti-canvas {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9998;
}

/* ========================================
   CUSTOM CURSOR
   Subtle target reticle on interactive elements.
   ======================================== */
@media (pointer: fine) {
	.chvr-cursor {
		position: fixed;
		top: 0; left: 0;
		width: 28px; height: 28px;
		pointer-events: none;
		z-index: 9999;
		opacity: 0;
		transition: opacity 0.2s ease, width 0.15s ease, height 0.15s ease;
		will-change: transform;
		mix-blend-mode: difference;
	}
	.chvr-cursor svg {
		width: 100%; height: 100%;
		stroke: white;
		fill: none;
	}
	.chvr-cursor--active { opacity: 1; }
	.chvr-cursor--lock { width: 44px; height: 44px; }
}

/* ========================================
   AUDIO TOGGLE
   Floating mute/unmute button.
   ======================================== */
.chvr-audio-toggle {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 40px;
	height: 40px;
	background: var(--bg-2);
	border: 1px solid var(--border-2);
	color: var(--text-2);
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.5px;
	display: grid;
	place-items: center;
	cursor: pointer;
	z-index: 100;
	transition: all 0.15s;
}
.chvr-audio-toggle:hover { border-color: var(--volt); color: var(--volt); }
.chvr-audio-toggle.chvr-audio-on { color: var(--volt); border-color: var(--volt); }

/* ========================================
   REDUCED MOTION SAFETY
   When user prefers reduced motion, kill the moving stuff.
   ======================================== */
@media (prefers-reduced-motion: reduce) {
	body::before, body::after, body { animation: none !important; }
	.chvr-boot { display: none !important; }
	[data-chvr-reveal] { opacity: 1 !important; transform: none !important; }
	.chvr-activity-feed { display: none !important; }
	.chvr-confetti-canvas { display: none !important; }
	.chvr-cursor { display: none !important; }
	.chvr-hero__title.chvr-glitch-active::before,
	.chvr-hero__title.chvr-glitch-active::after { animation: none !important; }
}

/* ========================================
   MOBILE ADJUSTMENTS
   ======================================== */
@media (max-width: 720px) {
	.chvr-activity-feed { left: 12px; right: 12px; max-width: none; bottom: 12px; }
	.chvr-audio-toggle { bottom: 12px; right: 12px; width: 36px; height: 36px; }
	.chvr-cursor { display: none; }
	.chvr-boot__brand { font-size: 24px; }
}