/* Variants B (stream) and C (build): diagonal rows of chips, as on mailrift.com */
.v{position:absolute;inset:0}
.v-layer{
  position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);
  opacity:0;transition:opacity 1.4s var(--ease-out) .5s;
}
.is-ready .v-layer{opacity:1}
.v-stage{
  position:absolute;left:50%;top:50%;width:170vmax;
  display:flex;flex-direction:column;gap:22px;
  transform:translate(-50%,-50%) rotate(11deg);
  opacity:.55;
}
.v-row{display:flex;width:max-content;gap:18px;will-change:transform;animation:v-drift var(--dur,60s) linear infinite}
.v-row--rev{animation-direction:reverse}
@keyframes v-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* chips */
.chip{
  flex:none;width:300px;height:68px;border-radius:16px;
  display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:12px;
  padding:0 16px;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);
  box-shadow:0 18px 40px -24px #000c;
  transition:border-color .8s var(--ease-out),box-shadow .8s var(--ease-out),background .8s var(--ease-out);
}
.chip__ic{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  font:700 12px/1 var(--mono);letter-spacing:-.02em;
  color:var(--c,#7c8cff);background:color-mix(in srgb,var(--c,#7c8cff) 14%,#101116);
  border:1px solid color-mix(in srgb,var(--c,#7c8cff) 22%,transparent);
}
.chip__txt{min-width:0;display:flex;flex-direction:column;gap:3px}
.chip__file{font-family:var(--mono);font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip__src{font-family:var(--mono);font-size:12.5px;color:#c9c9d1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip__out{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden}
.chip__tag{
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);padding:3px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
}
.chip--out{
  background:linear-gradient(180deg,#141a22,#11151b);
  border-color:color-mix(in srgb,var(--accent) 26%,var(--line));
}
.chip--out .chip__ic{color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,#101216);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.chip--out .chip__ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.o-btn{font-size:12px;font-weight:700;color:var(--bg);background:var(--accent);padding:4px 12px;border-radius:999px}
.o-num{font-size:17px;letter-spacing:-.02em}
.o-ok{color:#7fd6a8;font-weight:700}
.o-sw{width:16px;height:16px;border-radius:5px;background:var(--accent);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 60%,transparent)}
.o-hash{font-family:var(--mono);font-size:13px;color:var(--accent)}
.o-av{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:700;color:var(--bg);background:#c3a6ff}

/* B: the rows lie on a tilted plane and recede into the distance; chips light up */
.v--stream .v-stage{
  width:210vmax;gap:24px;opacity:.62;
  transform:translate(-50%,-50%) perspective(1300px) rotateX(46deg) rotateZ(-12deg);
}
.v--stream .v-layer{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 86%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 86%,transparent 100%);
}
.chip.is-lit{
  border-color:color-mix(in srgb,var(--accent) 70%,var(--line));
  background:linear-gradient(180deg,#16202c,#121820);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent),0 0 46px -6px color-mix(in srgb,var(--accent) 60%,transparent);
}

/* C: source on the left of the beam, the built result on the right */
.v-layer--src{clip-path:inset(0 44% 0 0)}
.v-layer--out{clip-path:inset(0 0 0 56%)}
.beam{position:absolute;top:0;bottom:0;left:0;width:0;will-change:transform;transform:translate3d(56vw,0,0);opacity:0;transition:opacity .6s var(--ease-out) .25s}
.is-ready .beam{opacity:1}
.beam::before{
  content:"";position:absolute;top:-10%;bottom:-10%;left:-90px;width:180px;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 34%,transparent),transparent);
  filter:blur(18px);animation:beam-breathe 5.5s ease-in-out infinite;
}
.beam::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:min(26vw,320px);
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 14%,transparent),transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);
}
.beam__core{
  position:absolute;top:0;bottom:0;left:-1px;width:2px;
  background:linear-gradient(180deg,transparent,var(--accent) 18%,#fff 50%,var(--accent-2) 82%,transparent);
  box-shadow:0 0 12px 1px color-mix(in srgb,var(--accent) 70%,transparent),0 0 34px 4px color-mix(in srgb,var(--accent) 30%,transparent);
  transform:scaleY(0);transition:transform 1.1s var(--ease-out) .15s;
}
.is-ready .beam__core{transform:scaleY(1)}
.beam__spark{
  position:absolute;left:-2px;width:4px;height:140px;top:-160px;border-radius:4px;
  background:linear-gradient(180deg,transparent,#fff,transparent);
  filter:drop-shadow(0 0 8px var(--accent-2));
  animation:spark 4.2s var(--ease-out) 1.4s infinite;
}
@keyframes beam-breathe{0%,100%{opacity:.75;transform:scaleX(1)}50%{opacity:1;transform:scaleX(1.25)}}
@keyframes spark{0%{transform:translateY(0);opacity:0}10%{opacity:1}70%{opacity:1}100%{transform:translateY(calc(100vh + 320px));opacity:0}}

@media (max-width:720px){
  .chip{width:250px;height:62px;grid-template-columns:32px 1fr auto;padding:0 12px;gap:10px}
  .chip__ic{width:32px;height:32px}
  .v-stage{gap:16px}
  .v--stream .v-stage{width:240vmax;transform:translate(-50%,-50%) perspective(1100px) rotateX(36deg) rotateZ(-12deg)}
}
@media (prefers-reduced-motion:reduce){
  .v-row,.beam::before,.beam__spark{animation:none!important}
}