/* v413 — ONE wallpaper treatment for every real background and every copy.
   Adjust these variables only: the main scene, sticky header image, vertical
   transition mirror, and horizontal Projects slides share the same filter.
   The vignette has an identical viewport-sized copy inside the sticky cover.
   None of these rules target Home, project media, or foreground content. */
html body #views{
  --od-work-wallpaper-contrast:.72;
  --od-work-wallpaper-filter:contrast(var(--od-work-wallpaper-contrast));
  --od-work-project-blur:38px;
  --od-work-project-streak-blur:46px;
  --od-work-project-filter:
    blur(var(--od-work-project-blur))
    brightness(1.18)
    contrast(var(--od-work-wallpaper-contrast))
    saturate(.95);
  --od-work-project-streak-filter:
    blur(var(--od-work-project-streak-blur))
    brightness(1.18)
    contrast(var(--od-work-wallpaper-contrast))
    saturate(.95);
  --od-work-animation2d-image:url("assets/animation2d/background/BG%20Animation.png?v=252");
  --od-work-animation3d-image:url("assets/animation3d/background/BG%203D%20ANIMATION.png");
  --od-work-vignette-image:
    radial-gradient(ellipse 84% 77% at 50% 45%,
      rgba(0,0,0,0) 27%,
      rgba(0,0,0,.085) 57%,
      rgba(0,0,0,.20) 80%,
      rgba(0,0,0,.32) 100%);
}
@media(max-width:760px){
  html body #views{
    --od-work-project-blur:28px;
  }
}

/* ART 2D — same source ink and filter for the original image, clipped
   sticky clone, and vertically moving copies (including the JS mirror). */
html body #views > .od-art2d-backdrop > .od-art2d-backdrop-image,
html body #views #work[data-cat="art2d"]
  > .work-section > .od-work-top-occluder > .od-work-top-art-image,
html body #views .od-vertical-art{
  filter:var(--od-work-wallpaper-filter)!important;
}

/* ANIMATION / STORYBOARD — the old top mask filtered its WHOLE container,
   including gradient/tint and transition mirror. Give it a separate image
   child instead, matching the main scene one-to-one. */
html body #views > .od-animation-backdrop > .od-animation-bg-image,
html body #views .od-vertical-animation-art,
html body #views #work > .work-section > .od-work-top-occluder
  > .od-work-cover-animation-image{
  filter:var(--od-work-wallpaper-filter)!important;
}
html body #views > .od-animation-backdrop > .od-animation-bg-2d,
html body #views #work:is([data-cat="animation2d"],[data-cat="storyboard"])
  > .work-section > .od-work-top-occluder > .od-work-cover-animation-image{
  background-image:var(--od-work-animation2d-image)!important;
}
html body #views > .od-animation-backdrop > .od-animation-bg-3d,
html body #views #work[data-cat="animation3d"]
  > .work-section > .od-work-top-occluder > .od-work-cover-animation-image{
  background-image:var(--od-work-animation3d-image)!important;
}
html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"],[data-cat="storyboard"])
  > .work-section > .od-work-top-occluder{
  /* The cover itself is NEVER filtered: only the matched image is. */
  filter:none!important;
  background-image:none!important;
  background-color:#0b1015!important;
}
html body #views #work > .work-section > .od-work-top-occluder
  > .od-work-cover-animation-image{
  display:none!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  width:100%!important;
  height:100%!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  pointer-events:none!important;
}
html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"],[data-cat="storyboard"])
  > .work-section > .od-work-top-occluder > .od-work-cover-animation-image{
  display:block!important;
}

/* PROJECTS — all static and animated images use the identical compound
   filter. No independent brightness/contrast rules for the sticky clone. */
html body #views > .od-projects-backdrop > .od-projects-bg,
html body #views #work[data-cat="projects"]
  > .work-section > .od-work-top-occluder > .od-cover-project-bg,
html body #views .od-vertical-project-art,
html body #views .od-project-horizontal-art{
  filter:var(--od-work-project-filter)!important;
}
html body #views .od-project-horizontal-streak{
  filter:var(--od-work-project-streak-filter)!important;
}

/* VIGNETTE — stays above every Work wallpaper (including both vertical and
   horizontal slide stages), but below the Work panel, controls and media.
   Both copies read ONE gradient and share the same viewport geometry. */
html body #views > .od-work-vignette{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  z-index:1!important;
  pointer-events:none!important;
  background:var(--od-work-vignette-image)!important;
  opacity:0!important;
  transition:opacity 540ms cubic-bezier(.42,0,.58,1)!important;
}
html body #views:has(> #work.active[data-cat]) > .od-work-vignette{
  opacity:1!important;
}
html body #views #work > .work-section > .od-work-top-occluder
  > .od-work-cover-vignette{
  display:none!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  z-index:5!important;
  pointer-events:none!important;
  background:var(--od-work-vignette-image)!important;
  opacity:1!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 > .od-work-cover-vignette{
  display:block!important;
}
@media(prefers-reduced-motion:reduce){
  html body #views > .od-work-vignette{
    transition:none!important;
  }
}
html.motion-paused body #views > .od-work-vignette{
  transition:none!important;
}

/* v421 — Art 2D: the 22px crossfade is UNDER the opaque 34px tab bar,
   not below it. The sticky cover becomes completely transparent 4px BEFORE
   the menu ends, revealing the original viewport wallpaper. No clip-path
   truncates the cover or introduces a separately rasterized 1px edge.
   Only the cover fades: gallery artwork never receives a fade or mask. */
html body #views #work[data-cat="art2d"]
  > .work-section > .od-work-top-occluder{
  display:block!important;
  visibility:visible!important;
  clip-path:none!important;
  -webkit-mask-image:linear-gradient(to bottom,
    #000 0,
    #000 calc(var(--od-cover-bottom,122px) - 26px),
    transparent calc(var(--od-cover-bottom,122px) - 4px))!important;
  mask-image:linear-gradient(to bottom,
    #000 0,
    #000 calc(var(--od-cover-bottom,122px) - 26px),
    transparent calc(var(--od-cover-bottom,122px) - 4px))!important;
  -webkit-mask-size:100% 100%!important;
  mask-size:100% 100%!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
}
html body #views #work[data-cat="art2d"]
  > .work-section > .od-work-top-occluder > .od-work-top-art-image{
  left:0!important;
  top:0!important;
  width:100%!important;
  max-width:none!important;
  will-change:transform;
}
html body #views #work[data-cat="art2d"]
  > .work-section > .od-work-top-occluder > .od-work-cover-vignette{
  left:0!important;
  top:0!important;
  width:100%!important;
  height:100%!important;
}
html body #views #work[data-cat="art2d"] #odArt2dGallery{
  animation:none!important;
  animation-timeline:auto!important;
  clip-path:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
html body #views:has(> #work.active[data-cat="art2d"])
  > .od-art2d-backdrop > .od-art2d-backdrop-image{
  will-change:transform;
}

/* v423 — Art 2D scroll motion is owned by the browser's scroll compositor.
   The same named timeline moves both image layers; the sticky cover's v421
   alpha mask remains unchanged and anchored to its fixed menu coordinates. */
@keyframes odArt2dNativeParallax423{
  from{translate:0 0}
  to{translate:0 calc(-1 * var(--od-art-bg-travel,0px))}
}
@supports (timeline-scope:--od-art-scroll) and
          (animation-timeline:--od-art-scroll) and
          (animation-range:0px 400px){
  html body #views{
    timeline-scope:--od-art-scroll;
  }
  html body #views #work[data-cat="art2d"]{
    scroll-timeline-name:--od-art-scroll;
    scroll-timeline-axis:block;
  }
  html:not(.motion-paused) body #views.od-art2d-motion-ready
    > .od-art2d-backdrop > .od-art2d-backdrop-image,
  html:not(.motion-paused) body #views.od-art2d-motion-ready
    #work.active[data-cat="art2d"] > .work-section
    > .od-work-top-occluder > .od-work-top-art-image{
    animation:odArt2dNativeParallax423 1s linear both!important;
    animation-timeline:--od-art-scroll!important;
    animation-range:0px var(--od-art-bg-range,4000px)!important;
    will-change:translate!important;
  }
}
@media(prefers-reduced-motion:reduce){
  html body #views > .od-art2d-backdrop > .od-art2d-backdrop-image,
  html body #views #work[data-cat="art2d"]
    > .work-section > .od-work-top-occluder > .od-work-top-art-image{
    animation:none!important;
    translate:none!important;
  }
}
html.motion-paused body #views > .od-art2d-backdrop > .od-art2d-backdrop-image,
html.motion-paused body #views #work[data-cat="art2d"]
  > .work-section > .od-work-top-occluder > .od-work-top-art-image{
  animation:none!important;
  translate:none!important;
}

/* The title alone scales; the header ROW itself never changes height,
   avoiding scrollHeight/layout shifts that previously reversed the title
   transition halfway through a wheel gesture. */
html body #views #work[data-cat="art2d"] .work-topline,
html body #views #work[data-cat="art2d"] .work-topline.od-art2d-condensed{
  height:76px!important;
  transition:none!important;
}
html body #views #work[data-cat="art2d"] .od-art2d-sticky-title
  > :is(.od-art-title-en,.od-art-title-es){
  transform:scale(1)!important;
  transform-origin:left center!important;
  transition:transform 220ms cubic-bezier(.2,.8,.2,1)!important;
}
html body #views #work[data-cat="art2d"]
  .work-topline.od-art2d-condensed .od-art2d-sticky-title
  > :is(.od-art-title-en,.od-art-title-es){
  transform:scale(.56)!important;
}
@media(max-width:760px){
  html body #views #work[data-cat="art2d"] .work-topline,
  html body #views #work[data-cat="art2d"] .work-topline.od-art2d-condensed{
    height:67px!important;
  }
  html body #views #work[data-cat="art2d"]
    .work-topline.od-art2d-condensed .od-art2d-sticky-title
    > :is(.od-art-title-en,.od-art-title-es){
    transform:scale(.64)!important;
  }
}
@media(prefers-reduced-motion:reduce){
  html body #views #work[data-cat="art2d"] .od-art2d-sticky-title
    > :is(.od-art-title-en,.od-art-title-es){
    transition:none!important;
  }
}
html.motion-paused body #views #work[data-cat="art2d"]
  .od-art2d-sticky-title > :is(.od-art-title-en,.od-art-title-es){
  transition:none!important;
}