/* ONLYDROP v273 — Static, sticky top occlusion.
   Keep #work as the sole scroll container, and keep the existing reel
   positioning and sticky navigation untouched. The media themselves have
   NO masks or scroll-linked animations. A background copy covers only the
   area above the menu bottom, making the cut independent of scroll events.
*/
html body #views #work:is([data-cat="art2d"],[data-cat="animation2d"],[data-cat="animation3d"],[data-cat="storyboard"],[data-cat="projects"]){
  --od-cover-bottom:calc(clamp(72px,5.2vw,88px) + 34px);
}
@media(max-width:760px){
  html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"],[data-cat="storyboard"],[data-cat="projects"]){
    --od-cover-bottom:calc(186px + env(safe-area-inset-top,0px) + 43px);
  }
  html body #views #work[data-cat="art2d"]{
    --od-cover-bottom:calc(186px + env(safe-area-inset-top,0px) + 34px);
  }
}
@media(max-width:760px) and (max-height:520px){
  html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"],[data-cat="storyboard"],[data-cat="projects"]){
    --od-cover-bottom:calc(149px + env(safe-area-inset-top,0px) + 43px);
  }
  html body #views #work[data-cat="art2d"]{
    --od-cover-bottom:calc(149px + env(safe-area-inset-top,0px) + 34px);
  }
}
html body #views #work > .work-section > .od-work-top-occluder{
  display:none!important;
}
html body #views #work:is([data-cat="art2d"],[data-cat="animation2d"],[data-cat="animation3d"],[data-cat="storyboard"],[data-cat="projects"]) > .work-section > .od-work-top-occluder{
  display:block!important;
  position:sticky!important;
  top:0!important;
  left:auto!important;
  right:auto!important;
  z-index:93!important; /* Above media; below the header (95) and tabs (94). */
  box-sizing:border-box!important;
  width:100vw!important;
  min-width:100vw!important;
  max-width:none!important;
  height:100dvh!important;
  min-height:0!important;
  max-height:none!important;
  /* Start at the #work viewport's true y=0, not at the content padding.
     The positive bottom compensation restores the original flow position. */
  margin:calc(-1 * var(--od-cover-top,clamp(86px,10vh,116px)))
         0
         calc(-100dvh + var(--od-cover-top,clamp(86px,10vh,116px)))
         var(--od-cover-left,0px)!important;
  padding:0!important;
  border:0!important;
  overflow:hidden!important;
  clip-path:inset(0 0 calc(100% - var(--od-cover-bottom,122px)) 0)!important;
  pointer-events:none!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center center!important;
  box-shadow:none!important;
  transform:none!important;
  animation:none!important;
}
html body #views #work[data-cat="art2d"] > .work-section > .od-work-top-occluder{
  background:#fff!important;
}
html body #views #work[data-cat="animation2d"] > .work-section > .od-work-top-occluder{
  background-image:url("assets/animation2d/background/BG%20Animation.png?v=252")!important;
}
html body #views #work[data-cat="animation3d"] > .work-section > .od-work-top-occluder{
  background-image:url("assets/animation3d/background/BG%203D%20ANIMATION.png")!important;
}
/* Identical sizing and motion to the genuine Art 2D backdrop image. */
html body #views #work .od-work-top-occluder > .od-work-top-art-image{
  display:none!important;
}
html body #views #work[data-cat="art2d"] > .work-section > .od-work-top-occluder > .od-work-top-art-image{
  display:block!important;
  position:absolute!important;
  inset:0 auto auto 0!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  object-fit:contain!important;
  object-position:top center!important;
  transform:translate3d(0,var(--od-art-bg-translate,0px),0)!important;
  transform-origin:top center!important;
  pointer-events:none!important;
}
/* Eliminate all late-running legacy and view-timeline media masks.
   This override does not touch element dimensions, margins, or alignment. */
html body #views #work[data-cat="art2d"] .od-art2d-mosaic,
html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) .od-animation-reels{
  -webkit-mask-image:none!important;
  mask-image:none!important;
}


/* Work submenus must only expose their own controls. Animation 3D has one
   active entry until additional subsections are introduced. */
html body #views #work[data-cat="animation3d"]
  > .work-section > .od-work-common-bar > button.od-work-bar-tab[data-category-view="animation3d"]{
  display:inline-flex!important;
  visibility:visible!important;
}
html body #views #work[data-cat="animation3d"]
  > .work-section > .od-work-common-bar > button.od-work-bar-tab:not([data-category-view="animation3d"]){
  display:none!important;
}

/* Storyboard: the same 2D background and barely tinted veil visible behind
   its contents. Covers the *same top region* as Art 2D when scrolling. */
html body #views #work[data-cat="storyboard"] > .work-section > .od-work-top-occluder {
  background-color:#fff!important;
  background-image:url("assets/animation2d/background/BG%20Animation.png?v=252")!important;
}
html body #views #work[data-cat="storyboard"] > .work-section > .od-work-top-occluder::after{
  content:"";
  display:block;
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:rgba(5,8,14,.055);
}
/* The storyboard header background copy stays aligned and visible during fades. */

/* Projects: the cover duplicates each project's blurred wallpaper at the
   same dimensions, brightness, and position, so artwork disappears cleanly
   beneath the sticky header instead of leaking into it. */
html body #views #work[data-cat="projects"] > .work-section > .od-work-top-occluder {
  background:#090a0f!important;
  background-image:none!important;
}
html body #views #work > .work-section > .od-work-top-occluder > .od-cover-project-bg{
  display:none!important;
}
html body #views #work[data-cat="projects"] > .work-section > .od-work-top-occluder > .od-cover-project-bg{
  position:absolute!important;
  inset:-8%!important;
  width:116%!important;
  height:116%!important;
  z-index:0!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  filter:blur(38px) brightness(.95) saturate(.85)!important;
  transform:scale(1.06)!important;
  pointer-events:none!important;
}
html body #views #work[data-cat="projects"] > .work-section > .od-work-top-occluder > .od-cover-project-groove{
  background-image:url("assets/previews/Groove%20Way%20Laureles.png")!important;
}
html body #views #work[data-cat="projects"] > .work-section > .od-work-top-occluder > .od-cover-project-devotus{
  background-image:url("assets/previews/Devotus%20Anima%20Laureles.png")!important;
}
html body #views #work[data-cat="projects"] > .work-section > .od-work-top-occluder > .od-cover-project-personal{
  background-image:url("assets/previews/experimento.png")!important;
}
html body #views #work[data-cat="projects"][data-projects-mode="groove"]
  > .work-section > .od-work-top-occluder > .od-cover-project-groove,
html body #views #work[data-cat="projects"][data-projects-mode="devotus"]
  > .work-section > .od-work-top-occluder > .od-cover-project-devotus,
html body #views #work[data-cat="projects"][data-projects-mode="personal"]
  > .work-section > .od-work-top-occluder > .od-cover-project-personal{
  display:block!important;
}
html body #views #work[data-cat="projects"] > .work-section > .od-work-top-occluder::after{
  content:"";
  display:block;
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:rgba(4,7,12,.43);
}
@media(max-width:760px){
  html body #views #work[data-cat="projects"] > .work-section > .od-work-common-bar .od-projects-mode{
    min-height:43px!important;
  }
  html body #views #work[data-cat="projects"] > .work-section > .od-work-top-occluder > .od-cover-project-bg{
    filter:blur(28px) brightness(.95) saturate(.85)!important;
  }
}