/* app.css — performance & CLS safeguards */

/* Media defaults */
img, svg { display: inline-block; height: auto; }
img { max-width: 100%; }

/* Ensure dimensions/aspect ratio to prevent CLS */
.figure-16x9 { aspect-ratio: 16 / 9; width: 100%; }
.figure-4x3 { aspect-ratio: 4 / 3; width: 100%; }
.figure-1x1 { aspect-ratio: 1 / 1; width: 100%; }

/* Iframe/video wrapper with aspect-ratio */
.embed-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.embed-frame > iframe, .embed-frame > video { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Animation guideline: only transform/opacity */
.will-animate { will-change: transform, opacity; }

/* Reserve space for dynamic content blocks */
.slot-connection { contain: layout style paint; }

/* Virtualize below-the-fold heavy sections */
.section-deferred { content-visibility: auto; contain-intrinsic-size: 1000px; }

/* Simple reveal effect using IntersectionObserver (no layout writes) */
.js-reveal { opacity: 0; transform: translateY(8px); transition: transform .24s ease, opacity .24s ease; }
.is-visible { opacity: 1; transform: none; }