/* ============================================================
   31-modern-platform.css — 2026 web-platform polish

   What this file adds, in plain English:

   1. Cross-document View Transitions
      Modern browsers (Chrome 126+, Safari 18+, Firefox 132+) can
      cross-fade between pages of the same origin as the user
      navigates — no SPA framework, no JS. We opt in here. Older
      browsers ignore the @view-transition rule entirely and the
      site behaves exactly as before.

   2. content-visibility: auto for below-fold sections
      The browser skips rendering offscreen modules until they're
      about to scroll into view. Cuts initial render cost massively
      on long pages (home + granny-flats) without changing layout.

   3. prefers-reduced-motion guard
      Anyone who's set their OS to "reduce motion" gets instant
      page swaps, not fades. We don't override accessibility.

   This module is intentionally last in the load order so it can
   override or extend earlier rules without specificity wars.
   ============================================================ */

/* ---------- View Transitions (cross-doc) ---------- */
@view-transition {
  navigation: auto;
}

/* Default cross-fade is fine but a tiny slide makes it feel
   intentional. We slide the OLD page up slightly while fading
   it out, and slide the NEW page up from a touch lower. Pure
   composition — no layout shift, no jank. */
::view-transition-old(root) {
  animation: btb-fade-out 220ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
::view-transition-new(root) {
  animation: btb-fade-in 280ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes btb-fade-out {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}
@keyframes btb-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Persistent elements that should NOT animate during page swap.
   The header logo and the floating "Text Nathan" button should
   appear to stay in place between pages — give them stable
   view-transition-names so the browser morphs them instead of
   cross-fading them. */
.site-header .logo {
  view-transition-name: btb-logo;
}
.floating-cta {
  view-transition-name: btb-floating-cta;
}
.banner {
  view-transition-name: btb-status-banner;
}

/* Accessibility — anyone with reduce-motion gets instant swaps */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* ---------- content-visibility: auto ---------- */
/* Defer rendering of large below-fold modules until they're about
   to scroll into view. Targets the modules that have heavy DOM
   (testimonials, FAQs, projects, before/after, cost estimator).
   `contain-intrinsic-size` reserves a sane placeholder height so
   the scrollbar doesn't jump as deferred sections paint in. */
#testimonials,
#faqs,
#projects,
#process,
#availability,
#before-after,
#cost-estimator,
#trust-row,
.fb-block {
  content-visibility: auto;
  contain-intrinsic-size: 1px 600px;
}

/* The hero is ALWAYS above the fold — never defer it (defensive,
   in case a hero ever picks up one of the IDs above) */
#hero {
  content-visibility: visible;
}

/* ---------- Native popover support for the floating CTA ---------- */
/* Where the floating "Text Nathan" widget uses the modern Popover
   API (`popover` attribute), give it a clean panel. Falls back to
   the existing `.floating-cta-panel` JS toggle on older browsers. */
[popover].floating-cta-popover {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  inset: auto;
  position: fixed;
  right: 16px;
  bottom: 80px;
}