/* styles.css */
:root {
	--bg: #0b0b0b;
	--glow: rgba(0,0,0,0.45);
}

* { box-sizing: border-box; }

html, body {
	height: 100%;
}

body {
	margin: 0;
	background: radial-gradient(1200px 800px at 50% 40%, color-mix(in oklab, var(--glow) 40%, var(--bg)), var(--bg));
	color: #e9e9e9;
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
	transition: background 160ms linear;
}

/* (header removed) */

.center {
	min-height: 100%;
	display: grid;
	place-items: center;
	padding: 24px;
}

.frame {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	background: #000;
	border: 1px solid rgba(255,255,255,0.08);
	box-shadow:
		0 20px 60px -20px rgba(0,0,0,0.6),
		0 0 100px 40px var(--glow);
	transition: box-shadow 120ms linear, border-color 120ms ease;
}

/* Drag & drop hint */
.drop-hint {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: grey;
	font-weight: 400;
	pointer-events: none;
	user-select: none;
	opacity: 0.85;
}

/* Drag-over visual feedback */
.frame.dragging {
	border-color: rgba(0,0,0,0.3);
	transform: translateZ(0);
	animation: glow-pulse 1.2s ease-in-out infinite;
}
.frame.dragging::after {
	content: "";
	position: absolute;
	inset: 10px;
	border-radius: 12px;
	border: 2px dashed rgba(0,0,0,0.35);
	background: color-mix(in oklab, var(--glow) 8%, transparent);
	pointer-events: none;
}
.frame.dragging .drop-hint {
	opacity: 1;
	color: rgba(0,0,0,0.8);
}

@keyframes glow-pulse {
	0%, 100% { box-shadow: 0 22px 64px -20px rgba(0,0,0,0.14), 0 0 120px 50px var(--glow); }
	50% { box-shadow: 0 22px 64px -20px rgba(0,0,0,0.10), 0 0 140px 62px var(--glow); }
}

video {
	display: block;
	width: min(960px, 92vw);
	height: auto;
	max-height: 76vh;
	background: #000;
}