/* KROK 2: CSS wspierajacy animacje. Zasada: elementy NIGDY nie sa trwale
   ukryte samym CSS (nawet pod klasa .js) - stan poczatkowy "opacity:0" dla
   hero/reveal ustawia JS przez gsap.set() dokladnie przed
   animacja. Dzieki temu awaria/blokada JS (adblock, network) nigdy nie
   zostawia tresci trwale niewidocznej - degraduje sie do w pelni czytelnej
   statycznej strony z KROKU 1. */

/* ---------- Sticky header ----------
   Reguly kompaktowania mieszkaja w header.css razem z reszta naglowka.
   Zostal tu tylko cien - jedyna rzecz czysto animacyjna. */
.site-header.is-compact {
	box-shadow: var(--shadow-md);
}

@media (prefers-reduced-motion: reduce) {
	.site-header {
		transition: none;
	}
}

/* ---------- Karty realizacji: tilt 3D ---------- */
/* perspective musi byc na rodzicu, nie na obracanym elemencie. */
.grid:has(.realizacja-card) {
	perspective: 1000px;
}

.realizacja-card {
	transform-style: preserve-3d;
}

/* ---------- Floating widget fade/scale ---------- */
/* Domyslnie zawsze widoczny (fallback bez JS = zachowanie z KROKU 1).
   IntersectionObserver dodaje .is-hidden dopiero gdy hero opusci viewport. */
.floating-widget {
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* visibility:hidden, a nie samo opacity - inaczej ukryty widget nadal
   lapalby fokus klawiatury i czytniki ekranu ogłaszałyby niewidoczne linki.
   Opoznienie przejscia visibility do konca animacji, zeby nie zniknal skokowo. */
.floating-widget.is-hidden {
	opacity: 0;
	transform: scale(0.85);
	pointer-events: none;
	visibility: hidden;
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

@media (prefers-reduced-motion: reduce) {
	.floating-widget {
		transition: none;
	}
}

/* ---------- Theme toggle icon swap animation ---------- */
.theme-toggle__icon {
	transition: transform 0.35s ease, opacity 0.35s ease;
}

/* ---------- FAQ smooth height ---------- */
.faq-item__answer {
	overflow: hidden;
}

.faq-item__icon {
	display: inline-block;
}

/* ---------- Testimonial stars ---------- */
.testimonial-card__stars .star {
	display: inline-block;
}

/* ---------- Lightbox galerii realizacji ---------- */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: var(--z-lightbox);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	padding: var(--space-4);
	/* Stale ciemne tlo niezaleznie od motywu - zdjecie ma byc bohaterem kadru. */
	background: rgba(9, 9, 11, 0.92);
	backdrop-filter: blur(4px);
}

.lightbox[hidden] {
	display: none;
}

.lightbox__img {
	max-width: min(100%, 1100px);
	max-height: 82vh;
	width: auto;
	height: auto;
	border-radius: var(--radius-md);
	object-fit: contain;
}

.lightbox__close,
.lightbox__nav {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #fff;
	border-radius: 50%;
	/* 44x44 - minimalny cel dotykowy wg WCAG 2.5.8. */
	min-width: 44px;
	min-height: 44px;
	font-size: 1.75rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.lightbox__close:hover,
.lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.2);
}

.lightbox__close {
	position: absolute;
	top: var(--space-4);
	right: var(--space-4);
}

.lightbox__counter {
	position: absolute;
	bottom: var(--space-4);
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	color: #fff;
	font-size: 0.875rem;
}

/* Na waskich ekranach strzalki pod zdjeciem, zeby go nie zaslanialy. */
@media (max-width: 640px) {
	.lightbox {
		flex-wrap: wrap;
	}
	.lightbox__img {
		order: -1;
		flex-basis: 100%;
		max-height: 68vh;
	}
}

/* ---------- Testimonial swiper ---------- */
.testimonials-swiper {
	padding-bottom: var(--space-12);
}

.testimonials-swiper .swiper-slide {
	height: auto;
}

.testimonials-swiper .testimonial-card {
	height: 100%;
}

.swiper-pagination-bullet {
	background: var(--color-text-muted);
	opacity: 0.4;
}

.swiper-pagination-bullet-active {
	background: var(--color-accent);
	opacity: 1;
}