#intro { display: none; }
.intro-active #intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  background: #111211;
  opacity: 1;
  transition: opacity var(--fade-duration, 200ms) ease;
  animation: intro-failsafe 0s 4s forwards;
}
.intro-active #intro.intro-leaving { opacity: 0; }
.intro-center { width: min(260px, 64vw); display: grid; justify-items: center; gap: 48px; }
.intro-icon {
  position: relative;
  width: min(220px, 52vw);
  aspect-ratio: 1;
  perspective: 700px;
  isolation: isolate;
}
.intro-icon img { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-piece {
  opacity: 0;
  will-change: transform, opacity;
  animation: gallery-assemble var(--intro-duration, 1650ms) cubic-bezier(.16,1,.3,1) both;
}
.piece-maze { clip-path: polygon(0 0,50% 0,50% 32%,28% 32%,28% 50%,0 50%); --x: -26px; --y: -18px; --turn: -9deg; }
.piece-race { clip-path: polygon(50% 0,100% 0,100% 50%,72% 50%,72% 32%,50% 32%); --x: 24px; --y: -16px; --turn: 8deg; animation-name: gallery-assemble-second; }
.piece-apps { clip-path: polygon(0 50%,28% 50%,28% 72%,50% 72%,50% 100%,0 100%); --x: -22px; --y: 22px; --turn: -7deg; animation-name: gallery-assemble-third; }
.piece-gold { clip-path: polygon(72% 50%,100% 50%,100% 100%,50% 100%,50% 72%,72% 72%); --x: 22px; --y: 24px; --turn: 8deg; animation-name: gallery-assemble-fourth; }
.piece-folder { clip-path: inset(32% 28% 28% 28%); --x: 0px; --y: 16px; --turn: 0deg; animation-name: gallery-assemble-center; }
.intro-resolved { opacity: 0; animation: gallery-resolve var(--intro-duration, 1650ms) ease both; }
.intro-sheen {
  position: absolute; inset: 1%; border-radius: 24%; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, #fff0 42%, #ffffff40 50%, #fff0 58%, transparent 70%);
  opacity: 0;
  animation: gallery-sheen var(--intro-duration, 1650ms) ease both;
}
.intro-track { width: 100%; height: 2px; background: #292b2a; overflow: hidden; border-radius: 2px; }
.intro-track span { display: block; height: 100%; transform-origin: left; transform: scaleX(var(--progress, 0)); background: linear-gradient(90deg, #727875, #dce0dd 90%, #fff); }
@keyframes gallery-assemble {
  0%, 4% { opacity: 0; transform: translate3d(var(--x),var(--y),-65px) rotate(var(--turn)) scale(.92); }
  36%, 100% { opacity: 1; transform: none; }
}
@keyframes gallery-assemble-second {
  0%, 16% { opacity: 0; transform: translate3d(var(--x),var(--y),-65px) rotate(var(--turn)) scale(.92); }
  48%, 100% { opacity: 1; transform: none; }
}
@keyframes gallery-assemble-third {
  0%, 28% { opacity: 0; transform: translate3d(var(--x),var(--y),-65px) rotate(var(--turn)) scale(.92); }
  60%, 100% { opacity: 1; transform: none; }
}
@keyframes gallery-assemble-fourth {
  0%, 38% { opacity: 0; transform: translate3d(var(--x),var(--y),-65px) rotate(var(--turn)) scale(.92); }
  70%, 100% { opacity: 1; transform: none; }
}
@keyframes gallery-assemble-center {
  0%, 48% { opacity: 0; transform: translate3d(var(--x),var(--y),35px) scale(1.12); }
  80%, 100% { opacity: 1; transform: none; }
}
@keyframes gallery-resolve { 0%, 78% { opacity: 0; } 86%, 100% { opacity: 1; } }
@keyframes gallery-sheen {
  0%, 76% { opacity: 0; transform: translateX(-30%); }
  85% { opacity: .5; }
  100% { opacity: 0; transform: translateX(30%); }
}
@keyframes intro-failsafe { to { visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) {
  .intro-piece, .intro-sheen { animation: none; opacity: 0; }
  .intro-resolved { animation: none; opacity: 1; }
  .intro-active #intro { transition: none; }
}

#intro:not(.intro-running) .intro-piece,
#intro:not(.intro-running) .intro-resolved,
#intro:not(.intro-running) .intro-sheen { animation-play-state: paused; }