/* ============================================================
   OmniResume — Performance-oriented styles
   Applied where they help without breaking layout or
   accessibility. No layout thrashing, no visual compromise.
   ============================================================ */

/* ---------- Font rendering stability ---------- */

html {
  font-display: swap;
  text-rendering: optimizeSpeed;
}

body {
  font-synthesis-weight: none;
  font-synthesis-style: none;
}

/* Prevent layout shift while a web font loads */
.fonts-loading body {
  visibility: hidden;
}

.fonts-ready body {
  visibility: visible;
}

@supports (font-display: swap) {
  .fonts-loading body {
    visibility: visible;
    opacity: 0.9999;
  }
}

/* ---------- CSS containment for isolated islands ---------- */

.contain-layout {
  contain: layout;
}

.contain-paint {
  contain: paint;
}

.contain-strict {
  contain: strict;
}

.contain-content {
  contain: content;
}

/* Cards and repeated list items — cheapest to isolate */
.gallery-card,
.dash-card,
.blog-card,
.example-card,
.resource-card,
.feature-card,
.category-card,
.story-card,
.template-card {
  contain: layout style;
}

.gallery-card-thumb,
.story-card-cover,
.dash-card-thumb {
  contain: layout paint size;
}

/* Off-screen rendering optimization for long lists (progressive enhancement) */
.gallery-grid > .gallery-card,
.blog-grid > .blog-card,
.examples-grid > .example-card {
  content-visibility: auto;
  contain-intrinsic-size: 320px 420px;
}

.blog-grid > .blog-card,
.examples-grid > .example-card {
  contain-intrinsic-size: 240px 280px;
}

/* ---------- Will-change discipline ----------
   Only used on elements that actually animate during interaction. */

.builder-preview-page {
  will-change: transform;
}

.gallery-card:hover .gallery-card-thumb img {
  will-change: transform;
}

.gallery-card-thumb img {
  will-change: auto;
}

/* Reset will-change after the animation ends to free GPU memory */
.builder-preview-page.is-settled {
  will-change: auto;
}

/* ---------- Prevent transition-triggered layout ---------- */

.btn,
.gallery-card,
.dash-card,
.blog-card,
.example-card,
.resource-card,
.feature-card,
.category-card {
  backface-visibility: hidden;
}

/* ---------- Images ---------- */

img,
picture,
video,
canvas,
svg {
  /* Reserve space to prevent CLS */
  display: block;
  max-width: 100%;
  height: auto;
  background-color: var(--color-bg-muted);
}

img[width][height] {
  aspect-ratio: auto;
}

img.lazy-load {
  opacity: 0;
  transition: opacity 240ms ease;
}

img.lazy-load.is-loaded {
  opacity: 1;
}

img.lazy-load.is-error {
  opacity: 1;
  background: var(--color-bg-muted);
}

img[decoding="async"] {
  decode: async;
}

/* Responsive images — ensure the srcset picks are crisp */
img[srcset] {
  image-rendering: auto;
}

/* ---------- Above-the-fold optimization ---------- */

.hero,
.gallery-hero,
.blog-hero,
.stories-hero,
.examples-hero,
.article-hero {
  contain: layout paint;
}

.hero-visual img,
.example-hero img {
  content-visibility: visible;
}

/* ---------- Reduce paint cost on sticky headers ---------- */

.site-header,
.builder-header {
  transform: translateZ(0);
}

/* ---------- Avoid unnecessary repaints on hover-only elements ---------- */

.category-card:hover,
.example-card:hover,
.resource-card:hover {
  will-change: transform;
}

.category-card,
.example-card,
.resource-card {
  will-change: auto;
}

/* ---------- Reduced data / save-data hint ---------- */

@media (prefers-reduced-data: reduce) {
  .gallery-card-thumb img,
  .story-card-cover {
    background: var(--color-bg-muted);
  }

  .gallery-card-thumb img,
  .blog-featured-card img,
  .hero-visual img {
    opacity: 0;
    pointer-events: none;
  }
}

/* ---------- Print: no lazy-load animations ---------- */

@media print {
  img.lazy-load {
    opacity: 1 !important;
    transition: none !important;
  }

  * {
    will-change: auto !important;
    contain: none !important;
    content-visibility: visible !important;
  }
}