/* BITARD project case studies + cinematic project transitions. */

.bitard-project-page .bitard-logo__project{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:100%!important;
}

.bitard-card__link{
  display:block;
  width:100%;
  height:100%;
  color:inherit;
  text-decoration:none;
}

/* Project cards use the custom FLIP flight only. */
.bitard-card[data-project]:hover img{transform:none}
body.bitard-project-flight .transition-source::after{opacity:0}

/* Keep long inventory filenames secondary to the grid itself. */
.bitard-context__title{
  max-width:220px;
  font-size:10px;
  line-height:1.35;
  letter-spacing:.02em;
  text-transform:lowercase;
  overflow-wrap:anywhere;
}

/* Project-page navigation: preserve the same hierarchy as WORK. */
.bitard-project-page .bitard-work-title,
.bitard-project-page .bitard-filter{
  text-decoration:none;
}
.bitard-project-page .bitard-work-title{
  display:block;
  width:max-content;
  max-width:100%;
  font-weight:400;
}
.bitard-project-page .bitard-work-title.is-parent-active::after{width:100%}
.bitard-project-page .bitard-filter.is-active{font-weight:inherit}
.bitard-project-page .bitard-filter.is-active::after{transform:scaleX(1)}

/* Deterministic FLIP-style project flight, based on the interaction prototype. */
.bitard-flight-layer{
  position:fixed;
  inset:0;
  z-index:1000;
  pointer-events:none;
}
.bitard-flight-image{
  position:fixed;
  z-index:2;
  display:block;
  margin:0;
  max-width:none;
  object-fit:cover;
  object-position:center center;
  transform-origin:top left;
  will-change:left,top,width,height;
  box-shadow:0 0 0 1px rgba(0,0,0,.025);
}
.bitard-flight-curtain{
  position:fixed;
  z-index:1;
  background:var(--paper);
  opacity:0;
  will-change:opacity;
}
body.bitard-project-flight .bitard-card:not(.transition-source){
  opacity:.08!important;
  transition:opacity .3s ease!important;
}
body.bitard-project-flight .bitard-showreel{
  opacity:.08!important;
  transition:opacity .3s ease!important;
}
body.bitard-project-flight .transition-source img{opacity:0!important}
body.bitard-project-arriving .bitard-project-intro,
body.bitard-project-arriving .bitard-case-study,
body.bitard-project-arriving .bitard-project-end{
  opacity:0;
  transform:translateY(10px);
}
.bitard-project-intro,
.bitard-case-study,
.bitard-project-end{
  transition:opacity .42s ease,transform .5s cubic-bezier(.22,.75,.18,1);
}

.bitard-project-main{
  --project-left:calc(var(--edge) + var(--logo-col) + var(--logo-nav-gap) + var(--nav-col) + var(--air));
  margin-left:var(--project-left);
  width:calc(100% - var(--project-left));
  padding:0 0 72px;
}

/* The hero owns a background copy of the same image. The real img stays
   transparent until decoded so heavy media cannot create an empty hero frame. */
.bitard-project-hero{
  position:relative;
  width:100%;
  height:76vh;
  min-height:520px;
  max-height:820px;
  overflow:hidden;
  background-color:var(--paper);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
}
.bitard-project-hero__image{
  display:block;
  width:100%;
  max-width:none;
  height:100%;
  object-fit:cover;
  object-position:center center;
  opacity:0;
  transition:opacity .16s linear;
}
.bitard-project-hero.is-hero-ready .bitard-project-hero__image{opacity:1}
.bitard-project-hero.is-returning{background-image:none!important}

/* A curated hero triptych keeps the same hero box and transition target while
   presenting three independent responsive WordPress images side by side. */
.bitard-project-hero--triptych{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gutter);
  background-image:none!important;
}
.bitard-project-hero--triptych .bitard-project-hero__image{min-width:0}

/* BACK belongs to the project chrome rather than the hero image. Its paper
   background runs flush to the right viewport edge while the label keeps the
   same inset position as before. */
.bitard-project-back{
  position:fixed;
  z-index:260;
  top:var(--edge);
  right:0;
  display:block;
  padding:7px calc(var(--edge) + 9px) 6px 9px;
  color:var(--ink);
  background:var(--paper);
  border:0;
  text-decoration:none;
  font-size:10px;
  line-height:1;
  letter-spacing:.04em;
  mix-blend-mode:normal;
  box-shadow:none;
}
.bitard-project-back::before{content:"← ";}

.bitard-project-intro{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  padding:42px 34px 64px 0;
}
.bitard-project-kicker{
  margin:0 0 13px;
  color:var(--muted);
  font-size:9px;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.bitard-project-title{
  margin:0;
  max-width:500px;
  font-size:clamp(30px,2.7vw,42px);
  line-height:1;
  font-weight:400;
  letter-spacing:-.025em;
  text-transform:uppercase;
}
.bitard-project-subtitle{
  margin-top:15px;
  max-width:400px;
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.035em;
}
.bitard-project-description{
  max-width:520px;
  margin:0 0 34px;
  font-size:13px;
  line-height:1.56;
}
.bitard-project-description p{margin:0}
.bitard-project-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(120px,1fr));
  gap:18px 28px;
  max-width:520px;
  padding-top:15px;
  border-top:1px solid rgba(20,20,20,.16);
}
.bitard-project-meta__item span{
  display:block;
  margin-bottom:4px;
  color:var(--muted);
  font-size:8px;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.bitard-project-meta__item strong{
  display:block;
  font-size:10px;
  line-height:1.4;
  font-weight:400;
}

.bitard-case-study{
  display:flex;
  flex-direction:column;
  gap:var(--gutter);
  padding-right:var(--content-right);
}
.bitard-case-study__image,
.bitard-case-study__duo,
.bitard-case-study__triptych{width:100%}
.bitard-case-study__image{margin:0}
.bitard-case-study__image img,
.bitard-case-study__duo img,
.bitard-case-study__triptych img{
  display:block;
  width:100%;
  max-width:none;
  height:auto;
  object-fit:contain;
}
.bitard-case-study__duo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gutter);
  align-items:start;
}
/* Four authored images reuse the stable duo schema as a compact four-column row.
   Image geometry remains untouched: no crop or forced equal-height behavior. */
.bitard-case-study__duo:has(> figure:nth-child(4):last-child){
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.bitard-case-study__duo figure,
.bitard-case-study__triptych figure{
  margin:0;
  overflow:hidden;
  background:#e8e8e4;
}
.bitard-case-study__triptych{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gutter);
  align-items:start;
}
.bitard-case-study__text,
.bitard-case-study__chapter{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  padding:60px 34px 68px 0;
}
.bitard-case-study__chapter{
  margin-top:38px;
  padding-top:52px;
  border-top:1px solid rgba(20,20,20,.16);
}
.bitard-case-study__eyebrow{
  color:var(--muted);
  font-size:9px;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.bitard-case-study__copy h2{
  margin:0 0 20px;
  max-width:610px;
  font-size:clamp(27px,3vw,44px);
  line-height:1.03;
  font-weight:400;
  letter-spacing:-.025em;
}
.bitard-case-study__copy p{
  margin:0;
  max-width:560px;
  font-size:13px;
  line-height:1.58;
}
.bitard-project-end{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  padding:62px 34px 12px 0;
  font-size:9px;
  text-transform:uppercase;
}
.bitard-project-end a{color:inherit;text-decoration:none}
.bitard-project-end a:hover{text-decoration:underline;text-underline-offset:4px}

@media (max-width:1280px){
  .bitard-project-hero{height:74vh;min-height:480px;max-height:740px}
  .bitard-project-intro{gap:44px;padding-top:38px;padding-bottom:56px}
  .bitard-case-study__text,.bitard-case-study__chapter{gap:44px;padding-top:52px;padding-bottom:60px}
}

@media (max-width:1040px){
  .bitard-project-hero{height:70vh;min-height:440px;max-height:670px}
  .bitard-project-title{font-size:clamp(28px,3.2vw,38px)}
}

@media (max-width:820px){
  .bitard-project-main{
    margin-left:var(--edge);
    width:calc(100% - var(--edge));
  }
  .bitard-project-hero{
    height:min(68vh,620px);
    min-height:420px;
  }
  .bitard-project-intro{
    grid-template-columns:1fr;
    gap:28px;
    padding:38px var(--edge) 54px 0;
  }
  .bitard-case-study__duo:has(> figure:nth-child(4):last-child){
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .bitard-case-study__text,
  .bitard-case-study__chapter{
    grid-template-columns:1fr;
    gap:16px;
    padding:46px var(--edge) 54px 0;
  }
}

@media (max-width:620px){
  .bitard-project-main{
    margin-left:var(--edge);
    width:calc(100% - var(--edge));
    padding-bottom:42px;
  }
  .bitard-project-hero{
    height:76vw;
    min-height:290px;
    max-height:470px;
  }
  .bitard-project-back{
    top:12px;
    right:0;
    padding:7px 20px 6px 8px;
    font-size:9px;
  }
  .bitard-project-intro{padding:32px var(--edge) 46px 0}
  .bitard-project-title{font-size:clamp(30px,9.5vw,42px)}
  .bitard-project-description{margin-bottom:28px;font-size:13px}
  .bitard-project-meta{grid-template-columns:1fr 1fr;gap:17px 16px}
  .bitard-case-study{padding-right:var(--edge)}
  .bitard-case-study__duo,
  .bitard-case-study__triptych{grid-template-columns:1fr}
  .bitard-case-study__duo:has(> figure:nth-child(4):last-child){
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .bitard-case-study__text,
  .bitard-case-study__chapter{padding:40px 0 46px}
  .bitard-case-study__chapter{margin-top:28px}
  .bitard-case-study__copy h2{font-size:30px;margin-bottom:18px}
  .bitard-case-study__copy p{font-size:13px}
  .bitard-project-end{padding:48px 0 8px}
}

@media (prefers-reduced-motion:reduce){
  .bitard-flight-layer{display:none!important}
  .bitard-project-hero__image{transition:none}
}