/* ================================================
   WATERMARK - Tech Preview / Development Overlay
   ================================================ */

/* Watermark container - full viewport overlay */
.watermark-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 999999;
	opacity: 0.30;
	display: none; /* Hidden by default, toggle with .watermark-overlay--visible */
}

.watermark-overlay--visible {
	display: block;
}

/* Diagonal stripe pattern background */
.watermark-overlay::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 60px,
		rgba(255, 82, 120, 0.08) 60px,
		rgba(255, 82, 120, 0.08) 62px
	);
}

/* Centered text labels */
.watermark-overlay__text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
	font-family: 'Orbitron', 'Iceberg', monospace, sans-serif;
	font-size: clamp(3rem, 8vw, 6rem);
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(255, 82, 120, 0.25);
	text-shadow: 0 0 20px rgba(255, 82, 120, 0.3);
	white-space: nowrap;
	user-select: none;
	-webkit-user-select: none;
}

/* Repeated watermark text across viewport */
.watermark-overlay__grid {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
	gap: 0;
}

.watermark-overlay__grid-item {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Orbitron', 'Iceberg', monospace, sans-serif;
	font-size: clamp(1.2rem, 2.5vw, 2rem);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 82, 120, 0.12);
	transform: rotate(-45deg);
	user-select: none;
	-webkit-user-select: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.watermark-overlay__text {
		font-size: clamp(2rem, 10vw, 4rem);
		letter-spacing: 0.2em;
	}
	
	.watermark-overlay__grid {
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		grid-template-rows: repeat(auto-fill, minmax(200px, 1fr));
	}
	
	.watermark-overlay__grid-item {
		font-size: clamp(1rem, 3vw, 1.5rem);
	}
}

/* Alternative: Corner badge style (if you prefer a less intrusive option) */
.watermark-badge {
	position: fixed;
	top: 12px;
	right: 12px;
	padding: 6px 14px;
	background: linear-gradient(135deg, rgba(255, 82, 120, 0.25) 0%, rgba(255, 82, 120, 0.15) 100%);
	border: 1px solid rgba(255, 82, 120, 0.4);
	border-radius: 6px;
	font-family: 'Orbitron', 'Iceberg', monospace, sans-serif;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(255, 240, 244, 0.9);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	z-index: 999998;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	display: none;
}

.watermark-badge--visible {
	display: block;
}

@media (max-width: 768px) {
	.watermark-badge {
		top: 8px;
		right: 8px;
		padding: 4px 10px;
		font-size: 0.6rem;
	}
}