/*
 * SPB ambient continuity — slow compositor-only gradient accents.
 * All artwork is drawn with CSS: no external images, SVG filters, WebGL,
 * costly backdrop blurs or new global scroll event listeners.
 * Applied to a small number of meaningful sections, not every card.
 */
:root{
  --spb-radius-panel:clamp(19px,2.05vw,28px);
  --spb-radius-photo:clamp(16px,1.9vw,25px);
}
@keyframes spbAtmosphereFloat {
  0%   {transform:translate3d(-2.5%,2%,0) scale(1);}
  50%  {transform:translate3d(2%,-2%,0) scale(1.025);}
  100% {transform:translate3d(4%,1%,0) scale(.99);}
}
/* Intentional surface hierarchy: large outer rectangles share fixed,
   visually balanced corners; percentage radii are unsuitable for wide CTAs. */
main :is(
  .ftx-book-card,.ftx-visit-grid article,.ftx-stage,.ftx-video-card,
  .ftx-oem-demo,.ftx-evidence-grid article,.ftx-planning-card,
  .wholesale-media,.quality-bento>article,.quality-image,
  .combined-products-image,.map-frame,.front-story-media,
  .front-info-card,.feature-image,.product-feature-shine,
  .spb-knowledge-card,.spb-company-blue,.spb-company-molecule,
  .spb-company-photo,.spb-editorial-contact-art,.spb-oem-demo,
  .spb-oem-options article,.sr-intro-aside,.sr-check-grid article,
  .sr-cta,.spb-gpb-price-module .price-intro,.spb-gpb-price-module .price-scroll
){border-radius:var(--spb-radius-panel)!important}
main :is(
  .wholesale-media img,.combined-hero-grid img,.front-story-media img,
  .about-company-photo img,.feature-image>img,.photo-wrap img,
  .reference-illustration img,.ftx-video-card video
){border-radius:var(--spb-radius-photo)!important}
main .ftx-stage img{border-radius:0!important}
/* Keep images inside their parent rounding; prevent slivers at the edge. */
main :is(.ftx-book-card,.ftx-video-card,.ftx-stage,.ftx-visit-grid article,
  .wholesale-media,.front-info-card,.spb-company-blue,.spb-company-molecule,
  .spb-company-photo,.spb-editorial-contact-art,.spb-oem-demo,.sr-cta){
  overflow:clip;
}
/* A single subtle drifting color field in ordinary page introductions.
   Preserve the existing page-intro gradient and translucent breadcrumbs. */
main:has(> .page-intro)>.page-intro{
  position:relative;
  isolation:isolate;
  overflow:clip;
}
main:has(> .page-intro)>.page-intro::after{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  left:-20%;
  top:-14%;
  width:min(78vw,760px);
  height:115%;
  border-radius:48%;
  background:radial-gradient(ellipse at 47% 45%,rgba(91,211,205,.18),rgba(73,119,173,.10) 42%,transparent 76%),
             radial-gradient(ellipse at 75% 55%,rgba(181,146,240,.12),transparent 55%);
  animation:spbAtmosphereFloat 32s ease-in-out infinite alternate;
}
main:has(> .page-intro)>.page-intro>.container{position:relative;z-index:2}
/* Sections choose ONE ambient accent rather than multiple stacked overlays. */
main :is(
  .ftx-hero,.ftx-analytics,.wholesale-landing,.combined-capabilities,
  .combined-quality,.spb-gpb-price-module,.spb-editorial-company,
  .spb-editorial-contact,.spb-oem-section
){
  position:relative;
  isolation:isolate;
  overflow:clip;
}
main :is(
  .ftx-hero,.ftx-analytics,.wholesale-landing,.combined-capabilities,
  .combined-quality,.spb-gpb-price-module,.spb-editorial-company,
  .spb-editorial-contact,.spb-oem-section
)::after{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  top:-10%;
  right:-13%;
  width:min(60vw,700px);
  height:80%;
  border-radius:48%;
  background:radial-gradient(ellipse at 40% 52%,rgba(114,220,200,.10),rgba(113,142,217,.065) 39%,transparent 72%),
             radial-gradient(ellipse at 72% 53%,rgba(184,155,243,.085),transparent 65%);
  animation:spbAtmosphereFloat 34s ease-in-out infinite alternate-reverse;
}
/* Text, cards and links always remain in front of decorative gradients. */
main :is(
  .ftx-hero,.ftx-analytics,.wholesale-landing,.combined-capabilities,
  .combined-quality,.spb-gpb-price-module,.spb-editorial-company,
  .spb-editorial-contact,.spb-oem-section
)>.container{position:relative;z-index:1}
/* The request-a-tour panel in particular should remain a proper rounded
   rectangle at every viewport width, with no giant elliptical corners. */
main .ftx-book-card{
  isolation:isolate;
  position:relative;
  border-radius:var(--spb-radius-panel)!important;
  background:linear-gradient(137deg,#2b2933 0%,#302b3c 58%,#292938 100%);
  box-shadow:inset 0 1px rgba(255,255,255,.04),0 20px 65px rgba(4,6,14,.10);
}
main .ftx-book-card::before{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  right:-8%;
  top:-25%;
  width:min(52vw,600px);
  height:130%;
  border-radius:48%;
  background:radial-gradient(ellipse at 50% 48%,rgba(157,132,232,.17),rgba(105,214,207,.08) 46%,transparent 74%);
  animation:spbAtmosphereFloat 30s ease-in-out infinite alternate;
}
main .ftx-book-card>div{position:relative;z-index:1;min-width:0}
main .ftx-book-card .ftx-book-actions{min-width:min(100%,238px)}
main .ftx-book-card h2{max-width:17ch;line-height:1.09;overflow-wrap:normal}
main .ftx-book-card .button{white-space:normal;text-align:center;min-height:52px}
/* Maintain quiet backgrounds in dense data, menus and the price tables. */
main .spb-gpb-price-module::after{opacity:.7}
main .combined-quality::after{opacity:.8}
/* Pause offscreen CSS animation. Existing site observer marks sections. */
main .section:not(.spb-in-viewport)::after,
main .section:not(.spb-in-viewport) .ftx-book-card::before,
main .ftx-hero:not(.spb-in-viewport)::after{
  animation-play-state:paused!important;
}
@media(max-width:900px){
  /* Mobile keeps the same atmospheric palette without continuous GPU work. */
  main:has(> .page-intro)>.page-intro::after,
  main :is(
    .ftx-hero,.ftx-analytics,.wholesale-landing,.combined-capabilities,
    .combined-quality,.spb-gpb-price-module,.spb-editorial-company,
    .spb-editorial-contact,.spb-oem-section
  )::after,
  main .ftx-book-card::before{
    animation:none!important;
    transform:none!important;
    opacity:.82;
  }
  main .ftx-book-card{gap:clamp(1.4rem,3vw,2.5rem)}
  main .ftx-book-card h2{font-size:clamp(2.2rem,6vw,3.5rem)}
}
@media(max-width:600px){
  main .ftx-book-card{padding:clamp(1.35rem,5vw,2rem)}
  main .ftx-book-card .ftx-book-actions{width:100%;min-width:0}
  main .ftx-book-card .button{width:100%}
  main :is(.ftx-stage,.ftx-book-card,.spb-oem-demo,.sr-cta,
    .spb-company-blue,.spb-company-molecule,.spb-company-photo){
    border-radius:20px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  main:has(> .page-intro)>.page-intro::after,
  main :is(
    .ftx-hero,.ftx-analytics,.wholesale-landing,.combined-capabilities,
    .combined-quality,.spb-gpb-price-module,.spb-editorial-company,
    .spb-editorial-contact,.spb-oem-section
  )::after,
  main .ftx-book-card::before{animation:none!important;transform:none!important}
}