/**
 * Atmosphere layer for /test-homepage/: boot overlay, starfield canvas,
 * ambient CRT (scanlines / vignette / grain / flicker).
 * Elements are created by assets/js/test-homepage/atmosphere.js.
 *
 * Z-index plan: starfield 0 < page content 1 < CRT 9998 < boot 9999.
 */

body.zp-test-ready main {
	position: relative;
	z-index: 1;
}

/* ── Starfield canvas ────────────────────────────────────────── */

.zp-atmo-stars {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

/* ── Ambient CRT overlay ─────────────────────────────────────── */

.zp-atmo-crt {
	position: fixed;
	inset: 0;
	z-index: 9998;
	pointer-events: none;
	/* Scanlines: felt, not seen. */
	background: repeating-linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.018) 0,
		rgba(255, 255, 255, 0.018) 1px,
		transparent 1px,
		transparent 4px
	);
}

/* Film grain: SVG turbulence tile, jittered with steps(). */
.zp-atmo-crt::before {
	content: "";
	position: absolute;
	inset: -60px; /* bleed so background-position jumps never expose an edge */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23g)'/%3E%3C/svg%3E");
	opacity: 0.035;
	animation: zp-atmo-grain 0.7s steps(1, end) infinite;
}

/* Vignette: corners fall away into the void. */
.zp-atmo-crt::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse 90% 90% at 50% 50%,
		transparent 55%,
		rgba(0, 0, 0, 0.18) 80%,
		rgba(0, 0, 0, 0.42) 100%
	);
}

/* CRT hiccup: instant dip, restored by JS after 80-120ms. */
.zp-atmo-crt.zp-atmo-flicker {
	opacity: 0.35;
	filter: brightness(0.85);
}

@keyframes zp-atmo-grain {
	0%   { background-position: 0 0; }
	12%  { background-position: -32px 14px; }
	25%  { background-position: 44px -28px; }
	37%  { background-position: -18px -36px; }
	50%  { background-position: 26px 40px; }
	62%  { background-position: -44px 6px; }
	75%  { background-position: 12px -20px; }
	87%  { background-position: 38px 24px; }
	100% { background-position: 0 0; }
}

/* ── Boot sequence (~1.1s; overlay removed from DOM by JS) ───── */

.zp-atmo-boot {
	position: fixed;
	inset: 0;
	z-index: 9999;
	cursor: default;
}

/* Two black shutters part vertically from the center line. */
.zp-atmo-boot__panel {
	position: absolute;
	left: 0;
	right: 0;
	height: 50.2%; /* slight overlap: no seam before the line appears */
	background: #000;
	animation: zp-atmo-boot-open 0.45s cubic-bezier(0.16, 0.84, 0.28, 1) 0.35s both;
}

.zp-atmo-boot__panel--top {
	top: 0;
	transform-origin: 50% 0;
}

.zp-atmo-boot__panel--bottom {
	bottom: 0;
	transform-origin: 50% 100%;
}

.zp-atmo-boot__line {
	position: absolute;
	left: 6%;
	right: 6%;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	background: #C4A7FB;
	box-shadow:
		0 0 10px 1px rgba(196, 167, 251, 0.9),
		0 0 34px 4px rgba(196, 167, 251, 0.45);
	animation: zp-atmo-boot-line 0.9s ease-out 0.12s both;
}

/* Phosphor bloom: brief lilac over-brightness that settles. */
.zp-atmo-boot__bloom {
	position: absolute;
	inset: 0;
	background: #C4A7FB;
	mix-blend-mode: screen;
	pointer-events: none;
	animation: zp-atmo-boot-bloom 0.5s ease-out 0.6s both;
}

@keyframes zp-atmo-boot-open {
	from { transform: scaleY(1); }
	to   { transform: scaleY(0); }
}

@keyframes zp-atmo-boot-line {
	0%   { transform: scaleX(0); opacity: 0; }
	18%  { transform: scaleX(1); opacity: 1; }
	55%  { transform: scaleX(1); opacity: 0.9; }
	100% { transform: scaleX(1); opacity: 0; }
}

@keyframes zp-atmo-boot-bloom {
	0%   { opacity: 0; }
	35%  { opacity: 0.2; }
	100% { opacity: 0; }
}

/* ── Reduced motion: static atmosphere only ──────────────────── */

@media (prefers-reduced-motion: reduce) {
	.zp-atmo-boot { display: none; } /* JS never creates it; belt and braces */
	.zp-atmo-crt::before { animation: none; }
}