/*
 * Lazy rendering of below-the-fold sections (inc/lazy-render.php).
 *
 * The first layout of a page is its biggest main-thread task: every distinct
 * Chinese glyph is shaped once, and the home page alone holds ~3,300
 * characters (~220 ms on a fast desktop CPU, ~4x that on a mid-range phone).
 * content-visibility:auto skips layout and paint of a section until it nears
 * the viewport, so that cost is paid in small slices while scrolling instead
 * of one long blocking task at load.
 *
 * Containment clips whatever sticks out of the section, traps position:fixed
 * children and stops child margins from collapsing through it, so only
 * sections checked free of all three are listed (geometry compared with and
 * without this file, mobile + desktop). Where the section itself can't take
 * it, an inner block does: the price cards of #pricelist (its fixed "?" tooltip
 * stays outside), .why_choose_us, each home article card (already
 * overflow:hidden), .avantages (already its own scroll box on phones).
 * js/home.js starts the sliders and the "about" décor only when they come near
 * the screen, so that work doesn't force these sections' layout at load.
 * Left out on purpose:
 * - .casesgallery, .contactban (.joinus): decorations overflow the section;
 * - home section.inner itself: floated cards, its height would change;
 * - /pricing/ blocks and the last .content of service pages: margins collapse
 *   through them, spacing would grow by 32-96 px;
 * - posts and the blog list: their content is floated (section height 0).
 * The footer astronaut only overflows past the right edge of the screen.
 * contain-intrinsic-size is the placeholder height before first render;
 * "auto" then remembers the real one.
 */

/* Home */
body.home > section.slider,
body.home > section.video_ab,
body.home > section#howitworks,
body.home > section#aboutus,
body.home > section.content > section.why_choose_us,
body.home > section#pricelist > ul.pricelist,
body.home > section.avantages,
body.home > section.inner:not(#pricelist) > section.article > section > article.post,
/* /services/ */
body > section.sv-group ~ section.sv-group,
/* Service pages */
body > section.service_pricing,
body > section.service_faq,
/* Every page */
body > footer {
	content-visibility: auto;
	contain-intrinsic-size: auto 700px;
}

/*
 * The price cards carry a 13px shadow and a 4px outline on hover: paint containment
 * clipped them flat at the edges of the list. Padding inside the contained box, taken
 * back by the margin, keeps the cards where they are and the shadows visible.
 */
body.home > section#pricelist > ul.pricelist {
	padding: 20px;
	margin: -20px;
}

/*
 * Closed popups: hidden with opacity / visibility, their whole content was
 * still laid out at every page load (chat panel of the sytech-ai-widget
 * plugin, contact popup of footer.php). content-visibility:hidden skips it
 * while closed. On opening it switches back at once; on closing, the
 * allow-discrete transition keeps the content until the fade-out has ended.
 * The transitions repeat the plugin's / style.css's own values.
 */
#chatWidget .chat-panel:not(.open):not(.minimized) {
	content-visibility: hidden;
	transition: transform 0.4s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.3s ease, content-visibility 0.4s allow-discrete;
}

section.popcontact:not(.active) div.contact-content {
	content-visibility: hidden;
	transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), content-visibility 0.3s allow-discrete;
}