:root {
  --opening-size: 144px;
  --opening-duration: 800ms;
  --gallop-duration: 720ms;
  --opening-layer: 100;
  --opening-mask: radial-gradient(ellipse, black 45%, transparent 72%);
}
.brand-opening {
  position: fixed;
  inset: 0;
  z-index: var(--opening-layer);
  display: grid;
  place-items: center;
  background: var(--canvas);
  pointer-events: none;
  animation: opening-exit var(--opening-duration) var(--motion-ease) both;
}
.brand-opening__horse {
  width: var(--opening-size);
  height: var(--opening-size);
  background: url('/assets/pabal-ascii-run.svg') 0 0 / 300% 200%;
  
  animation: horse-gallop var(--gallop-duration) steps(1, end) 2;
}
body:focus-within .brand-opening { visibility: hidden !important; opacity: 0 !important; }
@keyframes opening-exit {
  0%, 70% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes horse-gallop {
  0% { background-position: 0 0; }
  16.667% { background-position: 50% 0; }
  33.333% { background-position: 100% 0; }
  50% { background-position: 0 100%; }
  66.667% { background-position: 50% 100%; }
  83.333% { background-position: 100% 100%; }
}
@media (max-width: 600px) { :root { --opening-size: 120px; } }
@media (prefers-reduced-motion: reduce) {
  .brand-opening { display: none; animation: none; }
  .brand-opening__horse { animation: none; }
}