/* ==========================================================
   FULL-SITE SMOOTHNESS PASS — 09 SEP 2026
   Goal: preserve the premium motion system while keeping every
   page and every scroll responsive on Safari/Chrome/mobile.
   ========================================================== */
:root{
  --smooth-ease:cubic-bezier(.16,1,.3,1);
}
html{
  scroll-behavior:auto;
  scrollbar-gutter:stable;
  -webkit-text-size-adjust:100%;
}
body{
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Keep the fixed chrome on its own compositor without forcing
   every card/image on the page into a permanent GPU layer. */
.site-nav,
.progress-rail,
.menu-overlay,
.training-entry-exact{
  transform:translateZ(0);
  backface-visibility:hidden;
}

/* Large blur/backdrop effects are expensive because the browser
   has to continuously re-sample the page underneath while scrolling.
   Opaque/translucent surfaces preserve the premium look with far less paint. */
.site-nav,
.menu-button,
.menu-overlay.nav-v5-menu,
.tr-hero-copy .tr-kicker,
.tr-hero-scroll,
.tr-next-card,
.tr-pillar-tabs a,
.tr-pillar-caption,
.client-logo-item,
.tr-story-content,
.tr-cinematic-copy,
.tr-cinematic-reviewers,
.tr-cinematic-controls,
.tr-cinematic-controls button,
.tr-final-copy,
.premium-route-map .route-choice-card{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.page-home .site-nav,
.page-home-refined .site-nav{background:rgba(8,8,8,.965)!important;}
.menu-overlay.nav-v5-menu{background:radial-gradient(circle at 85% 12%,rgba(213,31,50,.16),transparent 34%),#080808!important;}
.tr-next-card,.tr-pillar-caption,.tr-story-content,.tr-cinematic-copy,.tr-cinematic-reviewers,.tr-final-copy{background-color:rgba(12,12,12,.90)!important;}
.client-logo-item{background:rgba(255,255,255,.94)!important;}

/* Remove blur from animated content itself. Blur during a translate/scale
   is a common source of rasterisation and dropped frames across browsers. */
.reveal,
.pm-reveal,
.pm-card,
.pm-image-reveal,
.home-motion-section,
.home-word>i,
.tr-cinematic-media.is-changing img,
.tr-cinematic-copy.is-changing{
  filter:none!important;
}

/* The old ambient liquid layer is visually subtle but permanently expensive. */
.liquid-ambient{display:none!important;}

/* Homepage: keep depth, remove expensive moving blurred blobs. */
.page-home-refined.home-motion-plus .home-motion-orb{display:none!important;}
.page-home-refined.home-motion-plus .doc-hero-actions::before{filter:none!important;opacity:.25!important;}
.page-home-refined.home-motion-plus .doc-offer-split::after{filter:none!important;opacity:.45!important;}
.page-home-refined.home-motion-plus .tr-hero-bg,
.page-home-refined.home-motion-plus .founder-story-refined .tr-founder-image img,
.page-home-refined.home-motion-plus .doc-final .tr-final-art{
  transition:transform .11s linear!important;
}

/* Keep photos sharp and composited when they are the things that actually move. */
.content-hero-media>img,
.tr-hero-bg,
.tr-founder-image img,
.home-lab-choice__photo,
.real-session-shot img,
.tr-final-art,
.tr-cinematic-media img{
  backface-visibility:hidden;
  transform-style:flat;
}

/* Skip rendering lower heavy sections until they approach the viewport.
   Unsupported browsers simply ignore this. */
@supports (content-visibility:auto){
  .content-flow>.story-section,
  .real-session-gallery-section,
  .linkedin-proof,
  .tr-testimonials,
  .client-logos,
  .home-lab-choice,
  .doc-results,
  .tr-results,
  .tr-story-dark{
    content-visibility:auto;
    contain-intrinsic-size:auto 760px;
  }
}

/* During an active gesture, decorative infinite loops pause so the
   frame budget belongs to the user's scroll. They resume immediately after. */
body.scroll-active .client-marquee-track,
body.scroll-active .kinetic-line>div,
body.scroll-active .tr-hero::before,
body.scroll-active .tr-story-dark::before,
body.scroll-active .page-home-refined.home-motion-plus .tr-hero::after,
body.scroll-active .page-home-refined.home-motion-plus .tr-cinematic-review-stage::before,
body.scroll-active .page-home-refined.home-motion-plus .tr-review-person.is-active .tr-review-person-avatar,
body.scroll-active .page-home-refined.home-motion-plus .doc-final .tr-final-copy::after,
body.scroll-active .tl-ecosystem-redesign .tl-route-orbit,
body.scroll-active .tl-ecosystem-redesign .tl-route-scan,
body.scroll-active .tl-ecosystem-redesign .tl-route-hub__halo,
body.scroll-active .tl-ecosystem-redesign .tl-route-hub::before,
body.scroll-active .tl-ecosystem-redesign .tl-route-num{
  animation-play-state:paused!important;
}

/* Don't repaint hover shadows/tilts while the page is physically moving. */
body.scroll-active .pm-card,
body.scroll-active .doc-question-card,
body.scroll-active .tr-feature-card,
body.scroll-active .tr-next-card,
body.scroll-active .home-lab-choice__card,
body.scroll-active .tl-route-card,
body.scroll-active .client-logo-item{
  transition-duration:0s!important;
}

/* Mobile and low-power devices: use the same visual system, but without
   GPU-heavy glass, giant shadow kernels or continuous decorative motion. */
.perf-lite .tr-hero::before,
.perf-lite .tr-story-dark::before,
.perf-lite .page-home-refined.home-motion-plus .tr-hero::after,
.perf-lite .page-home-refined.home-motion-plus .tr-cinematic-review-stage::before,
.perf-lite .page-home-refined.home-motion-plus .doc-final .tr-final-copy::after{
  animation:none!important;
}
.perf-lite .tr-next-card,
.perf-lite .tr-story-content,
.perf-lite .tr-cinematic-copy,
.perf-lite .tr-cinematic-reviewers,
.perf-lite .tr-final-copy,
.perf-lite .pm-card,
.perf-lite .real-session-shot,
.perf-lite .home-lab-choice__card{
  box-shadow:none!important;
}
.perf-lite .training-entry-exact__glow{display:none!important;}

/* A short native cross-document fade where supported. It never delays navigation. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto;}
  ::view-transition-old(root){animation:smoothPageOut .18s ease both;}
  ::view-transition-new(root){animation:smoothPageIn .26s var(--smooth-ease) both;}
}
@keyframes smoothPageOut{to{opacity:.82;transform:translateY(-3px)}}
@keyframes smoothPageIn{from{opacity:.82;transform:translateY(5px)}to{opacity:1;transform:none}}

@media(max-width:900px){
  html{scrollbar-gutter:auto;}
  .site-nav,.menu-button,.menu-overlay.nav-v5-menu{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
  .content-flow>.story-section,
  .real-session-gallery-section,
  .linkedin-proof,
  .tr-testimonials{contain-intrinsic-size:auto 620px;}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important;}
  body.scroll-active *{animation-play-state:paused!important;}
}