/*
 * Flaga 11 Listopada – powiewająca flaga Polski w czystym CSS.
 * Animowane są wyłącznie transform i opacity (GPU), bez JS i obrazków.
 */

.flaga11 {
	--flaga11-w: 120px;
	--flaga11-h: calc(var(--flaga11-w) * 0.625);   /* proporcje 5:8 */
	--flaga11-amp: calc(var(--flaga11-w) * 0.045); /* wysokość fali */
	--flaga11-pole: max(4px, calc(var(--flaga11-w) * 0.035));
	--flaga11-red: #dc143c;
	--flaga11-white: #ffffff;
	--flaga11-speed: 1.5s;

	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	line-height: 1.3;
	box-sizing: border-box;
}

.flaga11 *,
.flaga11 *::before,
.flaga11 *::after {
	box-sizing: border-box;
}

.flaga11__flag {
	display: flex;
	align-items: flex-start;
}

/* Drzewce */
.flaga11__pole {
	position: relative;
	flex: none;
	width: var(--flaga11-pole);
	height: calc(var(--flaga11-h) * 2.3);
	border-radius: 3px 3px 2px 2px;
	background: linear-gradient(90deg, #7a7a7a, #e9e9e9 40%, #a4a4a4 75%, #6c6c6c);
	box-shadow: 1px 1px 2px rgba(0, 0, 0, .25);
	z-index: 1;
}

/* Gałka na szczycie drzewca */
.flaga11__pole::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	width: calc(var(--flaga11-pole) * 2);
	aspect-ratio: 1;
	transform: translate(-50%, -70%);
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #fff3b0, #d4a017 55%, #8a6508);
}

/* Płachta złożona z pionowych pasków */
.flaga11__cloth {
	display: flex;
	width: var(--flaga11-w);
	height: var(--flaga11-h);
	margin-top: calc(var(--flaga11-w) * 0.01);
	filter: drop-shadow(1px 3px 3px rgba(0, 0, 0, .22));
}

.flaga11__cloth > span {
	position: relative;
	flex: 1 1 0;
	height: 100%;
	margin-right: -0.5px; /* bez szczelin między paskami */
	background: linear-gradient(var(--flaga11-white) 0 50%, var(--flaga11-red) 50% 100%);
	animation: flaga11-wave var(--flaga11-speed) ease-in-out infinite alternate;
	/* paski dalej od drzewca są „spóźnione” – fala biegnie na zewnątrz */
	animation-delay: calc(var(--i) * 0.06s - 6s);
	will-change: transform;
}

/* Cień fałdy – daje wrażenie materiału */
.flaga11__cloth > span::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #000;
	opacity: 0;
	animation: flaga11-shade var(--flaga11-speed) ease-in-out infinite alternate;
	/* cień przesunięty o ćwierć fazy – podąża za nachyleniem fali */
	animation-delay: calc(var(--i) * 0.06s - 6s - var(--flaga11-speed) / 2);
}

@keyframes flaga11-wave {
	from { transform: translateY(calc(var(--a) * var(--flaga11-amp) * -1)); }
	to   { transform: translateY(calc(var(--a) * var(--flaga11-amp))); }
}

@keyframes flaga11-shade {
	from { opacity: 0; }
	to   { opacity: .24; }
}

/* Napis */
.flaga11__text {
	margin: 0;
	max-width: calc(var(--flaga11-w) * 1.6);
	font: 600 13px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: #222;
}

/* Przycisk zamknięcia */
.flaga11__close {
	flex: none;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .08);
	color: #333;
	font: 16px/22px system-ui, sans-serif;
	text-align: center;
	cursor: pointer;
}
.flaga11__close:hover,
.flaga11__close:focus-visible { background: rgba(0, 0, 0, .18); }

/* =========================================================
   STYL „ŚCIANA” – duża, pochylona flaga wysuwająca się z krawędzi ekranu
   ========================================================= */

.flaga11--wall {
	--flaga11-angle: 40deg;  /* pochylenie drzewca od pionu */
	--flaga11-top: 62vh;     /* wysokość mocowania */
	--flaga11-dir: -1;       /* -1 = lewa krawędź, 1 = prawa */
	--flaga11-hide: 0s;

	position: fixed;
	top: var(--flaga11-top);
	left: 0;
	width: 0;
	height: 0;
	display: block;
	z-index: 99990;
	pointer-events: none;   /* nie blokuje klikania w stronę */
	animation: flaga11-slide-in 1s cubic-bezier(.2, .8, .25, 1) both;
}

.flaga11--wall.flaga11--right {
	left: auto;
	right: 0;
	--flaga11-dir: 1;
}

.flaga11--wall .flaga11__mount {
	position: absolute;
	left: 0;
	top: 0;
}
.flaga11--wall.flaga11--right .flaga11__mount {
	transform: scaleX(-1); /* lustrzane odbicie – biały pas nadal u góry */
}

/* Uchwyt na ścianie */
.flaga11__bracket {
	display: none;
}
.flaga11--wall .flaga11__bracket {
	display: block;
	position: absolute;
	left: 0;
	top: calc(var(--flaga11-pole) * -2.5);
	width: calc(var(--flaga11-pole) * 2.2);
	height: calc(var(--flaga11-pole) * 5);
	border-radius: 0 4px 4px 0;
	background: linear-gradient(90deg, #4d4d4d, #9a9a9a 60%, #6a6a6a);
	box-shadow: 1px 2px 4px rgba(0, 0, 0, .3);
	z-index: 2;
}

.flaga11--wall .flaga11__flag {
	position: absolute;
	left: calc(var(--flaga11-pole) * 0.6);
	bottom: 0;
	transform-origin: calc(var(--flaga11-pole) / 2) 100%;
	transform: rotate(var(--flaga11-angle));
	animation: flaga11-raise 1.3s cubic-bezier(.3, .7, .3, 1.15) .55s both;
	filter: drop-shadow(4px 8px 8px rgba(0, 0, 0, .18));
}

.flaga11--wall .flaga11__pole {
	height: calc(var(--flaga11-h) * 2.1);
}

/* Etykieta z napisem i przyciskiem pod uchwytem */
.flaga11__label {
	display: flex;
	align-items: center;
	gap: 8px;
}
.flaga11--wall .flaga11__label {
	position: absolute;
	top: calc(var(--flaga11-pole) * 3 + 6px);
	left: 8px;
	width: max-content;
	max-width: min(280px, 70vw);
	padding: 6px 8px 6px 12px;
	border-radius: 0 20px 20px 0;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 3px 12px rgba(0, 0, 0, .15);
	pointer-events: auto;
	animation: flaga11-fade .6s ease 1.6s both;
}
.flaga11--wall.flaga11--right .flaga11__label {
	left: auto;
	right: 8px;
	border-radius: 20px 0 0 20px;
	padding: 6px 12px 6px 8px;
}
.flaga11--wall .flaga11__text { max-width: none; }

/* Chowanie po X sekundach */
.flaga11--wall.flaga11--autohide {
	animation:
		flaga11-slide-in 1s cubic-bezier(.2, .8, .25, 1) both,
		flaga11-slide-out .9s ease-in var(--flaga11-hide) forwards;
}

@keyframes flaga11-slide-in {
	from { transform: translateX(calc(var(--flaga11-w) * 1.6 * var(--flaga11-dir))); }
	to   { transform: translateX(0); }
}

@keyframes flaga11-slide-out {
	from { transform: translateX(0); visibility: visible; }
	to   { transform: translateX(calc(var(--flaga11-w) * 2.8 * var(--flaga11-dir))); visibility: hidden; }
}

/* Drzewce wysuwa się poziomo i podnosi do pochylenia */
@keyframes flaga11-raise {
	from { transform: rotate(90deg); }
	75%  { transform: rotate(calc(var(--flaga11-angle) - 5deg)); }
	to   { transform: rotate(var(--flaga11-angle)); }
}

@keyframes flaga11-fade {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/* =========================================================
   STYL „RÓG” – mała flaga w karcie w rogu ekranu
   ========================================================= */

.flaga11--corner {
	position: fixed;
	z-index: 99990;
	padding: 14px 16px 12px 12px;
	background: rgba(255, 255, 255, .9);
	border-radius: 10px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .15);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.flaga11--corner .flaga11__pole { height: calc(var(--flaga11-h) * 1.8); }
.flaga11--corner .flaga11__label { align-items: flex-start; }
.flaga11--corner .flaga11__close { position: absolute; top: 4px; right: 4px; }

.flaga11--corner.flaga11--bottom-right { right: 20px; bottom: 20px; }
.flaga11--corner.flaga11--bottom-left  { left: 20px;  bottom: 20px; }
.flaga11--corner.flaga11--top-right    { right: 20px; top: 20px; }
.flaga11--corner.flaga11--top-left     { left: 20px;  top: 20px; }

body.admin-bar .flaga11--corner.flaga11--top-right,
body.admin-bar .flaga11--corner.flaga11--top-left { top: 52px; }

@media (max-width: 600px) {
	.flaga11--hide-mobile { display: none !important; }
	.flaga11--corner { right: 10px; bottom: 10px; }
}

/* Szacunek dla ustawień dostępności */
@media (prefers-reduced-motion: reduce) {
	.flaga11,
	.flaga11 *,
	.flaga11 *::after {
		animation: none !important;
	}
}