.logo-card {
  --x: 0px;
  --y: 0px;
  --r: 0deg;
  --s: 1;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: translate3d(var(--x), var(--y), 0) rotate(var(--r)) scale(var(--s));
}
.logo-card.is-entering { animation: logo-slap 190ms cubic-bezier(.16, 1, .3, 1) both; }
/* Follow the artwork's alpha, including cutouts; only clicked stickers cast a shadow. */
.hero__logo-stage:not(.is-playing) .logo-card {
  filter: drop-shadow(0 2px 2px rgb(5 3 18 / 55%)) drop-shadow(0 9px 8px rgb(5 3 18 / 38%));
}
.logo-art { position: relative; display: grid; place-items: center; width: 90%; height: 90%; }
.logo-mark {
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  mask: url("../images/Autorun-logo.svg") center / contain no-repeat;
  -webkit-mask: url("../images/Autorun-logo.svg") center / contain no-repeat;
}
.logo-art > .logo-mark { position: absolute; inset: 14%; width: 72%; height: 72%; }
.logo-caption { position: absolute; bottom: 8%; font: 700 10px/1 monospace; letter-spacing: .25em; }

.logo-art--vinyl {
  width: 87%; height: 88%;
  border: 7px solid #f5f4eb;
  border-radius: 29% 25% 30% 22%;
  background: var(--pinky);
  color: var(--darker-blue);
  box-shadow: 2px 5px 0 #0a091a, inset 0 0 0 1px rgb(17 15 42 / 12%);
}
.logo-art--vinyl > .logo-mark { inset: 6%; width: 88%; height: 88%; }
.logo-art--vinyl::after {
  content: ""; position: absolute; right: 7px; bottom: 5px; width: 32px; height: 30px;
  border-radius: 16px 1px 16px 2px; background: linear-gradient(135deg, #e4d7cd 48%, #fffaf1 52%);
  rotate: 7deg; box-shadow: -2px -2px 3px rgb(17 15 42 / 15%);
}

.logo-art--foil {
  color: #302b48;
  clip-path: polygon(50% 0%, 58% 7%, 69% 4%, 74% 14%, 85% 15%, 86% 26%, 96% 31%, 93% 42%, 100% 50%, 93% 58%, 96% 69%, 86% 74%, 85% 85%, 74% 86%, 69% 96%, 58% 93%, 50% 100%, 42% 93%, 31% 96%, 26% 86%, 15% 85%, 14% 74%, 4% 69%, 7% 58%, 0% 50%, 7% 42%, 4% 31%, 14% 26%, 15% 15%, 26% 14%, 31% 4%, 42% 7%);
  background: repeating-linear-gradient(25deg, transparent 0 3px, rgb(255 255 255 / 18%) 3px 4px), conic-gradient(from 30deg, #a0ced2, #ceabe4, #e5bfa0, #91d5c7, #c6b1df, #a0ced2);
}
.logo-art--foil::before { content: ""; position: absolute; inset: 11%; border: 1px solid rgb(48 43 72 / 30%); border-radius: 50%; }

.logo-art--stamp { width: 88%; height: 88%; border: 3px solid var(--pinky); border-radius: 50%; color: var(--pinky); background: #17132e; box-shadow: inset 0 0 0 5px #17132e, inset 0 0 0 6px var(--pinky); }
.logo-art--stamp::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(8deg, transparent 0 4px, rgb(17 15 42 / 60%) 4px 5px); }
.logo-art--stamp > .logo-mark { inset: 13% 18% 23%; width: 64%; height: 64%; }
.logo-art--stamp .logo-caption { bottom: 13%; font-size: 12px; }

.logo-art--ascii { width: 98%; height: 88%; padding: 18px 12px 12px; border: 1px solid #4f5b6a; border-radius: 7px; background: #0d1520; color: #86dfba; box-shadow: 4px 6px 0 rgb(0 0 0 / 22%); overflow: hidden; }
.logo-art--ascii::before { content: "● ● ●"; position: absolute; top: 6px; left: 10px; color: #738f95; font: 6px/1 monospace; letter-spacing: 2px; }
.logo-ascii { margin: 0; font: 7.3px/6.4px "Courier New", monospace; letter-spacing: 0; white-space: pre; text-align: left; }
.logo-art--ascii::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgb(134 223 186 / 12%) 49%, transparent 54%); transform: translateY(-100%); animation: logo-scan 1000ms ease-out 2; }

.logo-art--riso { width: 86%; height: 92%; background: #cdbfa9; color: #17132e; box-shadow: 3px 5px 0 rgb(0 0 0 / 25%); clip-path: polygon(1% 0, 100% 2%, 98% 100%, 0 98%); }
.logo-art--riso > .logo-mark { inset: 4%; width: 92%; height: 92%; }
.logo-art--riso > .logo-mark:nth-child(1) { color: #ef527e; translate: -6px 2px; }
.logo-art--riso > .logo-mark:nth-child(2) { color: #1993a0; translate: 5px -3px; mix-blend-mode: multiply; }
.logo-art--riso > .logo-mark:nth-child(3) { mix-blend-mode: multiply; opacity: .8; }
.logo-art--riso::after { content: ""; position: absolute; inset: 0; background: radial-gradient(#cdbfa9 24%, transparent 29%) 0 0 / 4px 4px; opacity: .35; }

.logo-art--pixel { width: 91%; height: 91%; color: var(--cyan); background: #181434; border: 4px solid #655d84; box-shadow: 5px 5px 0 var(--pinky); }
.logo-art--pixel svg { width: 92%; height: 92%; shape-rendering: crispEdges; filter: drop-shadow(4px 4px 0 #8b567b); }

.logo-art--disc { border: 2px solid #a5a8b0; border-radius: 50%; color: #302b48; background: repeating-radial-gradient(circle, transparent 0 3px, rgb(39 36 64 / 12%) 3px 4px), conic-gradient(from 10deg, #8a8fa7, #c6cfcb, #69647f, #bdaebc, #9dbbbb, #65637a, #8a8fa7); box-shadow: 3px 5px 0 rgb(0 0 0 / 25%); }
.logo-art--disc > .logo-mark { inset: 9%; width: 82%; height: 82%; }

.logo-art--ticket { width: 108%; height: 58%; border: 1px solid #d2c5a9; border-radius: 5px; background: #dfd3b9; color: #302b48; box-shadow: 3px 5px 0 rgb(0 0 0 / 25%); }
.logo-art--ticket > .logo-mark { inset: 8% auto 8% 3%; width: 48%; height: 84%; }
.logo-art--ticket .logo-caption { bottom: auto; top: 23%; right: 8%; font-size: 13px; letter-spacing: .1em; }
.logo-art--ticket::before { content: ""; position: absolute; top: 12%; bottom: 12%; left: 53%; border-left: 1px dashed #978c77; }
.logo-art--ticket::after { content: ""; position: absolute; bottom: 19%; right: 8%; width: 31%; height: 30%; background: repeating-linear-gradient(90deg, #302b48 0 2px, transparent 2px 4px, #302b48 4px 5px, transparent 5px 8px, #302b48 8px 12px, transparent 12px 14px); }

.logo-art--orbit { perspective: 650px; }
.logo-rotor { position: relative; width: 92%; height: 92%; transform-style: preserve-3d; transform: rotateX(14deg) rotateY(-24deg) rotateZ(5deg); animation: logo-orbit 1100ms cubic-bezier(.2, .6, .3, 1) both; }
.logo-rotor .logo-mark { position: absolute; inset: 0; color: #735368; transform: translateZ(var(--depth)); }
.logo-rotor .logo-mark:last-child { color: var(--pinky); }

.logo-art--wire { perspective: 600px; }
.logo-art--wire svg { width: 100%; height: 100%; overflow: visible; transform: rotateY(-22deg) rotateX(12deg); animation: logo-wire 1000ms ease-out both; }
.logo-art--wire path { fill: none; stroke: var(--cyan); stroke-width: 2; vector-effect: non-scaling-stroke; }
.logo-art--wire path:first-child { stroke: var(--pinky); }

.logo-art:has(> img) { width: 100%; height: 100%; }
.logo-art > img { width: 100%; height: 100%; object-fit: contain; }
.logo-art--chrome { animation: logo-chrome 850ms cubic-bezier(.2, .7, .3, 1) both; }

@keyframes logo-slap {
  from { opacity: 0; transform: translate3d(var(--x), var(--y), 0) rotate(calc(var(--r) - 7deg)) scale(calc(var(--s) * 1.2)); }
  to { opacity: 1; transform: translate3d(var(--x), var(--y), 0) rotate(var(--r)) scale(var(--s)); }
}
@keyframes logo-scan { to { transform: translateY(100%); } }
@keyframes logo-orbit {
  from { transform: rotateX(-16deg) rotateY(138deg) rotateZ(-9deg); }
  to { transform: rotateX(14deg) rotateY(-24deg) rotateZ(5deg); }
}
@keyframes logo-wire { from { transform: rotateY(55deg) rotateX(-12deg); } to { transform: rotateY(-22deg) rotateX(12deg); } }
@keyframes logo-chrome { from { transform: perspective(600px) rotateY(-55deg) scale(.86); } to { transform: perspective(600px) rotateY(0) scale(1); } }

.hero__logo-stage.is-dormant .logo-card, .hero__logo-stage.is-dormant .logo-art, .hero__logo-stage.is-dormant .logo-art *, .hero__logo-stage.is-dormant .logo-art::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .logo-intro .hero__logo, .hero__logo-stage.is-playing .hero__logo { visibility: visible; }
  .logo-card, .logo-art, .logo-art *, .logo-art::after { animation: none !important; }
}
@media (forced-colors: active) {
  .hero__logo-button { forced-color-adjust: none; }
}