/* BLACKSAW 2081 — GLOBAL FLUID MOTION v163
   Every artwork/background stays alive. Closed-loop keyframes use identical
   start/end states so there is no visible snap at loop boundaries. */

:root{--bs-motion-ease:cubic-bezier(.42,0,.58,1)}

/* Background-image elements: slow continuous camera drift. We animate only
   background-position here so text/layout carried by the element never moves. */
.bs-fluid-bg{
  animation:bsBgDriftA 30s var(--bs-motion-ease) infinite!important;
  will-change:background-position,filter;
}
.bs-fluid-bg.bs-motion-b{animation-name:bsBgDriftB!important;animation-duration:36s!important}
.bs-fluid-bg.bs-motion-c{animation-name:bsBgDriftC!important;animation-duration:42s!important}

@keyframes bsBgDriftA{
  0%,100%{background-position:50% 50%}
  25%{background-position:53% 48.5%}
  50%{background-position:51.5% 53%}
  75%{background-position:47.5% 51%}
}
@keyframes bsBgDriftB{
  0%,100%{background-position:50% 50%}
  25%{background-position:47.5% 52.5%}
  50%{background-position:52.5% 53%}
  75%{background-position:53% 48%}
}
@keyframes bsBgDriftC{
  0%,100%{background-position:50% 50%}
  25%{background-position:51.5% 47%}
  50%{background-position:46.5% 50.5%}
  75%{background-position:52.5% 53%}
}

/* Real image artwork: smooth zoom-in / zoom-out + drift. 0% = 100%, so the
   loop never jumps back to its beginning. */
.bs-fluid-img{
  animation:bsImageDriftA 28s var(--bs-motion-ease) infinite!important;
  transform-origin:center center!important;
  backface-visibility:hidden;
  will-change:transform,filter;
}
.bs-fluid-img.bs-motion-b{animation-name:bsImageDriftB!important;animation-duration:34s!important}
.bs-fluid-img.bs-motion-c{animation-name:bsImageDriftC!important;animation-duration:40s!important}

@keyframes bsImageDriftA{
  0%,100%{transform:translate3d(0,0,0) scale(1.035)}
  25%{transform:translate3d(-.55%,.20%,0) scale(1.070)}
  50%{transform:translate3d(.35%,.45%,0) scale(1.095)}
  75%{transform:translate3d(.60%,-.25%,0) scale(1.065)}
}
@keyframes bsImageDriftB{
  0%,100%{transform:translate3d(0,0,0) scale(1.045)}
  25%{transform:translate3d(.50%,-.30%,0) scale(1.085)}
  50%{transform:translate3d(-.55%,.35%,0) scale(1.105)}
  75%{transform:translate3d(-.25%,.55%,0) scale(1.070)}
}
@keyframes bsImageDriftC{
  0%,100%{transform:translate3d(0,0,0) scale(1.030)}
  25%{transform:translate3d(-.35%,-.45%,0) scale(1.060)}
  50%{transform:translate3d(.60%,.20%,0) scale(1.090)}
  75%{transform:translate3d(.15%,.50%,0) scale(1.055)}
}

/* Homepage / Universe hero background layers. */
#universeView .uCinemaBg{
  animation:bsHeroDriftA 32s var(--bs-motion-ease) infinite!important;
  transform-origin:center center!important;
  will-change:transform,opacity,filter;
}
#universeView .uCinemaBgB{
  animation:bsHeroDriftB 38s var(--bs-motion-ease) infinite!important;
  transform-origin:center center!important;
  will-change:transform,opacity,filter;
}
@keyframes bsHeroDriftA{
  0%,100%{transform:translate3d(0,0,0) scale(1.055)}
  25%{transform:translate3d(-.45%,.20%,0) scale(1.080)}
  50%{transform:translate3d(.70%,.45%,0) scale(1.110)}
  75%{transform:translate3d(.25%,-.35%,0) scale(1.080)}
}
@keyframes bsHeroDriftB{
  0%,100%{transform:translate3d(0,0,0) scale(1.065)}
  25%{transform:translate3d(.70%,-.25%,0) scale(1.095)}
  50%{transform:translate3d(-.65%,-.45%,0) scale(1.120)}
  75%{transform:translate3d(-.20%,.35%,0) scale(1.090)}
}

/* Sector card artwork — always alive, not only on hover. */
#sectorCards .sectorCard:before,
.uSectorRail .sectorCard:before{
  animation:bsSectorArt 26s var(--bs-motion-ease) infinite!important;
  transform-origin:center center!important;
  will-change:transform,filter;
}
@keyframes bsSectorArt{
  0%,100%{transform:translate3d(0,0,0) scale(1.035)}
  25%{transform:translate3d(-.45%,.15%,0) scale(1.065)}
  50%{transform:translate3d(.55%,.30%,0) scale(1.085)}
  75%{transform:translate3d(.25%,-.30%,0) scale(1.060)}
}

/* LORE hero slider artwork. */
#loreView .loreV117RailCard[data-lore-slide] img{
  animation:bsLoreHero 24s var(--bs-motion-ease) infinite!important;
  transform-origin:center center!important;
  will-change:transform,filter;
}
@keyframes bsLoreHero{
  0%,100%{transform:translate3d(0,0,0) scale(1.025)}
  25%{transform:translate3d(-.40%,.15%,0) scale(1.055)}
  50%{transform:translate3d(.50%,.35%,0) scale(1.090)}
  75%{transform:translate3d(.20%,-.25%,0) scale(1.060)}
}

/* Large LORE card/background art. */
#loreView .loreArtBg{
  animation:bsLoreBgA 32s var(--bs-motion-ease) infinite!important;
  transform-origin:center center!important;
  will-change:transform;
}
#loreView .loreV116StoryGrid>a::before,
#loreView .loreV116GlobalGrid>a::before{
  animation:bsLoreBgB 36s var(--bs-motion-ease) infinite!important;
  transform-origin:center center!important;
  will-change:transform;
}
@keyframes bsLoreBgA{
  0%,100%{transform:translate3d(0,0,0) scale(1.040)}
  25%{transform:translate3d(-.50%,.15%,0) scale(1.065)}
  50%{transform:translate3d(.45%,.35%,0) scale(1.090)}
  75%{transform:translate3d(.25%,-.20%,0) scale(1.060)}
}
@keyframes bsLoreBgB{
  0%,100%{transform:translate3d(0,0,0) scale(1.035)}
  25%{transform:translate3d(.40%,-.20%,0) scale(1.060)}
  50%{transform:translate3d(-.50%,.30%,0) scale(1.085)}
  75%{transform:translate3d(-.15%,-.35%,0) scale(1.060)}
}

/* Timeline: every era image uses a seamless closed Ken Burns loop. */
#timelineView>.tlEraVisual img.era-zoom-a{animation:bsTimelineA 30s var(--bs-motion-ease) infinite!important}
#timelineView>.tlEraVisual img.era-zoom-b{animation:bsTimelineB 36s var(--bs-motion-ease) infinite!important}
@keyframes bsTimelineA{
  0%,100%{transform:translate3d(0,0,0) scale(1.035)}
  25%{transform:translate3d(-.35%,.20%,0) scale(1.070)}
  50%{transform:translate3d(-1.00%,.65%,0) scale(1.105)}
  75%{transform:translate3d(-.40%,.25%,0) scale(1.070)}
}
@keyframes bsTimelineB{
  0%,100%{transform:translate3d(-.35%,.10%,0) scale(1.040)}
  25%{transform:translate3d(.45%,-.20%,0) scale(1.075)}
  50%{transform:translate3d(.95%,-.60%,0) scale(1.105)}
  75%{transform:translate3d(.25%,-.15%,0) scale(1.070)}
}

/* Deep-lore / dossier background zoom. We avoid discrete size changes and use
   a smooth closed background-position path; the existing cover image stays intact. */
.sectorDossierVisual{
  animation:bsDossierDrift 34s var(--bs-motion-ease) infinite!important;
  will-change:background-position!important;
}
@keyframes bsDossierDrift{
  0%,100%{background-position:50% 50%}
  25%{background-position:53% 48%}
  50%{background-position:51% 53%}
  75%{background-position:47% 51%}
}

/* Game/project artwork: continuous smooth movement. */
.card img{animation:bsImageDriftA 30s var(--bs-motion-ease) infinite!important}
.heroCutout img{animation:bsImageDriftB 34s var(--bs-motion-ease) infinite!important}
.sectorThumb{animation:bsBgDriftB 34s var(--bs-motion-ease) infinite!important}

/* Atmospheric visual effects that used to restart at the loop boundary now
   reverse direction smoothly instead of snapping. */
#timelineView .tlEraScan,
#timelineView .tlEraDust,
.timelineCrack,
.timelineEnergy,
.timelineEnergy:after,
.uScanBeam,
.uZeroOrb:before,
.uZeroOrb:after{
  animation-direction:alternate!important;
  animation-timing-function:var(--bs-motion-ease)!important;
}

/* Branding/UI icons are intentionally static; artwork remains animated. */
.globalSiteHeader img,.brand img,.premiumBrand img,.archiveHeader img,#preloader img{animation:none!important;transform:none!important}