:root{
  --work-depth-shadow:30px 44px 70px rgba(11,11,11,.18);
  --work-soft-shadow:0 18px 46px rgba(11,11,11,.10);
}

.bp__chips span{
  border-radius:0;
  background:rgba(255,255,255,.68);
}

.bp__experience-link{
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-50);
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding-bottom:5px;
  border-bottom:1px solid var(--ink-12);
  transition:color .28s var(--ease),border-color .28s var(--ease),transform .28s var(--ease);
}

.bp__experience-link span{
  font-size:14px;
  line-height:1;
  transform:translateY(-1px);
}

.bp__experience-link:hover{
  color:var(--ink);
  border-color:var(--ink);
  transform:translateY(-1px);
}

.motion-rail{
  position:fixed;
  left:clamp(14px,2vw,28px);
  top:50%;
  z-index:90;
  width:1px;
  height:clamp(96px,18vh,180px);
  background:var(--ink-07);
  transform:translateY(-50%);
  pointer-events:none;
}

.motion-rail i{
  position:absolute;
  left:0;
  top:0;
  width:1px;
  height:calc(var(--scroll-progress,0) * 100%);
  background:var(--ink);
}

.clip-archive,
.route-set,
.photo-study,
.olaplex-set,
.bp__more,
.still-study{
  position:relative;
  isolation:isolate;
  overflow:clip;
}

[data-experience]::before{
  content:attr(data-experience);
  position:absolute;
  right:0;
  top:clamp(18px,3vw,42px);
  z-index:-1;
  font-family:var(--display);
  font-size:clamp(54px,12vw,184px);
  font-weight:900;
  line-height:.8;
  letter-spacing:-.055em;
  text-transform:uppercase;
  color:rgba(11,11,11,.045);
  white-space:nowrap;
  pointer-events:none;
}

.cg-shot,
.route-card,
.photo-card,
.olaplex-card,
.tt-row,
.still-card{
  transition:transform .55s var(--ease),filter .55s var(--ease),box-shadow .55s var(--ease),opacity .55s var(--ease);
  will-change:transform,opacity;
}

.route-device,
.olaplex-device,
.gallery-device,
.tt-phone,
.photo-card img,
.still-card img{
  transition:transform .75s var(--ease),filter .75s var(--ease);
  will-change:transform;
}

.route-card,
.olaplex-card{
  background:rgba(255,255,255,.56);
}

.route-card:nth-child(2),
.olaplex-card:nth-child(2){
  margin-top:clamp(22px,4vw,72px);
}

.route-card:nth-child(3),
.olaplex-card:nth-child(3){
  margin-top:clamp(8px,1.8vw,34px);
}

.route-card::before,
.olaplex-card::before,
.cg-shot::before{
  content:attr(data-index);
  display:block;
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(38px,5vw,88px);
  line-height:.8;
  letter-spacing:-.05em;
  color:rgba(11,11,11,.09);
  margin-bottom:clamp(10px,1.4vw,18px);
}

.cg-shot::before{
  position:absolute;
  right:0;
  top:clamp(22px,4vh,48px);
  margin:0;
}

.cg-shot{
  position:relative;
}

.cg-shot:hover .gallery-device,
.cg-shot.is-held .gallery-device{
  filter:drop-shadow(var(--work-depth-shadow));
}

.route-card:hover,
.route-card.is-held,
.olaplex-card:hover,
.olaplex-card.is-held{
  transform:translateY(-8px);
}

.route-card:hover .route-device,
.route-card.is-held .route-device,
.olaplex-card:hover .olaplex-device,
.olaplex-card.is-held .olaplex-device{
  transform:translateY(-10px) rotateX(3deg);
  filter:drop-shadow(var(--work-depth-shadow));
}

.photo-card:hover,
.photo-card.is-held,
.still-card:hover,
.still-card.is-held{
  box-shadow:var(--work-soft-shadow);
}

.photo-card:hover img,
.photo-card.is-held img,
.still-card:hover img,
.still-card.is-held img{
  transform:scale(1.045);
}

.photo-card--hero:hover img,
.photo-card--hero.is-held img{
  transform:scale(1.035);
}

html.motion-ready [data-motion-reveal]{
  opacity:0;
  transform:translate3d(0,30px,0);
  filter:blur(8px);
}

html.motion-ready [data-motion-reveal].is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
  filter:blur(0);
}

html.motion-ready .bp__head[data-motion-reveal]{
  transform:translate3d(0,16px,0);
}

html.motion-ready [data-motion-reveal-delay="1"]{transition-delay:.08s;}
html.motion-ready [data-motion-reveal-delay="2"]{transition-delay:.16s;}
html.motion-ready [data-motion-reveal-delay="3"]{transition-delay:.24s;}

@supports (animation-timeline:view()){
  .gallery-device,
  .route-device,
  .olaplex-device,
  .tt-phone{
    animation:deviceDrift linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 62%;
  }
}

@keyframes deviceDrift{
  from{transform:translateY(28px) rotate(-2deg);}
  to{transform:translateY(-12px) rotate(1deg);}
}

@media(max-width:980px){
  .motion-rail{display:none;}
  .route-card:nth-child(2),
  .route-card:nth-child(3),
  .olaplex-card:nth-child(2),
  .olaplex-card:nth-child(3){
    margin-top:0;
  }
  [data-experience]::before{
    right:0;
    top:clamp(18px,7vw,34px);
    font-size:clamp(48px,20vw,120px);
  }
}

@media(prefers-reduced-motion:reduce){
  .motion-rail{display:none;}
  html.motion-ready [data-motion-reveal],
  html.motion-ready [data-motion-reveal].is-visible{
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
  }
  .cg-shot,
  .route-card,
  .photo-card,
  .olaplex-card,
  .tt-row,
  .still-card,
  .route-device,
  .olaplex-device,
  .gallery-device,
  .tt-phone,
  .photo-card img,
  .still-card img{
    animation:none!important;
    transition:none!important;
    transform:none!important;
  }
}