/* ==========================================================
   performance.css — DDU-GU CDOE Core Web Vitals Optimizations
   Created: 2026-04-10 | DO NOT REMOVE — Critical for CLS/LCP
   ========================================================== */

/* ----------------------------------------------------------
   CLS PREVENTION: Reserve rough space for carousel while images load
   Does NOT force aspect-ratio or object-fit to avoid distorting banners
   ---------------------------------------------------------- */
.carousel-item {
  min-height: 200px;
}

/* ----------------------------------------------------------
   CLS PREVENTION: Form container minimum height
   Prevents content shift when "Request a Call Back" form loads
   ---------------------------------------------------------- */
.form-ban {
  min-height: 380px;
}

/* ----------------------------------------------------------
   CLS PREVENTION: FAQ Accordion minimum height
   Prevents layout shift during accordion open/close
   ---------------------------------------------------------- */
.accordion-item {
  min-height: 56px;
}

/* ----------------------------------------------------------
   LAZY IMAGE PLACEHOLDER — shows background while image loads
   ---------------------------------------------------------- */
img[loading="lazy"] {
  background-color: #f0f4f8;
}

/* ----------------------------------------------------------
   LCP: CSS-level safety net — preloader hides after max 3s
   (JS hard cap at 1.5s is the primary method)
   ---------------------------------------------------------- */
.preloader {
  animation: preloader-fadeout 0s 3s forwards;
}
@keyframes preloader-fadeout {
  to {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }
}

/* ----------------------------------------------------------
   INP: will-change only on actively animating elements
   ---------------------------------------------------------- */
.carousel-item.active {
  will-change: transform;
}

/* ----------------------------------------------------------
   PERFORMANCE: contain fixed floating elements to reduce paint area
   ---------------------------------------------------------- */
.float-btn-rght {
  contain: layout style;
}

/* ----------------------------------------------------------
   FONT LOADING STABILITY: prevents browser-synthesized italic/bold
   which can cause subtle layout shift during font swap
   ---------------------------------------------------------- */
body {
  font-synthesis: none;
}