/* Viewport-bound edge fades for all five Work categories.
   Kept above the crossfading/sliding wallpapers (z-index:1) and below
   Work content and navigation (z-index:2+). No scroll-based positioning. */
html body #views > .od-work-edge-gradients{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  z-index:1!important;
  overflow:hidden!important;
  pointer-events:none!important;
}
html body #views > .od-work-edge-gradients > div{
  position:absolute!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  pointer-events:none!important;
  opacity:0!important;
  transition:opacity 540ms cubic-bezier(.42,0,.58,1)!important;
}
/* Uniform, subtle black upper fade in every Work category. */
html body #views > .od-work-edge-gradients > .od-work-top-strong{
  top:0!important;
  height:clamp(95px,18%,210px)!important;
  background:linear-gradient(to bottom,rgba(0,0,0,.28) 0%,rgba(0,0,0,.12) 42%,rgba(0,0,0,0) 100%)!important;
}
html body #views > .od-work-edge-gradients > .od-work-top-art{
  top:0!important;
  height:clamp(95px,18%,210px)!important;
  background:linear-gradient(to bottom,rgba(0,0,0,.28) 0%,rgba(0,0,0,.12) 42%,rgba(0,0,0,0) 100%)!important;
}
html body #views > .od-work-edge-gradients > .od-work-top-soft{
  top:0!important;
  height:clamp(95px,18%,210px)!important;
  background:linear-gradient(to bottom,rgba(0,0,0,.28) 0%,rgba(0,0,0,.12) 42%,rgba(0,0,0,0) 100%)!important;
}
/* Projects retains its independently adjustable, softer white lower fade.
   Separate upper layers preserve opacity crossfades between categories. */
html body #views > .od-work-edge-gradients > .od-work-top-projects{
  top:0!important;
  height:clamp(95px,18%,210px)!important;
  background:linear-gradient(to bottom,rgba(0,0,0,.28) 0%,rgba(0,0,0,.12) 42%,rgba(0,0,0,0) 100%)!important;
}
html body #views > .od-work-edge-gradients > .od-work-projects-bottom{
  bottom:0!important;
  height:clamp(85px,18%,220px)!important;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.10) 66%,rgba(255,255,255,.28) 100%)!important;
}
/* The sticky header occluder lives INSIDE the Work panel, above the
   viewport-level gradients. Paint a matching fade on top of its duplicated
   background/mirrored wallpaper, but below sticky menus and foreground UI.
   The occluder's existing clip-path confines these copies to the header. */
html body #views #work > .work-section > .od-work-top-occluder > .od-work-cover-top-fade{
  display:block!important;
  position:absolute!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  z-index:5!important; /* Above mirrored wallpaper (4), tint (1) and background. */
  opacity:0!important;
  pointer-events:none!important;
  transition:opacity 540ms cubic-bezier(.42,0,.58,1)!important;
}
html body #views #work > .work-section > .od-work-top-occluder > .od-work-cover-top-strong{
  height:clamp(95px,18%,210px)!important;
  background:linear-gradient(to bottom,rgba(0,0,0,.28) 0%,rgba(0,0,0,.12) 42%,rgba(0,0,0,0) 100%)!important;
}
html body #views #work > .work-section > .od-work-top-occluder > .od-work-cover-top-art{
  height:clamp(95px,18%,210px)!important;
  background:linear-gradient(to bottom,rgba(0,0,0,.28) 0%,rgba(0,0,0,.12) 42%,rgba(0,0,0,0) 100%)!important;
}
html body #views #work > .work-section > .od-work-top-occluder > .od-work-cover-top-soft{
  height:clamp(95px,18%,210px)!important;
  background:linear-gradient(to bottom,rgba(0,0,0,.28) 0%,rgba(0,0,0,.12) 42%,rgba(0,0,0,0) 100%)!important;
}
/* The clipped sticky header background receives the same black fade
   above its mirrored backdrop, without tinting buttons or titles. */
html body #views #work > .work-section > .od-work-top-occluder > .od-work-cover-top-projects{
  height:clamp(95px,18%,210px)!important;
  background:linear-gradient(to bottom,rgba(0,0,0,.28) 0%,rgba(0,0,0,.12) 42%,rgba(0,0,0,0) 100%)!important;
}
html body #views #work[data-cat="art2d"] > .work-section > .od-work-top-occluder > .od-work-cover-top-art,
html body #views #work[data-cat="animation3d"] > .work-section > .od-work-top-occluder > .od-work-cover-top-soft,
html body #views #work:is([data-cat="animation2d"],[data-cat="storyboard"])
  > .work-section > .od-work-top-occluder > .od-work-cover-top-strong,
html body #views #work[data-cat="projects"]
  > .work-section > .od-work-top-occluder > .od-work-cover-top-projects{
  opacity:1!important;
}

/* Keep the edge treatment anchored to the viewport while the wallpapers
   move vertically; fade between different category intensities. */
html body #views:has(> #work.active:is([data-cat="animation2d"],[data-cat="storyboard"]))
  > .od-work-edge-gradients > .od-work-top-strong,
html body #views:has(> #work.active[data-cat="projects"])
  > .od-work-edge-gradients > .od-work-top-projects,
html body #views:has(> #work.active[data-cat="art2d"])
  > .od-work-edge-gradients > .od-work-top-art,
html body #views:has(> #work.active[data-cat="animation3d"])
  > .od-work-edge-gradients > .od-work-top-soft,
html body #views:has(> #work.active[data-cat="projects"])
  > .od-work-edge-gradients > .od-work-projects-bottom{
  opacity:1!important;
}
@media(prefers-reduced-motion:reduce){
  html body #views > .od-work-edge-gradients > div,
  html body #views #work > .work-section > .od-work-top-occluder > .od-work-cover-top-fade{
    transition:none!important;
  }
}
html.motion-paused body #views > .od-work-edge-gradients > div,
html.motion-paused body #views #work > .work-section > .od-work-top-occluder > .od-work-cover-top-fade{
  transition:none!important;
}