.universe-invitation {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  min-height:380px;
  padding:10px 0 40px;
}
.banner-copy {
  position:relative;
  z-index:1;
}
.banner-copy h3 {
  margin:18px 0;
  font:clamp(42px,5vw,76px)/.98 var(--serif);
  letter-spacing:-.045em;
}
.universe-invitation .banner-copy>p {
  font:16px/1.7 var(--sans);
  max-width:38ch;
}
.universe-invitation .banner-copy>.eyebrow {
  font:10px/1.6 var(--mono);
}
.banner-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:24px;
}
#showcase-banner-pause {
  padding:8px 12px;
  font-size:12px;
  background:transparent;
  color:inherit;
  border-color:#8c9f8980;
}
.banner-actions:has(#showcase-enter:not([hidden])) .banner-fallback {
  display:none;
}
#work > .universe:has(#showcase-enter:not([hidden])) > :not(.universe-invitation) {
  display:none;
}
.universe-invitation .banner-copy>.banner-guide {
  margin-top:16px;
  color:var(--universe-muted);
  font:14px/1.6 var(--sans);
}
.banner-copy:has(#showcase-enter[hidden])>.banner-guide {
  display:none;
}
.banner-stage {
  --banner-art-height:clamp(110px,16vw,200px);
  position:relative;
  min-width:0;
  min-height:340px;
  overflow:hidden;
  border:1px solid #e1ddc72b;
  background:radial-gradient(ellipse at 50% 25%,#74775455,transparent 65%),#10251f;
  box-shadow:inset 0 0 80px #0004;
}
.banner-slide {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  grid-template-rows:minmax(0,1fr) auto;
  gap:20px;
  padding:24px;
  opacity:0;
  visibility:hidden;
}
.banner-slide:first-child {
  opacity:1;
  visibility:visible;
}
.banner-slide img {
  max-width:75%;
  max-height:var(--banner-art-height);
  width:auto;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 20px 24px #0006);
}
.banner-slide--story img {
  box-sizing:border-box;
  width:auto;
  height:var(--banner-art-height);
  border:5px solid #0b1815;
  border-radius:16px;
  transform:rotate(-7deg);
}
.banner-slide--tools img {
  max-width:170px;
  border-radius:28%;
}
.banner-slide--sound img {
  transform:perspective(800px) rotateY(-12deg) rotateX(4deg);
}
.banner-slide--welinks img {
  max-width:190px;
}
.banner-slide--instruments img {
  max-width:100%;
  border-radius:2px;
}
.banner-slide>span {
  position:static;
  width:100%;
  font:10px/1.7 var(--mono);
  color:#d4be9c;
}
.banner-slide em {
  display:block;
  color:#f4f0e3;
  font:italic 24px/1.2 var(--serif);
  margin-top:6px;
}
.banner-ready:not([data-banner-still]) .banner-slide {
  animation:project-preview 36s linear infinite;
}
.banner-slide:nth-child(2) { animation-delay:-30s !important; }
.banner-slide:nth-child(3) { animation-delay:-24s !important; }
.banner-slide:nth-child(4) { animation-delay:-18s !important; }
.banner-slide:nth-child(5) { animation-delay:-12s !important; }
.banner-slide:nth-child(6) { animation-delay:-6s !important; }
@keyframes project-preview {
  0%,13.333333% { opacity:1;visibility:visible; }
  16.666667%,96.666667% { opacity:0;visibility:hidden; }
  100% { opacity:1;visibility:visible; }
}
@media(max-width:760px) {
  .universe-invitation {
    grid-template-columns:minmax(0,1fr);
    gap:24px;
  }
  .banner-stage {
    min-height:290px;
  }
  .banner-copy h3 { font-size:54px; }
}
@media(prefers-reduced-motion:reduce) {
  .banner-ready:not([data-banner-still]) .banner-slide,
  .banner-ready .banner-slide {
    animation:none;
  }
  .banner-slide { opacity:0;visibility:hidden; }
  .banner-slide:first-child { opacity:1;visibility:visible; }
}