.project-hero::before{
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.02) 0%,
      rgba(0,0,0,.05) 22%,
      rgba(8,8,8,.16) 38%,
      rgba(8,8,8,.42) 52%,
      rgba(8,8,8,.68) 66%,
      rgba(8,8,8,.88) 79%,
      #080808 94%,
      #080808 100%),
    linear-gradient(90deg,rgba(0,0,0,.30),transparent 60%);
}

.echo-film-wrap{
  position:relative;
  width:100%;
  height:170svh;
  margin:0;
}

.echo-film{
  position:sticky;
  top:12svh;
  width:100%;
  height:76svh;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:#080808;
  box-shadow:none;
  isolation:isolate;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 58%,rgba(0,0,0,.88) 66%,rgba(0,0,0,.58) 76%,rgba(0,0,0,.22) 90%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 58%,rgba(0,0,0,.88) 66%,rgba(0,0,0,.58) 76%,rgba(0,0,0,.22) 90%,transparent 100%);
}

.echo-film video{
  position:absolute;
  inset:-12%;
  width:124%;
  height:124%;
  object-fit:cover;
  object-position:50% 34%;
  opacity:.74;
  filter:saturate(.78) contrast(1.08) brightness(.74);
  transform:translate3d(var(--dance-x,0px),calc(var(--echo-drift,0px) + var(--dance-y,0px)),0) scale(var(--dance-scale,1.035));
  transition:transform .48s cubic-bezier(.22,.8,.22,1),filter .35s ease,opacity .35s ease;
  will-change:transform;
}

.echo-film-shade{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at center,transparent 24%,rgba(8,8,8,.14) 58%,rgba(8,8,8,.72) 100%),
    linear-gradient(180deg,rgba(8,8,8,.34) 0%,rgba(8,8,8,.04) 22%,rgba(8,8,8,.06) 42%,rgba(8,8,8,.46) 62%,rgba(8,8,8,.80) 80%,rgba(8,8,8,.97) 94%,#080808 100%);
  pointer-events:none;
  transition:opacity .22s ease;
}

.echo-film-copy{
  position:absolute;
  left:clamp(22px,5vw,64px);
  bottom:clamp(74px,12vh,120px);
  z-index:2;
  opacity:.16;
  pointer-events:none;
  transition:opacity .4s ease;
}

.echo-film-copy span{
  display:block;
  margin-bottom:7px;
  color:rgba(220,216,208,.55);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.66rem;
}

.echo-film-copy strong{
  display:block;
  color:rgba(242,240,233,.34);
  font-size:clamp(2rem,6vw,5.2rem);
  line-height:.88;
  letter-spacing:-.055em;
}

.echo-sound{
  position:absolute;
  right:clamp(18px,4vw,50px);
  bottom:clamp(74px,12vh,120px);
  z-index:4;
  min-height:44px;
  max-width:min(300px,52vw);
  padding:0 10px;
  border:0;
  border-radius:0;
  background:transparent;
  color:rgba(238,234,226,.82);
  font-size:.68rem;
  font-weight:760;
  text-transform:uppercase;
  letter-spacing:.11em;
  line-height:1.35;
  text-align:right;
  text-shadow:0 2px 18px rgba(0,0,0,.95);
  cursor:pointer;
}

.echo-sound[hidden]{display:none!important;}
.echo-sound:focus-visible{
  outline:1px solid rgba(255,255,255,.5);
  outline-offset:6px;
}

.echo-film.wtf-open .echo-film-shade{opacity:.24;}
.echo-film.wtf-open .echo-film-copy{opacity:.05;}

.wtf-modal{
  position:absolute;
  inset:0;
  z-index:20;
  display:grid;
  place-items:center;
  padding:clamp(22px,5vw,64px);
  background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.13) 52%,rgba(0,0,0,.26));
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease,visibility .18s ease;
}

.wtf-modal.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.wtf-modal-inner{
  width:min(1000px,100%);
  text-align:center;
  text-shadow:0 5px 34px rgba(0,0,0,.96);
}

.wtf-modal-label{
  color:rgba(239,235,227,.78);
  font-size:clamp(.66rem,1.5vw,.9rem);
  font-weight:820;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.wtf-modal h2{
  margin:14px 0 28px;
  color:#f7f4ed;
  font-size:clamp(4.4rem,14vw,11rem);
  line-height:.76;
  letter-spacing:-.075em;
  text-transform:uppercase;
}

.wtf-close{
  min-height:48px;
  padding:0 20px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  background:rgba(8,8,8,.58);
  color:#f0ece3;
  font-weight:790;
  box-shadow:0 12px 38px rgba(0,0,0,.38);
  cursor:pointer;
}

@media(max-width:820px){
  .project-hero::before{
    background:
      linear-gradient(180deg,
        rgba(0,0,0,.02) 0%,
        rgba(0,0,0,.06) 20%,
        rgba(8,8,8,.20) 35%,
        rgba(8,8,8,.46) 50%,
        rgba(8,8,8,.72) 64%,
        rgba(8,8,8,.91) 78%,
        #080808 93%,
        #080808 100%),
      linear-gradient(90deg,rgba(0,0,0,.24),transparent 68%);
  }
  .echo-film-wrap{
    width:100%;
    height:auto;
    margin:0;
  }
  .echo-film{
    position:relative;
    top:auto;
    height:72svh;
    border-radius:0;
    -webkit-mask-image:none;
    mask-image:none;
    isolation:auto;
  }
  .echo-film video{
    inset:0;
    width:100%;
    height:100%;
    object-position:50% 31%;
    opacity:.78;
    filter:none;
    transform:none;
    transition:none;
    will-change:auto;
  }
  .echo-film-copy{
    left:20px;
    bottom:88px;
    opacity:.12;
  }
  .echo-film-copy strong{
    font-size:clamp(2.2rem,11vw,4.2rem);
  }
  .echo-sound{
    right:18px;
    bottom:88px;
    max-width:46vw;
  }
  .wtf-modal{
    padding:28px 18px 56px;
    background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.10) 48%,rgba(0,0,0,.24));
  }
  .wtf-modal-inner{width:100%;}
  .wtf-modal h2{
    margin:12px 0 24px;
    font-size:clamp(4.6rem,20vw,8.2rem);
    line-height:.74;
  }

  .fabric-page .topbar,
  .fabric-page .player{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  .fabric-page .project-poster{
    filter:none;
  }

  .fabric-page .signal-seam span{
    height:12px;
    animation:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .echo-film-wrap{height:auto;}
  .echo-film{position:relative;top:auto;height:62svh;}
  .echo-film video{transition:none;}
  .wtf-modal{transition:none;}
}