/* Motor visual compartilhado do pombo (layout + mecânica do sprite). Tema fica em cada página. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }

.portal {
  min-height: 100dvh; width: 100%;
  display: grid; place-items: center;
  color: inherit; text-decoration: none; cursor: pointer;
  isolation: isolate; -webkit-tap-highlight-color: transparent;
}
.center {
  display: grid; justify-items: center; gap: 1.25rem;
  transform: translateY(-2vh); user-select: none;
}
.stage {
  position: relative;
  width: var(--sprite-size, 288px); height: var(--sprite-size, 288px);
  transform: translate(var(--nudge-x, 0), var(--nudge-y, 0));
  transition: transform 90ms steps(2, end);
  will-change: transform;
}
.sprite {
  display: block;
  width: var(--sprite-size, 288px); height: var(--sprite-size, 288px);
  background-repeat: no-repeat;
  background-size: var(--sheet-w, 2880px) var(--sheet-h, 2016px);
  background-position: 0 var(--bg-y, 0px);
  image-rendering: pixelated; image-rendering: crisp-edges;
  will-change: background-position;
}
@keyframes spriteSteps {
  from { background-position-x: 0; }
  to   { background-position-x: var(--distance-x, -2880px); }
}

/* sombra projetada opcional (encolhe na decolagem) */
.shadow {
  position: absolute; left: 50%; bottom: 8%;
  width: 46%; height: 7%; transform: translateX(-50%);
  background: #0a0a0c; opacity: 0.5; border-radius: 999px; z-index: -1;
}
body.is-departing .shadow { animation: shadowOut 760ms steps(8) forwards; }
@keyframes shadowOut { to { transform: translateX(-50%) scaleX(0.2); opacity: 0; } }

/* decolagem */
body.is-departing .stage { animation: fly 760ms steps(8) forwards; }
@keyframes fly {
  0%   { transform: translate(0, 0); opacity: 1; }
  38%  { transform: translate(0, calc(var(--unit, 6px) * -4)); opacity: 1; }
  100% { transform: translate(calc(var(--unit, 6px) * 22), calc(var(--unit, 6px) * -32)); opacity: 0; }
}

/* juice (agy): screenshake + penas */
body.shake { animation: shake 0.12s steps(2) 5; }
@keyframes shake {
  0% { transform: translate(2px, 1px); } 25% { transform: translate(-2px, -1px); }
  50% { transform: translate(1px, -2px); } 75% { transform: translate(-1px, 2px); }
  100% { transform: translate(0, 0); }
}
.feather {
  position: fixed; width: 8px; height: 8px;
  image-rendering: pixelated; pointer-events: none; z-index: 80;
}

/* O pombo (sprite/idle/comer) é conteúdo essencial e anima sempre.
   Em "reduzir movimento" desligamos só o que mexe a tela inteira (screenshake). */
@media (prefers-reduced-motion: reduce) {
  body.shake { animation: none !important; }
}