@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');

:root{
  /* Paleta do layout referência */
  --primary-dark:#1e3c72;    /* azul marinho */
  --primary-mid:#2a5298;     /* azul médio (gradiente) */
  --accent:#3b82f6;          /* azul claro (se precisar depois) */
  --text-on-primary:#ffffff; /* texto sobre azul */
  --ease:cubic-bezier(.25,.8,.25,1);
}

*{ box-sizing:border-box; }

html,body{
  height:100%;
  margin:0;
}

body{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f3f4f6;
  font-family:'Montserrat', sans-serif;
}

.animation{
  width:min(90vw, 900px);
  padding:24px 12px;
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}

#stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.row{
  display:flex;
  gap:10px;
  justify-content:center;
}

/* 🔵 Caixas atualizadas para a nova identidade visual */
.box{
  width:56px;
  height:56px;
  border-radius:6px;

  /* fundo azul (gradiente) e letras brancas */
  background: linear-gradient(145deg, var(--primary-dark) 0%, var(--primary-mid) 100%);
  color: var(--text-on-primary);

  font-weight:700;
  font-size:1.55rem;
  display:flex;
  align-items:center;
  justify-content:center;

  /* sombra suave semelhante ao mock */
  box-shadow:0 6px 16px rgba(0,0,0,.08);

  opacity:0;
  transform:translate(
    calc(var(--ox, 0px)),
    calc(var(--oy, 0px))
  ) scale(.95);
  transition:all .55s var(--ease);
}

.box.show{
  opacity:1;
  transform:translate(0,0) scale(1);
}