/*
 * Collective52 — warstwa wydajności.
 * Plik nie zmienia układu ani treści. Ogranicza koszt renderowania,
 * animacji i menu na urządzeniach mobilnych.
 */

/* Sekcje poniżej pierwszego ekranu są renderowane dopiero, gdy zbliżą się do widoku. */
@supports (content-visibility: auto) {
	.home-about,
	.c52-offer-section,
	.c52-contact-main,
	.c52-about-main,
	.c52-about-services,
	.c52-about-cta,
	.c52-offer-archive,
	.c52-offer-cta,
	.c52-gallery-content,
	.c52-gallery-cta,
	.c52-single-main,
	.c52-single-cta {
		content-visibility: auto;
		contain-intrinsic-size: auto 900px;
	}
}

/* Izolacja kosztownych komponentów od reszty dokumentu. */
.c52-offer-viewport,
.c52-gallery-item__image,
.home-about__image-frame {
	contain: layout paint;
}

.c52-offer-track {
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
	will-change: auto;
}

/* Warstwa GPU jest tworzona tylko podczas faktycznego przesuwania karuzeli. */
.c52-offer-track.is-moving {
	will-change: transform;
}

/* Urządzenia dotykowe nie potrzebują kosztownych animacji hover. */
@media (hover: none), (pointer: coarse) {
	html {
		scroll-behavior: auto;
	}

	.btn,
	.navbar .nav-link::after,
	.dropdown-item,
	.home-about__feature,
	.home-about__image,
	.home-about__btn-primary,
	.home-about__btn-outline,
	.c52-offer-card,
	.c52-offer-card__thumbnail,
	.c52-offer-card__link,
	.c52-gallery-item,
	.c52-gallery-item__image img,
	.c52-gallery-item__zoom,
	.c52-gallery-thumbnail,
	.c52-gallery-slider__button {
		transition: none !important;
	}

	.btn:hover,
	.home-about__feature:hover,
	.home-about__visual:hover .home-about__image,
	.c52-offer-card:hover,
	.c52-gallery-item:hover,
	.c52-gallery-item:hover .c52-gallery-item__image img {
		transform: none !important;
	}

	.c52-offer-card:hover .c52-offer-card__thumbnail,
	.c52-gallery-item:hover .c52-gallery-item__image img {
		filter: none !important;
	}
}

/*
 * Menu mobilne otwiera się natychmiast. Bootstrap nie animuje wysokości,
 * dzięki czemu sticky header nie powoduje serii kosztownych przeliczeń układu.
 */
@media (max-width: 991.98px) {
	body.c52-mobile-menu-open {
		overflow: hidden;
	}

	.site-header {
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		background: rgba(255, 255, 255, 0.99);
	}

	.site-header .navbar-collapse,
	.site-header .navbar-collapse.collapsing {
		transition: none !important;
	}

	.site-header .navbar-collapse.collapsing {
		height: auto !important;
	}

	.site-header .navbar-collapse:not(.show) {
		display: none;
	}

	.site-header .navbar-collapse.show {
		display: block;
		max-height: calc(100vh - 72px);
		max-height: calc(100dvh - 72px);
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	body.admin-bar .site-header .navbar-collapse.show {
		max-height: calc(100vh - 118px);
		max-height: calc(100dvh - 118px);
	}

	.c52-slider-arrow,
	.home-about__image-panel,
	.home-about__service-tag,
	.home-about__floating-card,
	.c52-offer-sidebar-card,
	.c52-gallery-modal .modal-content {
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}
}

/* Na telefonach treść pojawia się od razu, bez kosztownych animacji przy scrollowaniu. */
@media (max-width: 767.98px) {
	.reveal-up,
	.reveal-left,
	.reveal-right {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.reveal-up[data-reveal-mobile="true"],
	.reveal-left[data-reveal-mobile="true"],
	.reveal-right[data-reveal-mobile="true"] {
		opacity: 0 !important;
		transition: opacity 520ms ease, transform 520ms cubic-bezier(.2, .75, .25, 1) !important;
		transition-delay: var(--delay, 0ms) !important;
	}

	.reveal-up[data-reveal-mobile="true"] {
		transform: translateY(24px) !important;
	}

	.reveal-left[data-reveal-mobile="true"] {
		transform: translateX(-24px) !important;
	}

	.reveal-right[data-reveal-mobile="true"] {
		transform: translateX(24px) !important;
	}

	.reveal-up[data-reveal-mobile="true"].is-visible,
	.reveal-left[data-reveal-mobile="true"].is-visible,
	.reveal-right[data-reveal-mobile="true"].is-visible {
		opacity: 1 !important;
		transform: none !important;
	}

	.c52-slider-ready .c52-hero-eyebrow,
	.c52-slider-ready .c52-hero-title > span,
	.c52-slider-ready .c52-hero-title > strong,
	.c52-slider-ready .c52-hero-description,
	.c52-slider-ready .c52-hero-actions {
		opacity: 1;
		transform: none;
		animation: none !important;
		will-change: auto;
	}

	.c52-slider-arrow {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.c52-gallery-modal {
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}

	.c52-gallery-modal.is-open,
	.c52-gallery-slide.is-active {
		animation: none !important;
	}
}