/* Static portrait thumbnails repeat in both sets for a seamless loop. */
.hero{overflow:hidden;padding-bottom:74px}
.hero-showcase{
  position:relative;
  z-index:1;
  left:50%;
  width:100vw;
  margin-top:70px;
  overflow:hidden;
  transform:translateX(-50%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.hero-showcase-track{display:flex;width:max-content;animation:hero-showcase-scroll var(--showcase-duration,44s) linear infinite;will-change:transform}
.hero-showcase-set{display:flex;flex:none;gap:18px;padding:14px 18px 22px 0}
.video-tile{
  --tile-light:#c5d8ff;
  --tile-dark:#4376d1;
  --tile-angle:-7deg;
  position:relative;
  flex:none;
  width:190px;
  aspect-ratio:9/16;
  overflow:hidden;
  border:1px solid #ffffffa6;
  border-radius:23px;
  background:radial-gradient(circle at 70% 20%,#ffffff91,transparent 38%),linear-gradient(155deg,var(--tile-light),var(--tile-dark));
  box-shadow:0 13px 35px #243f6d22;
  transition:transform .3s ease,box-shadow .3s ease;
}
.video-tile>img,.video-tile>video{position:absolute;z-index:3;inset:0;width:100%;height:100%;object-fit:cover}
.video-tile::before{
  content:"";
  position:absolute;
  width:150%;
  aspect-ratio:1;
  left:-25%;
  top:-25%;
  border:1px solid #ffffff77;
  border-radius:50%;
  box-shadow:0 0 0 42px #ffffff13,0 0 0 90px #ffffff0d;
}
.video-tile::after{
  content:"";
  position:absolute;
  inset:56% 0 0;
  background:linear-gradient(transparent,#14244072);
}
.video-tile-art{
  position:absolute;
  z-index:1;
  top:18%;
  left:21%;
  width:58%;
  height:49%;
  border:1px solid #ffffffa8;
  border-radius:23px;
  background:linear-gradient(145deg,#ffffffaa,#ffffff1c);
  box-shadow:0 18px 42px #172b5540,inset 0 1px #fff8;
  transform:rotate(var(--tile-angle));
}
.video-tile-art::before{
  content:"";
  position:absolute;
  top:17%;
  left:22%;
  width:56%;
  aspect-ratio:1;
  border:2px solid #ffffffd8;
  border-radius:28%;
  background:radial-gradient(circle at 60% 35%,#fff9,transparent 45%);
}
.video-tile-art::after{
  content:"";
  position:absolute;
  left:17%;
  right:17%;
  bottom:16%;
  height:10%;
  border-radius:999px;
  background:#ffffffa8;
  box-shadow:0 -17px 0 -3px #ffffffa8;
}
.video-tile-lines{position:absolute;z-index:2;right:17px;bottom:23px;left:17px;display:grid;gap:8px}
.video-tile-lines i{display:block;width:76%;height:7px;border-radius:99px;background:#fff9}
.video-tile-lines i+ i{width:48%;height:5px;background:#fffb}
.video-tile-two{--tile-light:#c5f0e8;--tile-dark:#1a9c97;--tile-angle:8deg}
.video-tile-three{--tile-light:#e0d6ff;--tile-dark:#8270d0;--tile-angle:-4deg}
.video-tile-four{--tile-light:#ffd9c8;--tile-dark:#d67f72;--tile-angle:7deg}
.video-tile-five{--tile-light:#c4d8ff;--tile-dark:#243e79;--tile-angle:-9deg}
.video-tile-six{--tile-light:#ffebc3;--tile-dark:#be9256;--tile-angle:5deg}
.video-tile-seven{--tile-light:#d3e9ff;--tile-dark:#4386aa;--tile-angle:-5deg}
.video-tile-two .video-tile-art,.video-tile-five .video-tile-art{top:23%;left:16%;width:66%;height:44%;border-radius:50%}
.video-tile-three .video-tile-art,.video-tile-six .video-tile-art{top:15%;left:15%;width:67%;height:54%;border-radius:14px}
.video-tile-four .video-tile-art,.video-tile-seven .video-tile-art{top:25%;height:40%}
.video-tile:hover{transform:translateY(-8px);box-shadow:0 22px 45px #243f6d34}
.video-tile.has-thumbnail{aspect-ratio:3/4;background:#14213b}
.hero-showcase .video-tile.has-thumbnail{width:250px;aspect-ratio:5/7}
.video-tile.has-thumbnail::before,.video-tile.has-thumbnail::after{display:none}
@keyframes hero-showcase-scroll{to{transform:translate3d(var(--showcase-loop-distance,-50%),0,0)}}
@media(max-width:800px){
  .hero-showcase{margin-top:56px}
  .hero-showcase-set{gap:12px;padding-right:12px}
  .video-tile{width:155px;border-radius:19px}
  .hero-showcase .video-tile.has-thumbnail{width:190px}
}
@media(max-width:520px){
  .hero{padding-bottom:55px}
  .hero-showcase{margin-top:44px}
  .video-tile{width:136px;border-radius:17px}
  .hero-showcase .video-tile.has-thumbnail{width:164px}
  .video-tile-art{border-radius:17px}
  .video-tile-lines{left:12px;right:12px;bottom:17px}
}
@media(prefers-reduced-motion:reduce){
  .hero-showcase{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .hero-showcase-track{animation:none;will-change:auto}
  .video-tile{transition:none}
}