/* ══════════════════════════════════════════════════════════════════
   perf-patch.css  —  Performance fixes for bWave site
   Drop this file and add it as the LAST stylesheet in index.html
══════════════════════════════════════════════════════════════════ */

/* ── 1. GPU-promote the animated sections to avoid layer thrashing ── */
.rts-banner-area,
.scene-sticky,
.svg-mover,
.header--sticky {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ── 2. Remove will-change from svg-mover when not animating ──────── */
/* will-change is already set via GSAP — we only need it during scroll */
.svg-mover {
  will-change: auto; /* reset; GSAP will set it dynamically */
}

/* ── 3. Contain layout/paint for each scene to isolate repaints ───── */
.scene-section {
  contain: layout style;
}

/* ── 4. YouTube facade sizing ──────────────────────────────────────── */
.video-showcase-area .yt-facade {
  width: 100%;
  aspect-ratio: 16 / 9;
  padding-bottom: 0; /* override the % trick when aspect-ratio is supported */
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  position: relative;
}

.yt-facade .yt-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.85);
  transition: filter 0.2s;
}

.yt-facade:hover .yt-thumb { filter: brightness(0.7); }

.yt-facade .yt-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  cursor: pointer;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.5));
  transition: transform .15s, filter .15s;
  z-index: 2;
}

.yt-facade:hover .yt-play-btn {
  transform: translate(-50%, -50%) scale(1.12);
}

.yt-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Fallback for older browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 16/9) {
  .video-showcase-area .yt-facade {
    padding-bottom: 56.25%;
    height: 0;
  }
}

/* ── 5. Prevent cumulative layout shift from client logos ───────────── */
.mySwiper-brand-banner .swiper-slide img {
  height: auto;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* ── 6. Smooth scroll for anchor nav links ──────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ── 7. Reduce paint area for floating WhatsApp button animation ────── */
.contact_icon {
  will-change: transform;
  contain: layout style paint;
}

/* ── 8. Mobile: prevent horizontal overflow jank ────────────────────── */
@media (max-width: 768px) {
  body, .rts-banner-area, #smartward-journey {
    overflow-x: hidden;
  }
  /* Reduce motion for users who prefer it */
  @media (prefers-reduced-motion: reduce) {
    .svg-mover, .scene-title, .lbl, .panels-left {
      transition: none !important;
      animation: none !important;
    }
  }
}