/* v355 — Symmetric ease-in-out on exits and consistent arrivals across all Work sections.
   Menus stay fixed; no full-viewport zooms, camera slams, or layout scaling. */
html:not(.motion-paused) body #views #work.active > .work-section
  :is(.od-animation-reels,#odArt2dGallery,.od-storyboard-showcase,.od-projects-showcase){
  transition:opacity 215ms cubic-bezier(.42,0,.58,1),
             translate 215ms cubic-bezier(.42,0,.58,1)!important;
}
html:not(.motion-paused) body #views #work.active.od-work-switching-out > .work-section
  :is(.od-animation-reels,#odArt2dGallery,.od-storyboard-showcase,.od-projects-showcase){
  animation:none!important;
  opacity:0!important;
  translate:0 -10px!important;
}
html:not(.motion-paused) body #views #work.active .od-art2d-sticky-title{
  transition:opacity 215ms cubic-bezier(.42,0,.58,1),translate 215ms cubic-bezier(.42,0,.58,1)!important;
}
html:not(.motion-paused) body #views #work.active.od-work-switching-out .od-art2d-sticky-title{
  opacity:0!important;
  translate:0 -6px!important;
}

/* Work entrance replaces the 640ms wait with a short, subdued overlap.
   Projects gets the same entrance as Animation, Storyboard and Digital Art. */
@keyframes odWorkContentArrive342{
  from{opacity:0;translate:0 10px}
  to{opacity:1;translate:0 0}
}
html:not(.motion-paused) body #views.od-section-arriving #work.active
  :is(.od-animation-reels,#odArt2dGallery,.od-storyboard-showcase,.od-projects-showcase),
html:not(.motion-paused) body #views.od-section-arriving #work.active[data-cat="storyboard"]
  .od-storyboard-showcase{
  animation:odWorkContentArrive342 440ms cubic-bezier(.42,0,.58,1) 105ms both!important;
}

/* Browser history can bypass the click controller. Keep its existing
   visibility handling, but replace the legacy 7% lateral jump/blur. */
@keyframes odHistoryPanelArrive343{
  from{opacity:0}
  to{opacity:1}
}
html:not(.motion-paused) body #views > .view-panel:is(.enter-next,.enter-prev){
  animation:odHistoryPanelArrive343 360ms cubic-bezier(.42,0,.58,1) both!important;
}

/* Project subpages: dim the old backdrop while its content exits, then
   reveal the next without displaying two project wallpapers together. */
html body #views > .od-projects-backdrop::after,
html body #views #work[data-cat="projects"] > .work-section > .od-work-top-occluder::after{
  transition:background-color 200ms cubic-bezier(.42,0,.58,1)!important;
}
html body #views:has(> #work.active[data-cat="projects"].od-projects-changing)
  > .od-projects-backdrop::after,
html body #views #work.active[data-cat="projects"].od-projects-changing
  > .work-section > .od-work-top-occluder::after{
  background-color:rgba(4,7,12,.94)!important;
}

/* A route or project selection with FX OFF must never leave stale opacity. */
html.motion-paused body #views #work.active > .work-section
  :is(.od-animation-reels,#odArt2dGallery,.od-storyboard-showcase,.od-projects-showcase),
html.motion-paused body #views > .od-projects-backdrop::after{
  transition:none!important;
}
@media(prefers-reduced-motion:reduce){
  html body #views #work.active.od-work-switching-out > .work-section
    :is(.od-animation-reels,#odArt2dGallery,.od-storyboard-showcase,.od-projects-showcase){
    opacity:1!important;translate:none!important;animation:none!important;
  }
  html body #views.od-section-arriving #work.active
    :is(.od-animation-reels,#odArt2dGallery,.od-storyboard-showcase,.od-projects-showcase){
    animation:none!important;opacity:1!important;translate:none!important;
  }
  html body #views > .od-projects-backdrop::after,
  html body #views #work[data-cat="projects"] > .work-section > .od-work-top-occluder::after{
    transition:none!important;
  }
}

/* v382 — Foreground content only: subtle upward exit and upward arrival.
   Fixed disciplines, work subnavigation, back link, and sticky mask are
   deliberately excluded. No section-wide opacity or transform changes. */
html:not(.motion-paused) body #views #work.active > .work-section
  :is(.od-animation-reels,#odArt2dGallery,.od-storyboard-showcase,.od-projects-showcase,.od-art2d-sticky-title){
  transition:opacity 260ms cubic-bezier(.42,0,.58,1),
             translate 260ms cubic-bezier(.42,0,.58,1)!important;
}
html:not(.motion-paused) body #views #work.active.od-work-content-exiting > .work-section
  :is(.od-animation-reels,#odArt2dGallery,.od-storyboard-showcase,.od-projects-showcase,.od-art2d-sticky-title){
  opacity:0!important;
  translate:0 -12px!important;
  animation:none!important;
}
html:not(.motion-paused) body #views #work.active.od-work-content-enter-prep > .work-section
  :is(.od-animation-reels,#odArt2dGallery,.od-storyboard-showcase,.od-projects-showcase,.od-art2d-sticky-title){
  opacity:0!important;translate:0 12px!important;
  animation:none!important;transition:none!important;
}
html:not(.motion-paused) body #views #work.active.od-work-content-entering > .work-section
  :is(.od-animation-reels,#odArt2dGallery,.od-storyboard-showcase,.od-projects-showcase,.od-art2d-sticky-title){
  opacity:1!important;translate:0 0!important;
  animation:none!important;
  transition:opacity 330ms cubic-bezier(.22,.8,.22,1),
             translate 330ms cubic-bezier(.22,.8,.22,1)!important;
}
@media(prefers-reduced-motion:reduce){
  html body #views #work.active:is(.od-work-content-exiting,.od-work-content-enter-prep,.od-work-content-entering) > .work-section
    :is(.od-animation-reels,#odArt2dGallery,.od-storyboard-showcase,.od-projects-showcase,.od-art2d-sticky-title){
    opacity:1!important;translate:none!important;transition:none!important;
  }
}