/*
 * TalentAstro / DIVSA — performance layer (v4.9.45, Phase 3b).
 *
 * Loaded only on DIVSA pages, last, and deliberately tiny. Every rule here is
 * about *rendering work* and *layout stability* — none of it changes the design.
 *
 * If any of this ever fights the design, turn "content-visibility" off in
 * DIVSA → ⚡ Performance. It is a rendering hint, not a layout rule.
 */

/* ── INP / rendering: skip the work for sections nobody has scrolled to ─────
 *
 * The homepage renders every section on load — styling, layout, paint — even
 * the ones eight screens down. `content-visibility: auto` lets the browser skip
 * all of that until the section is near the viewport.
 *
 * `contain-intrinsic-size` is the important half: without it the skipped
 * section has zero height, the scrollbar jumps as you scroll, and you have
 * traded LCP for CLS. The value is a *guess at the real height* — the browser
 * uses it only until the section is actually rendered, after which it
 * remembers the true size (`auto`).
 */
.tap-home-section {
	content-visibility: auto;
	contain-intrinsic-size: auto 520px;
}

/* The hero is never skipped — it is the LCP element. */
.tap-hero-compact,
.tap-pdp-hero {
	content-visibility: visible;
}

/* ── CLS: reserve space for images that are still in flight ──────────────── */
/* v6.6.4: was a bare img[loading="lazy"], so EVERY lazy image on the site
   got a lilac placeholder — WooCommerce product photos with transparency
   came out tinted purple. Scoped to DIVSA content only. */
body.tap-app .tap-root img[loading="lazy"],
body.tap-app .tap-canvas img[loading="lazy"] {
	background-color: var(--tap-purple-pale, #f4eefb);
}

/* An <img> with width/height attributes and a CSS width still collapses its
 * height unless height:auto is set. This is the one line that makes the
 * width/height attributes we now emit actually prevent layout shift. */
.tap-root img[width][height],
.tap-pdp-hero img[width][height] {
	aspect-ratio: attr(width / height);
	height: auto;
}

/* UX-018: Explicit aspect-ratio reservations to prevent CLS */
.tap-pcard-img,
.tap-hero-media img,
.tap-gallery-img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
}
.tap-avatar-img,
.tap-thumb-img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Hero media keeps its box even before the image or the poster arrives. */
.tap-pdp-hero-media,
.tap-hero-compact-media {
	background-color: #efe7f8;
}

/* ── Reduced motion / data saver ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.tap-hero-compact-media,
	.tap-pdp-hero-media {
		animation: none !important;
	}
}

/* The hero video is removed by tap-perf.js on Save-Data / slow links; this
 * keeps the poster looking identical when that happens. */
.tap-hero-compact-media.tap-perf-poster,
.tap-pdp-hero-media.tap-perf-poster {
	background-size: cover;
	background-position: center;
}