/* Work section DriftWall adaptation, keeps uneven masonry tile sizes */
.work-drift{
  --wd-gap:var(--work-gap,22px);
  --wd-radius:var(--work-radius,40px);
  --wd-perspective:1600px;
  --wd-lift:28px;
  --wd-dim:0.7;
  --wd-overlay:#060010;
  position:relative;
  width:100%;
  height:min(86vh,900px);
  min-height:600px;
  margin-top:var(--work-gap,22px);
  overflow:visible;
  perspective:var(--wd-perspective);
  perspective-origin:46% 48%;
}

.work-drift__plane{
  position:absolute;
  top:50%;
  left:46%;
  width:102%;
  max-width:1180px;
  display:flex;
  flex-direction:row;
  gap:var(--wd-gap);
  align-items:center;
  transform-style:flat;
  transform:translate(-50%, -50%);
  transform-origin:40% 50%;
  cursor:pointer;
  padding:12px clamp(12px,2vw,28px) 12px 0;
  box-sizing:border-box;
  z-index:2;
}

.work-drift__col{
  position:relative;
  flex:1 1 0;
  min-width:0;
}
.work-drift__col--wide{
  flex:1.35 1 0;
}

.work-drift__track{
  display:flex;
  flex-direction:column;
  gap:var(--wd-gap);
}

.work-drift__tile{
  position:relative;
  display:block;
  flex:0 0 auto;
  outline:none;
  width:100%;
  z-index:1;
}
.work-drift__tile:hover,
.work-drift__tile:focus-within{
  z-index:5;
}
.work-drift__tile--lg{height:auto;}
.work-drift__tile--lg .work-drift__inner{height:clamp(440px,62vh,680px);}
.work-drift__tile--md .work-drift__inner{height:clamp(220px,28vh,300px);}
.work-drift__tile--sm .work-drift__inner{height:clamp(180px,24vh,260px);}
.work-drift__tile--mt .work-drift__inner{height:clamp(240px,30vh,320px);}
.work-drift__tile--script .work-drift__inner{height:clamp(200px,26vh,280px);}

.work-drift__inner{
  position:relative;
  display:block;
  width:100%;
  border-radius:var(--wd-radius);
  overflow:hidden;
  background:#0b0b12;
  opacity:var(--wd-dim);
  transform:translate3d(0,0,0);
  transition:
    transform 0.35s cubic-bezier(0.22,1,0.36,1),
    opacity 0.35s cubic-bezier(0.22,1,0.36,1),
    box-shadow 0.35s cubic-bezier(0.22,1,0.36,1);
}

/* Cendre stays fully opaque and uncropped */
.work-drift__tile--lg .work-drift__inner{
  opacity:1;
}
.work-drift__tile--lg .work-drift__overlay{
  opacity:0;
}
.work-drift__tile--lg .pcard video{
  transform:none!important;
}
.work-drift__tile--lg:hover .pcard video{
  transform:scale(1.03)!important;
}

.work-drift__inner .pcard{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:inherit!important;
  opacity:1!important;
  transform:none!important;
  transition:box-shadow .55s,filter .4s!important;
  z-index:2;
  display:block;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}
.work-drift__inner .pcard .glow,
.work-drift__inner .pcard .sheen,
.work-drift__inner .pcard video,
.work-drift__inner .pcard img{
  pointer-events:none;
}
.work-drift__inner .pcard:hover{
  transform:none!important;
  filter:none;
}
.work-drift #work .pcard:hover,
.work-drift .pcard:hover{
  transform:none!important;
}

.work-drift__overlay{
  position:absolute;
  inset:0;
  background:var(--wd-overlay);
  opacity:0.42;
  pointer-events:none;
  z-index:5;
  transition:opacity 0.42s cubic-bezier(0.22,1,0.36,1);
  border-radius:inherit;
}

.work-drift__caption{
  position:absolute;
  right:14px;
  bottom:14px;
  left:14px;
  z-index:6;
  max-width:none;
  text-align:right;
  pointer-events:none;
  opacity:0;
  transform:translate3d(0,8px,0);
  transition:
    opacity 0.35s cubic-bezier(0.22,1,0.36,1),
    transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.work-drift__caption h3{
  margin:0 0 5px;
  font-family:'Collingar','KAGE','Flaviotte','Playfair Display',serif;
  font-weight:400;
  font-size:clamp(15px,1.25vw,19px);
  color:#fff;
  line-height:1.15;
  text-shadow:0 2px 18px rgba(0,0,0,0.7);
}
.work-drift__caption .cat{
  display:block;
  font-family:'Inter',sans-serif;
  font-size:clamp(9px,0.85vw,11px);
  letter-spacing:0.04em;
  text-transform:none;
  color:rgba(245,237,223,0.86);
  line-height:1.45;
  text-shadow:0 1px 12px rgba(0,0,0,0.65);
  overflow-wrap:anywhere;
  word-break:break-word;
}

.work-drift__tile:hover .work-drift__inner,
.work-drift__tile:focus-visible .work-drift__inner,
.work-drift__tile.is-active .work-drift__inner{
  opacity:1;
  transform:translate3d(0,-6px,0) scale(1.015);
  box-shadow:0 18px 40px -16px rgba(0,0,0,0.65);
}
.work-drift__tile--lg:hover .work-drift__inner,
.work-drift__tile--lg:focus-visible .work-drift__inner,
.work-drift__tile--lg.is-active .work-drift__inner{
  opacity:1;
}
.work-drift__tile:hover .work-drift__overlay,
.work-drift__tile:focus-visible .work-drift__overlay,
.work-drift__tile.is-active .work-drift__overlay{
  opacity:0.1;
}
.work-drift__tile--lg:hover .work-drift__overlay,
.work-drift__tile--lg:focus-visible .work-drift__overlay,
.work-drift__tile--lg.is-active .work-drift__overlay{
  opacity:0;
}
.work-drift__tile:hover .work-drift__caption,
.work-drift__tile:focus-visible .work-drift__caption,
.work-drift__tile.is-active .work-drift__caption{
  opacity:1;
  transform:translate3d(0,0,0);
}
.work-drift__tile:focus-visible .work-drift__inner{
  box-shadow:
    0 18px 40px -16px rgba(0,0,0,0.65),
    0 0 0 2px rgba(255,255,255,0.9);
}

#work .work-header-above{
  grid-column:auto;
  grid-row:auto;
  width:100%;
  max-width:none;
  margin:0;
}

@media (max-width:820px){
  .work-drift{
    height:auto;
    min-height:0;
    overflow:visible;
    perspective:none;
    margin-top:0;
  }
  .work-drift__plane{
    position:relative;
    top:auto;left:auto;
    transform:none!important;
    flex-direction:column;
    width:100%;
    max-width:none;
    gap:var(--wd-gap);
    padding:0;
  }
  .work-drift__col,
  .work-drift__col--wide{
    flex:none;
    width:100%;
  }
  .work-drift__track{
    transform:none!important;
    gap:var(--wd-gap);
  }
  .work-drift__tile--clone{display:none!important;}
  .work-drift__tile--lg .work-drift__inner{height:72vw;}
  .work-drift__tile--md .work-drift__inner,
  .work-drift__tile--mt .work-drift__inner,
  .work-drift__tile--sm .work-drift__inner,
  .work-drift__tile--script .work-drift__inner{height:56vw;}
  .work-drift__inner{
    opacity:1;
    transform:none!important;
  }
  .work-drift__overlay{opacity:0.22;}
  .work-drift__tile--lg .work-drift__overlay{opacity:0;}
  .work-drift__caption{
    opacity:1;
    transform:none;
    left:14px;
    right:14px;
    bottom:14px;
  }
  .work-drift__caption h3{font-size:17px;}
  .work-drift__caption .cat{font-size:11px;}
}

@media (prefers-reduced-motion:reduce){
  .work-drift__plane,
  .work-drift__track{will-change:auto;}
  .work-drift__tile--clone{display:none!important;}
  .work-drift__inner{opacity:1;transform:none!important;}
  .work-drift__overlay{opacity:0.2;}
  .work-drift__tile--lg .work-drift__overlay{opacity:0;}
}