/* ====== Chmura Presji — style ====== */

/* ---------- Formularz ---------- */
.pr-form-card {
	max-width: 460px; margin: 0 auto; padding: 24px;
	border-radius: 18px; background: #0b1220; color: #e6edf6; text-align: center;
	box-shadow: 0 18px 50px rgba(8, 16, 32, .35);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.pr-form-q { margin: 0 0 18px; font-size: 20px; font-weight: 700; color: #fff; line-height: 1.35; }
.pr-form { position: relative; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pr-input {
	flex: 1 1 220px; padding: 14px; font-size: 16px; color: #fff;
	background: #0f1830; border: 1px solid #2a3550; border-radius: 12px; outline: none;
}
.pr-input:focus { border-color: #f87171; }
.pr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pr-btn {
	padding: 14px 22px; font-size: 16px; font-weight: 800; color: #fff; cursor: pointer;
	border: none; border-radius: 12px; background: linear-gradient(180deg, #f87171, #dc2626);
	transition: filter .15s, transform .08s;
}
.pr-btn:hover { filter: brightness(1.06); }
.pr-btn:active { transform: translateY(1px); }
.pr-btn:disabled { opacity: .5; cursor: default; }
.pr-msg { flex-basis: 100%; min-height: 18px; margin: 12px 0 0; font-size: 14px; }
.pr-msg--error { color: #fca5a5; }
.pr-msg--info { color: #9fb0c5; }
.pr-msg--success { color: #86efac; }

/* ---------- Scena (sylwetka + chmura) ---------- */
.pr-embed { position: relative; width: 100%; max-width: 1100px; margin: 0 auto; aspect-ratio: 16 / 9; }

.pr-stage {
	position: absolute; inset: 0; overflow: hidden;
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--pr-red: #8a1515;     /* ciemna czerwień — słowa i sylwetka */
	--pr-stroke: #8a1515;
}
.pr-stage:not(.pr-obs) {
	border-radius: 16px;
	background: radial-gradient(120% 120% at 50% 45%, #1a0d0d 0%, #0a0606 72%);
}
.pr-stage.pr-obs { position: fixed; inset: 0; }
.pr-obs-body { background: transparent; }

.pr-silhouette {
	position: absolute; inset: 0; width: 100%; height: 100%;
	filter: drop-shadow(0 2px 7px rgba(0, 0, 0, .6));
}

.pr-cloud { position: absolute; inset: 0; }

.pr-tag {
	position: absolute; left: 0; top: 0;
	color: var(--pr-red);
	font-weight: 700; line-height: 1; white-space: nowrap; pointer-events: none;
	transform-origin: left top; will-change: transform, opacity;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
	/* długi, łagodny dolot z zewnątrz; po doklejeniu element już się nie rusza */
	transition: transform 1.15s cubic-bezier(.16, .84, .44, 1), opacity .7s ease;
}