/* Performance tuning layer — loaded after laser.css */

/* Keep long-running transforms on their own layer, but only while visible */
.animate-scroll-x,
.float-hero {
  will-change: transform;
  backface-visibility: hidden;
}

/* Pause offscreen animations (set by the runtime IntersectionObserver) */
.anim-paused,
.anim-paused * {
  animation-play-state: paused !important;
}

/* NOTE: content-visibility was removed here — it made sections render blank
   while scrolling and constantly re-estimated the page height, which caused
   the "white page" + "endless scroll" behaviour. */

/* Single scroll container: only the root document scrolls. `clip` prevents
   browsers from promoting body into a second vertical scroll container. */
html {
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background-color: #faf5ea;
}
body {
  overflow-x: clip;
  overflow-y: clip;
  min-height: 100%;
  background-color: #faf5ea;
}
/* Tailwind's overflow-x-hidden turns the wrapper into a y-scroll container
   in some browsers (second scrollbar). `clip` avoids that. */
.overflow-x-hidden {
  overflow-x: clip;
  overflow-y: visible;
  background-color: #faf5ea;
}

/* Use one parchment surface across every light page section. Dark navy
   campaign sections and white content cards keep their explicit colors. */
.min-h-screen > section.bg-white {
  background-color: #faf5ea;
}

/* Mobile hardening */
@media (max-width: 640px) {
  img {
    max-width: 100%;
    height: auto;
  }
  a,
  button {
    -webkit-tap-highlight-color: transparent;
  }
  h1 {
    word-break: normal;
    overflow-wrap: anywhere;
  }
}

/* Carousel viewports scroll on the compositor */
[data-reviews-viewport] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Avoid layout shift while images decode */
img {
  background-color: rgba(0, 0, 0, 0.02);
}

/* Low-power / reduced-motion devices: drop the expensive continuous effects */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .animate-scroll-x {
    animation: none !important;
  }
}

/* Coarse pointers (phones/tablets): lighter shadows + no infinite pulse */
@media (hover: none) and (pointer: coarse) {
  .animate-pulse {
    animation: none !important;
  }
  .shadow-2xl {
    box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.25) !important;
  }
  .float-hero {
    animation-duration: 8s !important;
  }
}