.resource-tunnel{
  position:relative;
  height:330svh;
  min-height:2400px;
  margin:0 var(--col);
  background:var(--bg);
  color:var(--cream);
  isolation:isolate;
}
.resource-tunnel-sticky{
  position:sticky;
  top:0;
  width:100%;
  height:100svh;
  min-height:620px;
  overflow:hidden;
  background:var(--bg);
  box-shadow:inset 0 1px 0 var(--brdr),inset 0 -1px 0 var(--brdr);
}
.resource-tunnel-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.resource-tunnel-grid{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(90deg,transparent calc(33.333% - .5px),var(--c08) 33.333%,transparent calc(33.333% + .5px)),
    linear-gradient(90deg,transparent calc(66.666% - .5px),var(--c08) 66.666%,transparent calc(66.666% + .5px)),
    linear-gradient(transparent calc(33.333% - .5px),var(--c08) 33.333%,transparent calc(33.333% + .5px)),
    linear-gradient(transparent calc(66.666% - .5px),var(--c08) 66.666%,transparent calc(66.666% + .5px)),
    radial-gradient(circle,rgba(var(--red-rgb, 201,100,81),.22) .55px,transparent .75px);
  background-size:auto,auto,auto,auto,3px 3px;
  opacity:.66;
}
.resource-tunnel-cross{
  position:absolute;
  width:15px;
  height:15px;
  color:rgba(var(--red-rgb, 201,100,81),.62);
}
.resource-tunnel-cross::before,
.resource-tunnel-cross::after{
  content:"";
  position:absolute;
  background:currentColor;
}
.resource-tunnel-cross::before{left:7px;top:0;width:1px;height:15px}
.resource-tunnel-cross::after{left:0;top:7px;width:15px;height:1px}
.resource-tunnel-cross.c1{left:calc(33.333% - 7px);top:calc(33.333% - 7px)}
.resource-tunnel-cross.c2{left:calc(66.666% - 7px);top:calc(33.333% - 7px)}
.resource-tunnel-cross.c3{left:calc(33.333% - 7px);top:calc(66.666% - 7px)}
.resource-tunnel-cross.c4{left:calc(66.666% - 7px);top:calc(66.666% - 7px)}
.resource-tunnel-copy{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.resource-tunnel-phrase{
  position:absolute;
  width:min(1080px,86vw);
  color:var(--cream);
  font-family:var(--ff);
  font-size:clamp(58px,7vw,106px);
  font-weight:700;
  line-height:.88;
  letter-spacing:-.04em;
  text-align:center;
  text-transform:uppercase;
  text-wrap:balance;
  opacity:0;
  transform:scale(.78);
  filter:blur(14px);
  will-change:opacity,transform,filter;
  text-shadow:0 4px 24px rgba(0,0,0,.9),0 0 18px rgba(var(--cream-rgb, 242,228,204),.12);
}
.resource-tunnel-phrase span{display:block}
.resource-tunnel-phrase span:last-child{
  color:var(--red);
  text-shadow:0 4px 24px rgba(0,0,0,.9),0 0 22px rgba(var(--red-rgb, 201,100,81),.2);
}
.resource-tunnel-progress{
  position:absolute;
  right:18px;
  top:50%;
  width:5px;
  height:192px;
  transform:translateY(-50%);
  border-radius:5px;
  background:var(--c08);
  box-shadow:inset 0 0 0 1px var(--c20);
}
.resource-tunnel-progress span{
  display:block;
  width:100%;
  height:26px;
  border-radius:5px;
  background:var(--red);
  box-shadow:0 0 12px rgba(var(--red-rgb, 201,100,81),.38);
  will-change:transform;
}
@media(max-width:780px){
  .resource-tunnel{height:300svh;min-height:2100px;margin:0}
  .resource-tunnel-sticky{min-height:560px}
  .resource-tunnel-grid{
    background-image:
      linear-gradient(90deg,transparent calc(50% - .5px),var(--c08) 50%,transparent calc(50% + .5px)),
      linear-gradient(transparent calc(50% - .5px),var(--c08) 50%,transparent calc(50% + .5px)),
      radial-gradient(circle,rgba(var(--red-rgb, 201,100,81),.22) .55px,transparent .75px);
    background-size:auto,auto,3px 3px;
  }
  .resource-tunnel-cross.c1,.resource-tunnel-cross.c2,.resource-tunnel-cross.c4{display:none}
  .resource-tunnel-cross.c3{left:calc(50% - 7px);top:calc(50% - 7px)}
  .resource-tunnel-phrase{width:90vw;font-size:clamp(46px,13vw,72px);line-height:.9}
  .resource-tunnel-progress{right:10px;width:4px;height:148px}
  .resource-tunnel-progress span{height:22px}
}
@media(prefers-reduced-motion:reduce){
  .resource-tunnel{height:100svh;min-height:620px}
  .resource-tunnel-phrase:first-child{opacity:1!important;transform:none!important;filter:none!important}
  .resource-tunnel-phrase:not(:first-child){display:none}
  .resource-tunnel-progress{display:none}
}