/**
 * NoPixels Sectorum — Visual-FX-CSS (Phase 15).
 *
 * Particle-Layer + Achievement-Pop + Battle-Replay-Modal + Hex-Animationen.
 * Alle Effekte respektieren prefers-reduced-motion.
 */

/* ===== Layer-Setup ===== */
.np-sec-fx-layer {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 99000;
}
#np-sec-fx-replay,
#np-sec-fx-pop {
	pointer-events: none;
	background: rgba(0,0,0,0);
	transition: background .3s ease;
	display: none;
}
#np-sec-fx-replay.is-open,
#np-sec-fx-pop.is-open {
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
#np-sec-fx-replay.is-open {
	background: rgba(0,0,0,.75);
	backdrop-filter: blur(4px);
}

/* ===== Hex-Particles ===== */
.np-sec-fx-particle {
	position: fixed;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	animation: np-sec-particle-burst .9s cubic-bezier(.15,.7,.25,1) forwards;
	box-shadow: 0 0 8px currentColor;
}
@keyframes np-sec-particle-burst {
	0%   { transform: translate(0,0) scale(1); opacity: 1; }
	100% { transform: translate( var(--tx), var(--ty) ) scale(.2); opacity: 0; }
}

/* ===== Banner-Drop (Sektor erobert) ===== */
.np-sec-banner-drop {
	animation: np-sec-banner-drop .9s cubic-bezier(.2,.7,.2,1);
	transform-origin: top center;
}
@keyframes np-sec-banner-drop {
	0%   { transform: scaleY(.4) translateY(-12px); filter: brightness(1.4); }
	60%  { transform: scaleY(1.05); filter: brightness(1.1); }
	100% { transform: scaleY(1); filter: brightness(1); }
}

/* ===== Pulse-Marker für umkämpfte Hexes ===== */
.np-sec-hex-contested {
	animation: np-sec-hex-pulse 2.4s ease-in-out infinite;
	filter: drop-shadow(0 0 4px rgba(248,81,73,.6));
}
@keyframes np-sec-hex-pulse {
	0%,100% { filter: drop-shadow(0 0 4px rgba(248,81,73,.5)); }
	50%     { filter: drop-shadow(0 0 12px rgba(248,81,73,.85)); }
}

/* ===== Parallax ===== */
.np-sec-stage-bg {
	transition: transform .25s cubic-bezier(.2,.7,.2,1);
	will-change: transform;
}

/* ===== Banner-Wave (für Faction-Banner SVGs) ===== */
.np-sec-banner-svg {
	display: inline-block;
	animation: np-sec-banner-wave 3.6s ease-in-out infinite;
	transform-origin: top left;
}
@keyframes np-sec-banner-wave {
	0%,100% { transform: skewY(0) translateX(0); }
	25%     { transform: skewY(-1.5deg) translateX(-1px); }
	75%     { transform: skewY(1.5deg)  translateX(1px); }
}

/* ===== Battle-Replay-Modal ===== */
.np-sec-replay-modal {
	background: var(--np-sec-bg, #0d1117);
	color: var(--np-sec-text, #fff);
	border-radius: 14px;
	padding: 24px;
	width: min(640px, 92vw);
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	gap: 14px;
	box-shadow: 0 30px 60px -10px rgba(0,0,0,.7);
	animation: np-sec-replay-zoom .35s cubic-bezier(.2,.7,.2,1);
	position: relative;
}
@keyframes np-sec-replay-zoom {
	from { opacity: 0; transform: scale(.92); }
	to   { opacity: 1; transform: scale(1); }
}
.np-sec-replay-modal h3 { margin: 0; font-size: 18px; color: #fff; }
.np-sec-replay-modal,
.np-sec-replay-modal * { color: #fff; }
.np-sec-replay-close {
	position: absolute; top: 12px; right: 12px;
	border: none; background: transparent;
	color: #fff;
	font-size: 22px; line-height: 1;
	cursor: pointer; opacity: .65;
}
.np-sec-replay-close:hover { opacity: 1; }

.np-sec-replay-stage {
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 50vh;
	padding-right: 6px;
}
.np-sec-replay-event {
	padding: 10px 14px;
	background: rgba(255,255,255,.04);
	border-radius: 8px;
	border-left: 3px solid var(--np-sec-accent, #6a5acd);
	display: flex;
	flex-direction: column;
	gap: 2px;
	animation: np-sec-replay-event-in .35s cubic-bezier(.2,.7,.2,1);
}
@keyframes np-sec-replay-event-in {
	from { opacity: 0; transform: translateX(-10px); }
	to   { opacity: 1; transform: translateX(0); }
}
.np-sec-replay-event time { font-size: 11px; opacity: .55; font-variant-numeric: tabular-nums; }
.np-sec-replay-event small { font-size: 11px; opacity: .65; }
.np-sec-replay-arrow { opacity: .5; margin: 0 4px; }

.np-sec-replay-progress {
	height: 4px;
	background: rgba(255,255,255,.08);
	border-radius: 2px;
	overflow: hidden;
}
.np-sec-replay-progress > div {
	height: 100%;
	background: linear-gradient(90deg, #6a5acd, #1f6feb);
	width: 0%;
	transition: width .35s ease;
}
.np-sec-replay-status { font-size: 12px; opacity: .7; text-align: center; }

/* ===== Achievement-Pop ===== */
.np-sec-achievement-pop {
	position: fixed;
	left: 50%;
	top: 80px;
	transform: translateX(-50%) translateY(-20px);
	opacity: 0;
	animation: np-sec-achievement-in .5s cubic-bezier(.2,.7,.2,1) forwards;
	width: min(420px, 92vw);
	z-index: 100000;
}
@keyframes np-sec-achievement-in {
	from { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(.92); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0)     scale(1); }
}
.np-sec-achievement-pop.is-leaving {
	animation: np-sec-achievement-out .55s cubic-bezier(.5,0,.7,.3) forwards;
}
@keyframes np-sec-achievement-out {
	from { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
	to   { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(.92); }
}
.np-sec-achievement-pop-inner {
	background: linear-gradient(135deg, #6a5acd 0%, #1f6feb 100%);
	color: #fff;
	border-radius: 14px;
	padding: 14px 18px;
	display: flex;
	gap: 14px;
	align-items: center;
	box-shadow: 0 18px 42px -10px rgba(106,90,205,.7), 0 2px 0 rgba(255,255,255,.18) inset;
}
.np-sec-achievement-pop-icon {
	font-size: 36px;
	line-height: 1;
	animation: np-sec-achievement-icon 1.6s ease-out infinite;
}
@keyframes np-sec-achievement-icon {
	0%,100% { transform: rotate(0)    scale(1); }
	30%     { transform: rotate(-8deg) scale(1.08); }
	60%     { transform: rotate(8deg)  scale(1.08); }
}
.np-sec-achievement-pop-meta { flex: 1; min-width: 0; }
.np-sec-achievement-pop-meta small {
	font-size: 10px;
	letter-spacing: .18em;
	opacity: .85;
	font-weight: 700;
}
.np-sec-achievement-pop-meta h3 {
	margin: 4px 0 2px;
	font-size: 16px;
	color: #fff;
}
.np-sec-achievement-pop-meta p {
	margin: 0;
	font-size: 12px;
	opacity: .85;
	line-height: 1.4;
}

/* ===== Confetti ===== */
.np-sec-confetti {
	position: absolute;
	top: -10px;
	width: 8px;
	height: 12px;
	border-radius: 2px;
	animation: np-sec-confetti-fall 2.4s cubic-bezier(.4,.7,.6,1) forwards;
}
@keyframes np-sec-confetti-fall {
	0%   { transform: translateY(0) rotate(0); opacity: 1; }
	100% { transform: translateY(420px) rotate(720deg); opacity: 0; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
	.np-sec-fx-particle,
	.np-sec-banner-drop,
	.np-sec-banner-svg,
	.np-sec-hex-contested,
	.np-sec-confetti,
	.np-sec-achievement-pop-icon {
		animation: none !important;
	}
	.np-sec-achievement-pop {
		animation: none !important;
		opacity: 1;
		transform: translateX(-50%);
	}
}