/* Voidwalker Reels — neon skin
 * Palette matches the live Voidwalker site: near-black, cyan, hot pink.
 */
.vr-root{
	--vr-ink:#08060e;
	--vr-surface:#0e0a18;
	--vr-surface2:#171029;
	--vr-text:#f3eefc;
	--vr-muted:#a394c6;
	--vr-cyan:#19e6ff;
	--vr-pink:#ff2fb0;
	--vr-height:82vh;

	display:flex;
	flex-direction:column;
	align-items:center;
	gap:14px;
	width:100%;
	color:var(--vr-text);
	font-family:"Space Grotesk","Chakra Petch",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

.vr-stage{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:clamp(6px,2vw,22px);
	width:100%;
	max-width:1100px;
}

/* --- The 9:16 frame --- */
.vr-frame{
	position:relative;
	aspect-ratio:9 / 16;
	height:var(--vr-height);
	max-height:82vh;
	max-width:92vw;
	background:#000;
	border-radius:16px;
	overflow:hidden;
	isolation:isolate;
	box-shadow:0 0 34px rgba(255,47,176,.28), 0 0 60px rgba(25,230,255,.18);
}

.vr-video{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	background:#000;
	display:block;
	z-index:1;
}

/* --- Electric border ---
 * A rotating pink/blue conic gradient sits behind the video via a padded
 * frame, masked to a ring. Flicker keyframe gives it the "alive" crackle.
 */
.vr-spark{
	position:absolute;
	inset:0;
	z-index:2;
	border-radius:16px;
	padding:3px;                 /* ring thickness */
	background:conic-gradient(
		from 0deg,
		var(--vr-cyan),
		var(--vr-pink),
		#7a1cff,
		var(--vr-cyan),
		var(--vr-pink),
		var(--vr-cyan)
	);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite:xor;
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask-composite:exclude;
	animation:vr-flicker 2.6s steps(2,end) infinite;
	pointer-events:none;
	filter:drop-shadow(0 0 6px rgba(25,230,255,.55)) drop-shadow(0 0 10px rgba(255,47,176,.45));
}

@keyframes vr-spin{ to{ transform:rotate(360deg); } }
@keyframes vr-flicker{
	0%,100%{ opacity:1; }
	43%{ opacity:.82; }
	47%{ opacity:1; }
	72%{ opacity:.7; }
	74%{ opacity:1; }
}

/* --- Caption over the bottom --- */
.vr-caption{
	position:absolute;
	left:0;right:0;bottom:0;
	z-index:4;
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:10px;
	padding:34px 14px 20px;
	background:linear-gradient(to top, rgba(3,2,8,.92), rgba(3,2,8,.55) 55%, transparent);
	pointer-events:none;
}
.vr-caption-inner{ pointer-events:auto; max-width:82%; }
.vr-blurb{
	display:block;
	font-size:clamp(14px,1.9vw,17px);
	line-height:1.35;
	text-shadow:0 1px 10px rgba(0,0,0,.9);
}
.vr-link{
	display:inline-block;
	margin-top:8px;
	padding:7px 14px;
	font-weight:700;
	font-size:13px;
	letter-spacing:.02em;
	color:#03040a;
	text-decoration:none;
	border-radius:999px;
	background:linear-gradient(90deg,var(--vr-cyan),var(--vr-pink));
	box-shadow:0 0 14px rgba(255,47,176,.5);
}
.vr-link:hover{ filter:brightness(1.1); }
.vr-dismiss{
	pointer-events:auto;
	flex:0 0 auto;
	width:32px;height:32px;
	border-radius:50%;
	border:1px solid rgba(243,238,252,.35);
	background:rgba(8,6,14,.6);
	color:var(--vr-text);
	font-size:15px;line-height:1;
	cursor:pointer;
	opacity:0;
	transition:opacity .35s ease;
}
.vr-dismiss.vr-show{ opacity:1; }
.vr-dismiss:hover{ border-color:var(--vr-pink); color:var(--vr-pink); }

/* --- Mute toggle --- */
.vr-mute{
	position:absolute;
	top:12px;right:12px;
	z-index:5;
	width:38px;height:38px;
	border-radius:50%;
	border:1px solid rgba(25,230,255,.5);
	background:rgba(8,6,14,.55);
	color:var(--vr-text);
	font-size:15px;
	cursor:pointer;
	backdrop-filter:blur(3px);
}
.vr-mute:hover{ border-color:var(--vr-cyan); box-shadow:0 0 12px rgba(25,230,255,.5); }

/* --- Progress bar: electric pink/blue --- */
.vr-progress{
	position:absolute;
	left:0;right:0;bottom:0;
	z-index:5;
	height:6px;
	background:rgba(255,255,255,.10);
	overflow:hidden;
}
.vr-progress-fill{
	height:100%;
	width:0%;
	background:linear-gradient(90deg,var(--vr-cyan),var(--vr-pink),#7a1cff,var(--vr-cyan));
	background-size:220% 100%;
	box-shadow:0 0 10px rgba(25,230,255,.7),0 0 16px rgba(255,47,176,.6);
	animation:vr-flow 1.1s linear infinite;
	transition:width .12s linear;
}
@keyframes vr-flow{ from{ background-position:0% 0; } to{ background-position:220% 0; } }

/* --- Arrows --- */
.vr-arrow{
	flex:0 0 auto;
	width:clamp(42px,6vw,58px);
	height:clamp(42px,6vw,58px);
	border-radius:50%;
	border:1.5px solid rgba(25,230,255,.55);
	background:rgba(14,10,24,.7);
	color:var(--vr-text);
	font-size:clamp(22px,3vw,30px);
	line-height:1;
	cursor:pointer;
	transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.vr-arrow:hover{
	border-color:var(--vr-pink);
	box-shadow:0 0 16px rgba(255,47,176,.6),0 0 24px rgba(25,230,255,.35);
	transform:translateY(-1px);
}
.vr-arrow:active{ transform:scale(.94); }
.vr-arrow:disabled{ opacity:.3; cursor:default; box-shadow:none; border-color:rgba(163,148,198,.4); }

.vr-counter{
	font-family:"Chakra Petch","Space Grotesk",monospace;
	font-size:13px;
	letter-spacing:.14em;
	color:var(--vr-muted);
	text-transform:uppercase;
}
.vr-empty{
	padding:40px;
	color:var(--vr-muted);
	font-size:15px;
}

/* --- Loading shimmer --- */
.vr-frame.vr-loading::after{
	content:"";
	position:absolute;
	inset:0;
	z-index:3;
	background:linear-gradient(90deg,transparent, rgba(25,230,255,.12), transparent);
	background-size:200% 100%;
	animation:vr-shimmer 1.2s linear infinite;
	pointer-events:none;
}
@keyframes vr-shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

@media (max-width:640px){
	.vr-frame{ height:auto; width:min(92vw, calc(82vh * 0.5625)); }
	.vr-arrow{ position:absolute; z-index:6; }
	.vr-stage{ position:relative; }
	.vr-prev{ left:6px; }
	.vr-next{ right:6px; }
}

/* Respect reduced motion — keep it readable, kill the constant animation. */
@media (prefers-reduced-motion:reduce){
	.vr-spark{ animation:none; }
	.vr-progress-fill{ animation:none; }
	.vr-frame.vr-loading::after{ animation:none; }
}