/**
 * performance.css — Gulf Yachts Performance Enhancement Layer
 * Purpose: Performance-only improvements. Zero visual changes.
 * Covers: GPU compositing, scroll smoothness, CLS prevention,
 *         font rendering, image rendering, animation efficiency.
 */

/* ─── 1. FONT DISPLAY OPTIMIZATION ─────────────────────────────────────── */
/* Prevent invisible text during font load (FOIT → FOUT) */
@font-face {
  font-display: swap;
}

/* ─── 2. SCROLL PERFORMANCE ─────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/* Prevent scroll-blocking on touch */
* {
  -webkit-tap-highlight-color: transparent;
}

/* ─── 3. GPU COMPOSITING — ANIMATIONS & TRANSITIONS ─────────────────────── */
/* Promote animated elements to their own compositor layer.
   This eliminates main-thread repaints during animation. */
.banner,
.carousel-item,
#initial-video,
.car-box-3,
.service-box,
.gallery-item,
.navbar,
nav.nav-sidebar,
.page_loader {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Animate only compositor-safe properties */
.car-box-3,
.service-box,
.gallery-item img,
.zoom-effect-container img,
.car-magnify-gallery a img {
  will-change: transform, opacity;
}

/* ─── 4. CONTENT-VISIBILITY (off-screen rendering skip) ─────────────────── */
/* Skip rendering of below-fold sections entirely until they scroll near */
#preowned-boats,
.blog-section,
footer,
.workshop-section,
.brands-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 800px;
}

/* ─── 5. IMAGE RENDERING PERFORMANCE ────────────────────────────────────── */
img {
  /* Prevent layout shift: images should declare size or use aspect-ratio */
  image-rendering: auto;
  /* Decode asynchronously off main thread */
  -webkit-user-drag: none;
}

/* Footer gallery images — known small size, crisp render */
.footer-gallery img {
  image-rendering: -webkit-optimize-contrast;
}

/* ─── 6. LAYOUT CONTAINMENT — REDUCE REFLOW SCOPE ───────────────────────── */
/* Constrain layout recalculation to the component, not the whole page */
.car-box-3,
.service-box,
.counter-box-3,
.footer-item,
.gallery-item {
  contain: layout style;
}

/* ─── 7. OVERFLOW & SCROLL OPTIMIZATION ─────────────────────────────────── */
.banner-slider-inner,
.slick-list,
.slick-track {
  overflow: hidden;
}

/* ─── 8. TRANSITION DURATION NORMALIZATION ───────────────────────────────── */
/* All hover effects: use GPU-only properties (transform, opacity) not width/height/top/left */
.car-box-3:hover,
.service-box:hover,
.gallery-item:hover {
  transform: translateY(-4px) translateZ(0);
  transition: transform 0.28s ease, opacity 0.28s ease;
}

/* ─── 9. REDUCE SELECTOR COMPLEXITY ON HOVER CHAINS ─────────────────────── */
/* The CSS hover chain for video containers is CSS-pure — keep it but add layer hint */
#new-video-container {
  isolation: isolate;
}

/* ─── 10. FONT RENDERING ─────────────────────────────────────────────────── */
body,
h1, h2, h3, h4, h5, h6,
p, a, li {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ─── 11. SECTION SCROLL ANCHOR ─────────────────────────────────────────── */
/* Prevent CLS from anchor jump during load */
[id] {
  scroll-margin-top: 90px;
}

/* ─── 12. FOCUS VISIBILITY (Accessibility without layout shift) ───────────── */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #dc651e;
  outline-offset: 3px;
}

/* ─── 13. REDUCE ANIMATION ON REDUCED-MOTION PREFERENCE ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .carousel {
    transition: none !important;
  }
}

/* ─── 14. MOBILE PERFORMANCE TWEAKS ─────────────────────────────────────── */
@media (max-width: 768px) {
  /* Reduce expensive blur/shadow on mobile */
  .car-box-3,
  .service-box {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  }
  /* Disable hover video interactions on touch */
  #new-video-container .video {
    display: none !important;
  }
}

/* ─── 15. IFRAME PERFORMANCE ─────────────────────────────────────────────── */
/* Vimeo iframes: prevent pointer events from triggering main-thread work */
iframe[src*="vimeo"] {
  pointer-events: none;
}

/* ─── 16. PRINT OPTIMIZATION ─────────────────────────────────────────────── */
@media print {
  .banner, video, iframe, .page_loader, nav.nav-sidebar, #dot-nav {
    display: none !important;
  }
}

/* ── Additional performance + SEO fixes ── */

/* Gallery popup improvements */
.popup-modal {
  display: none;
  position: fixed;
  z-index: 99999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.92);
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(4px);
}
.popup-modal img.popup-image {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  object-fit: contain;
  user-select: none;
}
.popup-close {
  position: absolute;
  top: 16px; right: 20px;
  font-size: 32px;
  color: #fff;
  cursor: pointer;
  z-index: 100001;
  line-height: 1;
  opacity: 0.85;
  transition: opacity 0.2s;
  background: rgba(0,0,0,0.4);
  border-radius: 50%;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.popup-close:hover { opacity: 1; }
.popup-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  font-size: 36px;
  color: #fff;
  cursor: pointer;
  z-index: 100001;
  padding: 12px 18px;
  background: rgba(0,0,0,0.4);
  border-radius: 4px;
  user-select: none;
  transition: background 0.2s;
}
.popup-nav:hover { background: rgba(220,101,30,0.8); }
.popup-nav.prev { left: 16px; }
.popup-nav.next { right: 16px; }

/* Thumbnail hover cursor */
.slider-nav .thumb-slide img,
.slider-for img {
  cursor: zoom-in !important;
  transition: opacity 0.2s;
}
.slider-nav .thumb-slide:hover img { opacity: 0.85; }

/* Image contain-intrinsic-size for CLS prevention */
img[loading="lazy"] { content-visibility: auto; }

/* Skip to content — accessibility + SEO */
.skip-link {
  position: absolute; left: -9999px; top: 4px;
  background: #dc651e; color: #fff;
  padding: 8px 16px; z-index: 99999;
  border-radius: 4px; font-weight: 600;
}
.skip-link:focus { left: 4px; }

/* ── Sticky header always white on sh-2 pages ── */
.sticky-header.sh-2 {
    background: #fff !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08) !important;
}
/* Nav links always dark on white header */
.sh-2 .navbar-expand-lg .navbar-nav .nav-link { color: #333 !important; }
.sh-2 .navbar-expand-lg .navbar-nav .nav-link:hover { color: #dc651e !important; }

button#drawer .fa-bars, button#drawer .fa-close {
	background-color:black !important;
    font-size: 18px; font-weight: 300 !important;
    color: #555; opacity: 0.65;
}