.atari-section{
  position: relative;

  overflow: hidden;

  /* fundo simples (você pode trocar) */
  background: linear-gradient(
    180deg,
    var(--cor-azul),
    color-mix(in srgb, var(--cor-azul) 75%, black 25%)
  );
}

/* O boneco */
.atari-walker{
  position: absolute;
  left: 40px;
  bottom: 0px;

  width: 16px;
  height: 16px;

  /* escala pra ficar "pixel art" */
  transform: scale(4);
  transform-origin: bottom left;

  image-rendering: pixelated;
  image-rendering: crisp-edges;

  /* sprite 2 frames (32x16), cada frame 16x16 */
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Crect width='32' height='16' fill='none'/%3E%3C!-- FRAME 1 --%3E%3Cg transform='translate(0,0)'%3E%3C!-- cabelo longo ajustado (-1px) --%3E%3Crect x='2' y='1' width='12' height='9' fill='%23F3A527'/%3E%3Crect x='2' y='8' width='3' height='4' fill='%23F3A527'/%3E%3Crect x='11' y='8' width='3' height='4' fill='%23F3A527'/%3E%3C!-- rosto --%3E%3Crect x='5' y='4' width='6' height='5' fill='%23FFEBD3'/%3E%3C!-- oculos --%3E%3Crect x='5' y='5' width='3' height='3' fill='%23FFF1A8'/%3E%3Crect x='8' y='5' width='3' height='3' fill='%23FFF1A8'/%3E%3C!-- olhos grandes (loiro escuro) --%3E%3Crect x='6' y='6' width='2' height='2' fill='%23C18412'/%3E%3Crect x='9' y='6' width='2' height='2' fill='%23C18412'/%3E%3C!-- camisa azul escura --%3E%3Crect x='5' y='9' width='6' height='4' fill='%23244566'/%3E%3C!-- pernas --%3E%3Crect x='5' y='13' width='2' height='3' fill='%23000000'/%3E%3Crect x='9' y='13' width='2' height='3' fill='%23000000'/%3E%3C!-- tenis --%3E%3Crect x='5' y='16' width='2' height='1' fill='%23F3A527'/%3E%3Crect x='9' y='16' width='2' height='1' fill='%23F3A527'/%3E%3C/g%3E%3C!-- FRAME 2 --%3E%3Cg transform='translate(16,0)'%3E%3C!-- cabelo longo ajustado (-1px) --%3E%3Crect x='2' y='1' width='12' height='9' fill='%23F3A527'/%3E%3Crect x='2' y='8' width='3' height='4' fill='%23F3A527'/%3E%3Crect x='11' y='8' width='3' height='4' fill='%23F3A527'/%3E%3C!-- rosto --%3E%3Crect x='5' y='4' width='6' height='5' fill='%23FFEBD3'/%3E%3C!-- oculos --%3E%3Crect x='5' y='5' width='3' height='3' fill='%23FFF1A8'/%3E%3Crect x='8' y='5' width='3' height='3' fill='%23FFF1A8'/%3E%3C!-- olhos grandes (loiro escuro) --%3E%3Crect x='6' y='6' width='2' height='2' fill='%23C18412'/%3E%3Crect x='9' y='6' width='2' height='2' fill='%23C18412'/%3E%3C!-- camisa azul escura --%3E%3Crect x='5' y='9' width='6' height='4' fill='%23244566'/%3E%3C!-- pernas alternadas --%3E%3Crect x='6' y='13' width='2' height='3' fill='%23000000'/%3E%3Crect x='8' y='13' width='2' height='3' fill='%23000000'/%3E%3C!-- tenis --%3E%3Crect x='6' y='16' width='2' height='1' fill='%23F3A527'/%3E%3Crect x='8' y='16' width='2' height='1' fill='%23F3A527'/%3E%3C/g%3E%3C/svg%3E");


  background-size: 32px 16px;
  background-position: 0 0;
}

/* andando = alterna os frames */
.atari-walker.walking{
  animation: walkFrames .28s steps(2) infinite;
}

/* vira pra esquerda */
.atari-walker.left{
  /* mantém escala e espelha no X */
  transform: scale(4) scaleX(-1);
  transform-origin: bottom left;
}

@keyframes walkFrames{
  from { background-position: 0 0; }
  to   { background-position: -32px 0; }
}

/* só pra garantir que conteúdo fique acima */
.atari-section .conteudo{
  position: relative;
  z-index: 2;
  padding: 48px 24px;
  color: var(--cor-creme);
}


/*SEÇAO GATINHOS*/

.secao-gatinhos{
  position: relative; /* ESSENCIAL */
  min-height: 420px;
  overflow: hidden;
}

/* camada onde ficam os gatos */
.gatinhos-layer{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.secao-gatinhos__conteudo{
  position: relative;
  z-index: 1;
}

/* gatinho base (sprite 3 frames: 48x16) */
.gatinho{
  position: absolute;
  left: 30px;
  bottom: 0px;

  width: 16px;
  height: 16px;

  /* ✅ menores */
  transform: scale(3);
  transform-origin: bottom left;

  image-rendering: pixelated;
  image-rendering: crisp-edges;

  background-size: 48px 16px;      /* 3 frames */
  background-position: 0 0;        /* frame 1 */
  will-change: left, transform, background-position;
}

/* vira pra esquerda */
.gatinho.esquerda{
  transform: scale(3) scaleX(-1);
}

/* andando alterna frame 1 e 2 */
.gatinho.andando{
  animation: gatinhoWalk .28s steps(1) infinite;
}

@keyframes gatinhoWalk{
  0%   { background-position:   0px 0; }   /* frame 1 */
  50%  { background-position: -16px 0; }   /* frame 2 */
  100% { background-position:   0px 0; }   /* frame 1 */
}

/* cheirar o chão (frame 3) */
.gatinho.cheirando{
  animation: gatinhoSniff .55s steps(1) 1;
}

@keyframes gatinhoSniff{
  0%   { background-position: -32px 0; transform: scale(3) translateY(0); }
  40%  { background-position: -32px 0; transform: scale(3) translateY(1px); }
  100% { background-position: -32px 0; transform: scale(3) translateY(0); }
}

/* cheirar + espelhado (pra não quebrar quando está na esquerda) */
.gatinho.esquerda.cheirando{
  animation: gatinhoSniffLeft .55s steps(1) 1;
}
@keyframes gatinhoSniffLeft{
  0%   { background-position: -32px 0; transform: scale(3) scaleX(-1) translateY(0); }
  40%  { background-position: -32px 0; transform: scale(3) scaleX(-1) translateY(1px); }
  100% { background-position: -32px 0; transform: scale(3) scaleX(-1) translateY(0); }
}

/* mobile menor ainda */
@media (max-width: 700px){
  .gatinho{ transform: scale(2.6); }
  .gatinho.esquerda{ transform: scale(2.6) scaleX(-1); }

  .gatinho.cheirando{
    animation: gatinhoSniffMobile .55s steps(1) 1;
  }
  .gatinho.esquerda.cheirando{
    animation: gatinhoSniffLeftMobile .55s steps(1) 1;
  }

  @keyframes gatinhoSniffMobile{
    0%   { background-position: -32px 0; transform: scale(2.6) translateY(0); }
    40%  { background-position: -32px 0; transform: scale(2.6) translateY(1px); }
    100% { background-position: -32px 0; transform: scale(2.6) translateY(0); }
  }
  @keyframes gatinhoSniffLeftMobile{
    0%   { background-position: -32px 0; transform: scale(2.6) scaleX(-1) translateY(0); }
    40%  { background-position: -32px 0; transform: scale(2.6) scaleX(-1) translateY(1px); }
    100% { background-position: -32px 0; transform: scale(2.6) scaleX(-1) translateY(0); }
  }
}