/* Animation 2D / 3D — responsive, proportional, full-bleed backgrounds.
   No visual editor settings, JS positioning, or readiness flags required. */
html body #views > .od-animation-backdrop {
  display:none !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  z-index:1 !important;
  overflow:hidden !important;
  pointer-events:none !important;
  background:#fff !important;
  isolation:isolate !important;
}
html body #views:has(> #work.active[data-cat="animation2d"]) > .od-animation-backdrop,
html body #views:has(> #work.active[data-cat="animation3d"]) > .od-animation-backdrop {
  display:block !important;
  visibility:visible !important;
}
html body #views > .od-animation-backdrop > .od-animation-bg-image {
  position:absolute !important;
  inset:0 !important;
  display:none !important;
  z-index:0 !important;
  width:100% !important;
  height:100% !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-position:center center !important;
  pointer-events:none !important;
}
html body #views:has(> #work.active[data-cat="animation2d"])
  > .od-animation-backdrop > .od-animation-bg-2d {
  display:block !important;
  background-image:url("assets/animation2d/background/BG%20Animation.png?v=252") !important;
}
html body #views:has(> #work.active[data-cat="animation3d"])
  > .od-animation-backdrop > .od-animation-bg-3d {
  display:block !important;
  background-image:url("assets/animation3d/background/BG%203D%20ANIMATION.png") !important;
}
/* Bottom transition keeps readable foreground areas without changing
   the image's size or aspect ratio. */
html body #views > .od-animation-backdrop > .od-animation-bottom-fade {
  position:absolute !important;
  z-index:1 !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  height:clamp(110px,23%,300px) !important;
  opacity:1 !important;
  pointer-events:none !important;
  background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.52) 66%,#fff) !important;
}
html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]).view-panel {
  z-index:2 !important;
  isolation:auto !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
}
html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) > .work-section {
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
}
html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) .od-animation-ambient {
  display:none !important;
}

/* 3D only: faint, short white fade that retains background detail. */
html body #views:has(> #work.active[data-cat="animation3d"])
  > .od-animation-backdrop > .od-animation-bottom-fade {
  height:clamp(65px,12%,150px) !important;
  opacity:1 !important;
  background:linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.07) 55%,
    rgba(255,255,255,.22) 100%) !important;
}

/* Keep the background exposed in the header strip; only actual controls
   remain opaque. The reel itself fades out when sliding behind the tabs. */
html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) .work-topline,
html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) > .work-section > .od-work-common-bar {
  background:transparent !important;
  background-color:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) .od-animation-reels.od-animation-top-masked {
  -webkit-mask-image:linear-gradient(to bottom,
    transparent 0,
    transparent var(--od-animation-mask-start,0px),
    #000 var(--od-animation-mask-end,14px)) !important;
  mask-image:linear-gradient(to bottom,
    transparent 0,
    transparent var(--od-animation-mask-start,0px),
    #000 var(--od-animation-mask-end,14px)) !important;
}

/* Animation 3D has no subcategories yet. Keep the shared full-width
   navigation strip as a blank visual element, matching Art 2D and
   Animation 2D. The 3D menu still uses the existing sticky position,
   width (95% desktop / 100% mobile), height and scroll behavior. */
html body #views #work[data-cat="animation3d"] > .work-section > .od-work-common-bar {
  background:#09090c!important;
  background-color:#09090c!important;
}
html body #views #work[data-cat="animation3d"] > .work-section > .od-work-common-bar > .od-work-bar-tab {
  display:none!important;
}