/* ============================================================
   Robin Beach Resort — Performance Patch
   Add BEFORE </head>:
     <link rel="stylesheet" href="performance.css">
   ============================================================ */

/* ----------------------------------------------------------
   1. GPU-PROMOTE THE FIXED NAVBAR
      Without this, every scroll frame forces a full-page
      repaint because the browser has to re-composite
      the fixed layer over new content.
   ---------------------------------------------------------- */
.navbar.fixed-top {
   will-change: transform;
   transform: translateZ(0);
   /* promotes to its own GPU layer  */
   backface-visibility: hidden;
}

/* ----------------------------------------------------------
   2. CONTENT-VISIBILITY ON BELOW-FOLD SECTIONS
      Skips rendering work for sections not yet in viewport.
      `contain-intrinsic-size` prevents layout shift when the
      section is revealed; adjust values to match your design.
   ---------------------------------------------------------- */
#gallery,
#rooms,
#ratings,
#features,
#location {
   contain-intrinsic-size: 0 600px;
   /* estimated section height */
}

/* ----------------------------------------------------------
   3. LAYOUT CONTAINMENT ON REPEATED CARDS
      Tells the browser each card is an independent layout
      unit — changes inside one card never force a full-page
      reflow.
   ---------------------------------------------------------- */
.room-card,
.testimonial-card,
.feature-box {
   contain: layout style;
}

/* ----------------------------------------------------------
   4. PREVENT GALLERY/ROOM IMAGES FROM CAUSING REPAINTS
      `will-change: opacity` is enough to hoist images onto
      their own compositor layers during hover transitions.
   ---------------------------------------------------------- */
.gallery-img,
.room-card .card-img-top {
   will-change: opacity;
   backface-visibility: hidden;
   transform: translateZ(0);
}

/* ----------------------------------------------------------
   5. COMPOSITED MODAL ANIMATION
      Bootstrap's modal uses opacity + transform. Declaring
      them here prevents jank when the modal opens/closes.
   ---------------------------------------------------------- */
.modal {
   will-change: opacity;
}

.modal-dialog {
   will-change: transform;
}

/* ----------------------------------------------------------
   6. SMOOTH SCROLLING — NATIVE (no JS needed)
   ---------------------------------------------------------- */
html {
   scroll-behavior: smooth;
}

/* ----------------------------------------------------------
   7. ANCHOR NAV OFFSET FIX
      Prevents sections from hiding under the fixed navbar
      when a nav link is clicked.
   ---------------------------------------------------------- */
section[id] {
   scroll-margin-top: 80px;
   /* adjust to match your navbar height */
}