/* Velocity - only what Motion Transfer's stylesheet does not carry. */
.vel-body{--mt-accent:#c4b5fd}
#velThumb{width:96px;height:96px;object-fit:contain;border-radius:14px;display:block;
  background:repeating-conic-gradient(#1a1a24 0 25%,#0f0f16 0 50%) 50%/16px 16px}

/* the seven photos of the brand shoot, filling in as they are made */
.vel-photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.vel-photo{display:grid;justify-items:center;gap:6px;font-size:11.5px;font-weight:700;color:#c9c2df}
.vel-photo i{display:block;width:100%;aspect-ratio:9/16;border-radius:10px;background:#111118;
  border:1px solid rgba(255,255,255,.12);background-size:cover;background-position:center}
.vel-photo.is-made i{border-color:rgba(255,255,255,.5)}

/* the three optional end-card lines */
.vel-end{display:grid;gap:10px}
.vel-end input{width:100%}

/* the result is a vertical video */
.vel-outBox{width:auto;height:min(78vh,840px);aspect-ratio:9/16;max-width:100%;align-self:center;position:relative}
.vel-bar{position:absolute;left:16px;right:16px;bottom:16px;height:4px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.vel-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#f4f4f6,#8b5cf6);transition:width .3s ease}

@media (max-width:900px){
  .vel-outBox{height:auto;width:min(100%,calc(70vh*9/16))}
}