/*
Theme Name: ProArtComm - Przebudowa
Theme URI: https://proartcomm.pl
Author: Makowski Brothers
Author URI: https://proartcomm.pl
Description: Samodzielny motyw WordPress typu "strona w przebudowie / coming soon" dla proartcomm.pl - studio grafiki, social media i materialow wizualnych. Ciemna, kreatywna estetyka: animowane gradientowe tlo, siatka blueprint, wektorowa grafika przebudowy (SVG), szklana karta z trescia, pasek postepu i ikony kontaktu. Bez zaleznosci i bez wtyczek.
Version: 1.0.0
Requires at least: 5.5
Tested up to: 6.9
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: proartcomm-rebuild
Tags: coming-soon, maintenance, one-page, custom-colors, translation-ready
*/

/* =========================================================
   Zmienne / paleta
   ========================================================= */
:root {
	--pac-bg: #0a0a12;
	--pac-bg-2: #12101f;
	--pac-accent: #7c3aed;   /* fiolet */
	--pac-accent-2: #ec4899; /* magenta */
	--pac-text: #e7e7f2;
	--pac-muted: rgba(231, 231, 242, 0.66);
	--pac-line: rgba(255, 255, 255, 0.10);
	--pac-card: rgba(255, 255, 255, 0.045);
}

/* =========================================================
   Reset / baza
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.pac-rebuild {
	margin: 0;
	min-height: 100vh;
	position: relative;
	overflow-x: hidden;
	color: var(--pac-text);
	font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	font-size: 18px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: var(--pac-bg);
	background-image:
		radial-gradient(58% 52% at 18% 12%, color-mix(in srgb, var(--pac-accent) 42%, transparent) 0%, transparent 60%),
		radial-gradient(52% 58% at 85% 18%, color-mix(in srgb, var(--pac-accent-2) 38%, transparent) 0%, transparent 62%),
		radial-gradient(70% 62% at 50% 108%, color-mix(in srgb, var(--pac-accent) 30%, transparent) 0%, transparent 66%),
		linear-gradient(160deg, var(--pac-bg) 0%, var(--pac-bg-2) 100%);
	background-attachment: fixed;
	background-size: 200% 200%, 200% 200%, 200% 200%, auto;
	animation: pacGradient 26s ease-in-out infinite;
}

/* Fallback bez color-mix */
@supports not (background-image: radial-gradient(50% 50% at 0 0, color-mix(in srgb, red 10%, transparent), transparent)) {
	body.pac-rebuild {
		background-image:
			radial-gradient(58% 52% at 18% 12%, rgba(124, 58, 237, 0.40) 0%, transparent 60%),
			radial-gradient(52% 58% at 85% 18%, rgba(236, 72, 153, 0.36) 0%, transparent 62%),
			radial-gradient(70% 62% at 50% 108%, rgba(124, 58, 237, 0.28) 0%, transparent 66%),
			linear-gradient(160deg, #0a0a12 0%, #12101f 100%);
	}
}

@keyframes pacGradient {
	0%, 100% { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; }
	50%      { background-position: 30% 20%, 70% 15%, 40% 90%, 0 0; }
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* =========================================================
   Warstwy tla: siatka blueprint + grafika SVG + szum + winieta
   ========================================================= */
.pac-layer { position: fixed; inset: 0; pointer-events: none; }

.pac-grid {
	z-index: 0;
	opacity: 0.5;
	background-image:
		linear-gradient(var(--pac-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--pac-line) 1px, transparent 1px);
	background-size: 44px 44px, 44px 44px;
	-webkit-mask-image: radial-gradient(120% 120% at 50% 40%, #000 40%, transparent 78%);
	mask-image: radial-gradient(120% 120% at 50% 40%, #000 40%, transparent 78%);
	animation: pacGridPan 40s linear infinite;
}

@keyframes pacGridPan {
	from { background-position: 0 0, 0 0; }
	to   { background-position: 44px 44px, 44px 44px; }
}

.pac-art {
	z-index: 0;
	background-repeat: no-repeat;
	background-position: center 46%;
	background-size: min(1100px, 118vw) auto;
	opacity: 0.16;
	animation: pacFloat 16s ease-in-out infinite;
}

@keyframes pacFloat {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-14px); }
}

.pac-noise {
	z-index: 1;
	opacity: 0.045;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.pac-vignette {
	z-index: 1;
	background: radial-gradient(120% 120% at 50% 42%, transparent 55%, rgba(0, 0, 0, 0.6) 100%);
}

/* =========================================================
   Uklad
   ========================================================= */
.pac-shell {
	position: relative;
	z-index: 2;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: clamp(24px, 5vw, 64px);
	text-align: center;
}

.pac-card {
	position: relative;
	width: 100%;
	max-width: 760px;
	padding: clamp(30px, 5vw, 60px);
	border-radius: 30px;
	border: 1px solid var(--pac-line);
	background: var(--pac-card);
	-webkit-backdrop-filter: blur(18px) saturate(125%);
	backdrop-filter: blur(18px) saturate(125%);
	box-shadow: 0 34px 90px -28px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.07);
	overflow: hidden;
}

.pac-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--pac-accent), var(--pac-accent-2), transparent);
}

/* Odznaka statusu */
.pac-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 15px;
	margin: 0 0 22px;
	border-radius: 999px;
	border: 1px solid var(--pac-line);
	background: rgba(255, 255, 255, 0.04);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pac-muted);
}

.pac-badge .dot {
	width: 9px; height: 9px; border-radius: 50%;
	background: var(--pac-accent-2);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--pac-accent-2) 70%, transparent);
	animation: pacPulse 2.4s ease-out infinite;
}

@keyframes pacPulse {
	0%   { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.55); }
	70%  { box-shadow: 0 0 0 12px rgba(236, 72, 153, 0); }
	100% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0); }
}

/* Wordmark / logo */
.pac-wordmark {
	margin: 0 0 6px;
	font-family: 'Poppins', system-ui, sans-serif;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.01em;
	font-size: clamp(1.7rem, 5vw, 2.6rem);
	background: linear-gradient(120deg, var(--pac-accent), var(--pac-accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--pac-accent);
}

.pac-headline {
	margin: 10px 0 14px;
	font-family: 'Poppins', system-ui, sans-serif;
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.01em;
	font-size: clamp(1.9rem, 5.5vw, 3rem);
	color: #fff;
}

.pac-lead {
	margin: 0 auto;
	max-width: 54ch;
	color: var(--pac-muted);
	font-size: clamp(1rem, 2.4vw, 1.12rem);
}

/* Pasek postepu (nieokreslony, animowany) */
.pac-progress {
	margin: clamp(26px, 4vw, 36px) auto 0;
	max-width: 460px;
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid var(--pac-line);
	overflow: hidden;
}

.pac-progress > span {
	display: block;
	height: 100%;
	width: 42%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--pac-accent), var(--pac-accent-2));
	animation: pacProgress 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes pacProgress {
	0%   { transform: translateX(-120%); }
	60%  { transform: translateX(210%); }
	100% { transform: translateX(210%); }
}

.pac-progress-label {
	margin: 12px 0 0;
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	color: var(--pac-muted);
}

/* Akcje: przycisk + social */
.pac-actions {
	margin: clamp(24px, 4vw, 34px) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	justify-content: center;
}

.pac-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 24px;
	border-radius: 14px;
	font-weight: 700;
	font-size: 1rem;
	color: #fff;
	background: linear-gradient(135deg, var(--pac-accent), var(--pac-accent-2));
	transition: transform 0.15s ease, box-shadow 0.25s ease, filter 0.2s ease;
}
.pac-btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 14px 34px -12px var(--pac-accent); }
.pac-btn:active { transform: translateY(0); }
.pac-btn svg { width: 18px; height: 18px; }

.pac-social { display: flex; gap: 12px; }

.pac-social a {
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	border-radius: 50%;
	border: 1px solid var(--pac-line);
	background: rgba(255, 255, 255, 0.045);
	color: var(--pac-text);
	transition: transform 0.2s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.2s ease;
}
.pac-social a:hover {
	color: #fff;
	border-color: transparent;
	background: linear-gradient(135deg, var(--pac-accent), var(--pac-accent-2));
	transform: translateY(-2px);
	box-shadow: 0 12px 26px -10px var(--pac-accent);
}
.pac-social svg { width: 20px; height: 20px; }

/* Stopka */
.pac-footer {
	position: relative;
	z-index: 2;
	margin-top: clamp(26px, 5vw, 40px);
	font-size: 0.85rem;
	color: var(--pac-muted);
}
.pac-footer a { border-bottom: 1px solid transparent; transition: border-color 0.2s ease, color 0.2s ease; }
.pac-footer a:hover { color: var(--pac-accent-2); border-bottom-color: currentColor; }

/* =========================================================
   Responsywnosc
   ========================================================= */
@media (max-width: 560px) {
	.pac-actions { flex-direction: column; }
	.pac-btn { width: 100%; justify-content: center; }
	.pac-art { opacity: 0.12; }
}

/* =========================================================
   Dostepnosc
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	body.pac-rebuild, .pac-grid, .pac-art, .pac-progress > span, .pac-badge .dot { animation: none !important; }
}

.pac-btn:focus-visible, .pac-social a:focus-visible {
	outline: 2px solid var(--pac-accent-2);
	outline-offset: 3px;
}

/* Ukryj admin bar wizualnie na tej pelnoekranowej stronie (nie usuwamy funkcji) */
#wpadminbar { opacity: 0.35; transition: opacity 0.2s ease; }
#wpadminbar:hover { opacity: 1; }