/* Small semantic marker for work cards that open a full case study. */
.bitard-card[data-project]::after{
  content:attr(data-label);
  position:absolute;
  z-index:6;
  top:0;
  right:0;
  width:auto;
  min-width:46px;
  max-width:calc(100% - 12px);
  height:24px;
  display:grid;
  place-items:center;
  box-sizing:border-box;
  padding:0 8px;
  border:0!important;
  background:var(--paper);
  box-shadow:none!important;
  color:rgba(20,20,20,.70);
  font-size:8px;
  font-weight:400;
  line-height:1;
  letter-spacing:.11em;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;
  transition:opacity .2s ease;
}

/* A case-study card quietly reveals a few images from inside the project on hover.
   Preview assets are requested only after the hover has settled. */
.bitard-case-preview{
  position:absolute;
  z-index:1;
  inset:0;
  overflow:hidden;
  background:var(--paper);
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease;
}
.bitard-case-preview.is-visible{opacity:1}
.bitard-case-preview img{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  opacity:0!important;
  transform:none!important;
  transition:opacity .42s ease!important;
}
.bitard-case-preview img.is-active{opacity:1!important}
.bitard-card[data-project] .bitard-card__shade{z-index:2}
.bitard-card[data-project] .bitard-card__label{z-index:3}
body.bitard-pjax-opening .bitard-case-preview{opacity:0!important}

/* During shared-element expansion the work canvas becomes warm paper. */
body.bitard-pjax-opening .bitard-shell:not(.bitard-project-page) .bitard-content{
  background:var(--paper);
}
body.bitard-pjax-opening .bitard-shell:not(.bitard-project-page) .bitard-showreel,
body.bitard-pjax-opening .bitard-shell:not(.bitard-project-page) .bitard-gallery{
  opacity:0!important;
  transition:opacity .18s ease!important;
}
body.bitard-pjax-opening .bitard-shell:not(.bitard-project-page) .bitard-showreel,
body.bitard-pjax-opening .bitard-shell:not(.bitard-project-page) .bitard-card{
  background:var(--paper)!important;
}

/* Seamless CASE mode: the homepage/grid never leaves the document and its
   window scroll never changes. A case study is a self-scrolling fixed layer
   underneath the permanent logo/rail. BACK simply removes this layer. */
html{scrollbar-gutter:stable}
body.bitard-pjax-project-open{overflow:hidden}
.bitard-project-page.bitard-pjax-project.bitard-pjax-overlay{
  position:fixed;
  z-index:70;
  inset:0;
  display:block;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--paper);
  scrollbar-gutter:stable;
  -webkit-overflow-scrolling:touch;
}
.bitard-pjax-overlay .bitard-nav-shell{display:none!important}
.bitard-pjax-overlay .bitard-project-main{min-height:100%}

/* On desktop the CASE owns its own persistent scrollbar. Keep the full paper
   treatment behind BACK, but stop the clickable/background box at the inner
   edge of that scrollbar instead of painting over the scrollbar track. The
   text keeps the exact same visual inset as the full-width treatment. */
@media (min-width:621px) and (hover:hover) and (pointer:fine){
  .bitard-pjax-overlay .bitard-project-back{
    right:15px;
    padding-right:calc(var(--edge) + 9px - 15px);
  }
}

@media (max-width:820px){
  /* The permanent mobile navigation stays above the PJAX CASE. Reserve the same
     shared chrome offset here so both image and video heroes begin below it. */
  .bitard-project-page.bitard-pjax-project.bitard-pjax-overlay{
    padding-top:var(--bitard-mobile-nav-offset);
  }

  /* BACK lives inside the lower-z-index CASE overlay, so at viewport top it can
     never out-stack the permanent navigation. Keep it below that navigation
     instead of letting the utility rail intercept touch/click events. */
  .bitard-pjax-overlay .bitard-project-back{
    top:calc(var(--bitard-mobile-nav-offset) + 12px);
  }
}

@media (max-width:620px){
  .bitard-card[data-project]::after{
    min-width:42px;
    height:22px;
    padding-inline:7px;
    font-size:7px;
    letter-spacing:.1em;
  }
}

@media (prefers-reduced-motion:reduce){
  .bitard-case-preview img{transition:none!important}
}